claddcn-svelte/README.md

claddcn-svelte

The cladd.io skin for shadcn-svelte.

Install into a project

# 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 @imports 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 (MIT, © 2026 cladd-ui).