73 lines
3.8 KiB
Markdown
73 lines
3.8 KiB
Markdown
# 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
|
||
# or
|
||
bunx 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).
|