# ynrlib

Copy editable React components into your project. Customize your design system in `src/index.css`, or edit each component directly.

Requires Node 22.12+, React 19+, React DOM and a project that compiles TSX.

```sh
npx ynrlib@latest list
npx ynrlib@latest add button text-input dialog
```

Or keep the CLI in your project's `package.json` and add components as needed:

```sh
npm install --save-dev ynrlib@latest
npx ynrlib add button
```

With pnpm, use `pnpm add -D ynrlib@latest`, then `pnpm exec ynrlib add button`. The CLI copies editable component source, CSS and supporting code into your app. Installing the CLI alone does not add components.

Version `0.3.0` includes 209 components, glass button variants, navigation controls and the full Lucide icon collection. Run `npx ynrlib@latest add toggle liquid-glass`, or use your installed CLI with `npx ynrlib add toggle liquid-glass`.

Run inside your app, or pass `--cwd /path/to/app`. Use `list` for the complete component inventory.

The CLI copies source into `src/components/ui`, includes third-party attribution, and appends its CSS foundation to `src/index.css` once. Import the stylesheet in your app entry:

```tsx
import { Button } from "./components/ui/button";
import "./index.css";

export function App() {
  return <Button label="Continue" variant="primary" />;
}
```

Add overrides after the generated styles:

```css
:root {
  --ynr-primary: #2563eb;
  --button-radius: 999px;
  --input-radius: 0px;
}
```

Copied components use React and ordinary CSS. They do not require Astryx, StyleX, Tailwind or a runtime dependency on this package. You own and edit the copies. Per-instance `className` and `style` are supported.

Matching files are skipped; locally edited files are never overwritten. Existing CSS is preserved; missing versioned CSS blocks and attribution are appended once. The CLI rejects symlink destinations. Complex components include a bundled local `_ynrlib` runtime with declarations and upstream notices; it does not run pnpm add or modify package.json. React and React DOM remain host dependencies. Keep `_ynrlib` with the source. The full runtime is currently copied when any selected component needs it (about 7 MB uncompressed); consumer bundlers resolve split modules as used. An interrupted copy can be rerun; conflicting local runtime edits are refused.

Existing installed TSX is not migrated automatically. If an older component imports radix-ui, keep that dependency until manually merging the new local-runtime import.

Button, Spinner, Kbd and StatusDot adapt selected Astryx models under its MIT license; the included third-party notice must remain with redistributed code. The 24 shadcn/ui adapters use WorkOS Radix for complex behavior. Four Untitled UI React adapters and four Mantine-inspired form controls use native React/HTML without added runtime dependencies. Full MIT attribution is included. These are not drop-in replacements for upstream APIs. Glass uses translucency and optional pointer tilt.

## Test a local development build

Build and pack with `pnpm build` then `pnpm --dir packages/cli pack --out ../../ynrlib.tgz` from the repository. Install that build once inside your React app, replacing the path below:

```sh
npm install --save-dev /absolute/path/to/ynrlib.tgz
npx ynrlib add toggle liquid-glass
```

Subsequent `npx ynrlib add <component>` commands use the installed local build. No tarball path is needed for each addition.

18 additional Base UI compositions cover searchable selection, numeric/code entry, validation, menus, drawer, toast and more. Their MIT attribution is included. Use `ynrlib list` for the complete inventory.

```sh
npx ynrlib add combobox select number-field form toast drawer
```

The `add` command copies the bundled Base UI runtime; no separate Base UI installation is needed. The TSX and CSS remain yours to edit. Preserve the included notices when redistributing.
The 22 Kibo adaptations add app widgets including Kanban, data tables, file selection, image crop, calendars, tags, syntax highlighting and QR codes. Use `npx ynrlib add kanban data-table dropzone`. These owned APIs differ from Kibo upstream; see the repository component README for their contract.

## React Aria controls

The expanded CLI copies a shared local accessibility runtime and bundled types with React Aria-derived controls. Only React/React DOM are required for these additions; no React Aria packages are installed. Shared support files participate in the same symlink/conflict checks as components. Editing the shared runtime requires manually merging later updates. Other controls use the CLI’s separate copied `_ynrlib` runtime.

With the CLI installed, run:

```sh
npx ynrlib add aria-combobox aria-number-field date-picker
```

### Icons

The full Lucide collection is included with ynrlib. Copy the editable icon entry
with `pnpm exec ynrlib add icons`, then use named imports:

```tsx
import { Undo2, Redo2, ChevronDown } from "./components/ui/icons";

<Undo2 size={18} strokeWidth={1.8} aria-hidden="true" />
```

When ynrlib is installed as an application dependency, import the same collection
from `ynrlib/icons`. No separate Lucide installation is needed. Unused named icons
are removed by a tree-shaking bundler. Icon-only controls still need an accessible
label (for example, `<button aria-label="Undo">…</button>`).