# claddcn-svelte

The [cladd.io](https://cladd.io) skin for shadcn-svelte.

## Install into a project

```bash
# in the root of a shadcn-svelte project
npx git+https://git.kotikot.com/lib/claddcn-svelte.git init --strip-vars
```

`init`:

1. copies `claddcn.css` next to your Tailwind entry and `@import`s it;
2. `--strip-vars` removes your old `:root` / `.dark` / `@theme inline` token blocks
   (claddcn defines every shadcn token, and blocks after the import would win);
3. overwrites `$lib/components/ui/*` with the cladd versions and backs up the old
   files to `.claddcn-backup/<timestamp>/`;
4. extends `cn()` so tailwind-merge understands `text-cladd-xs`, `h-cladd-md`, etc.;
5. installs `@fontsource-variable/geist` and `geist-mono`, using bun, pnpm, yarn or npm.

Flags: `--css <file>` (if components.json points at the wrong CSS), `--only button,card`, `--no-install`, `--dry`.

As a shadcn-svelte registry: `npx shadcn-svelte registry build` → serve `static/r`
→ `npx shadcn-svelte add https://…/r/button.json`.

## What you get

| shadcn-svelte                 | cladd equivalent                                         |
| ----------------------------- | -------------------------------------------------------- |
| `Button` `default`            | brand-tinted gradient surface (the “Get started” button) |
| `outline` / `secondary`       | neutral raised gradient, with or without outline         |
| `ghost`                       | transparent, rises to the next surface level on hover    |
| `destructive`                 | red-tinted surface                                       |
| `fill` (new)                  | solid accent gradient fill                               |
| `color="green"` (new)         | any of the 11 cladd accents on Button / Badge            |
| `rounded` (new)               | pill shape                                               |
| `Input`, `Textarea`           | recessed “cut” well, focus ring floating 4px off         |
| `Checkbox`                    | round thumb, brand fill when checked                     |
| `Switch`                      | cladd switch with the × → ✓ indicator                    |
| `Tabs`                        | toolbar pill with raised active segment                  |
| `Select`, menus               | 24px-radius popover, pill rows, spring scale-in          |
| `Dialog`, `Sheet`             | 24px panels, spring pop-in, floating sheet               |
| `Tooltip`                     | small raised surface, no arrow                           |
| `Surface`, `SurfaceCut` (new) | the cladd primitives, auto-nesting depth                 |

### Utility classes for hand-written markup

`cladd-surface` (+ `cladd-gradient`, `cladd-fill`, `cladd-gradient-fill`, `cladd-outline`),
`cladd-cut`, `cladd-ghost`, `cladd-hoverable`, `cladd-clickable`, `cladd-focusable`,
`cladd-segment` (active via `aria-current="page"` / `data-state="active"`),
`cladd-section-title`, `cladd-color-{neutral,brand,red,pink,purple,blue,cyan,lime,green,yellow,orange}`,
`cladd-level-{1..5}`.

Tailwind tokens: `bg-cladd-surface`, `bg-cladd-surface-next`, `text-cladd-fg-soft`,
`text-cladd-primary`, `h-cladd-md`, `rounded-cladd-md`, `rounded-cladd-panel`,
`shadow-cladd-outline`, `text-cladd-xs`, …

Nested `.cladd-surface` elements step one level deeper automatically (1–5). cladd does
this with React context. Here it comes from selector depth, so it also works in plain markup.

## Requirements

Tailwind CSS v4, bits-ui v2, tailwind-merge v3, and browsers with relative color
syntax (`oklch(from …)`): Chrome 119+, Safari 18+, Firefox 128+.

## License

MIT. Design tokens, surface math and component styling are ported from
[cladd](https://github.com/cladd-ui/cladd) (MIT, © 2026 cladd-ui).