How it compares
Svelte has good component libraries already. This one exists because none of them worked the way I wanted to start a project, not because they are bad. Here is the honest version of where it sits.
The shape of each one
| Project | How you get it | Styling | Theming |
|---|---|---|---|
| cock 66 components, including motion effects | npm dependency | Tailwind 4, included | Three CSS variables, the rest mixed with color-mix |
| shadcn-svelte Large, built on Bits UI | A CLI copies the source into your repo | Tailwind, yours to edit after copying | CSS variables in the copied files |
| Bits UI Behaviour and accessibility primitives | npm dependency | None. Headless by design | Whatever you write |
| Skeleton Design system plus components, several frameworks | npm dependency | Tailwind, with its own utility layer | A theme engine with prebuilt themes |
The actual difference
Styled, and a dependency. shadcn-svelte hands you
the source and you own it from then on, which is excellent when you want to rewrite a component
and awkward when you want an update. This kit is a normal package: you upgrade it and every
screen moves with it. The escape hatch is the class prop, merged through tailwind-merge,
so overriding a default never means forking a file.
Theming is three variables. Not a theme file, not a
generator step, not a build plugin: set --ck-bg, --ck-fg and --ck-accent, and surfaces, borders, hover states and secondary text are mixed from
them at paint time. That is also why a themed subtree works at all.
Motion is included. Typewriter, terminal, counters,
marquee, reveal and confetti usually mean another dependency. They are in here, and they all
settle on their final state under prefers-reduced-motion.
What it is not
- Not headless. It has opinions about how things look. If you want behaviour with no styling, Bits UI is the better answer, and this kit does not try to compete with it.
- Not as deep on hard widgets. There is no combobox, date picker, virtualised list or tree. Those are months of accessibility work each, and the libraries above have already done it.
- Not battle-tested. It is new, and it is largely one person's taste. The bits that exist are tested by use rather than by a suite.
- Not framework-agnostic. Svelte 5 and Tailwind 4, nothing else.
A reasonable combination
Size, measured
Every row is a real bundle: a Vite library build against the published package, minified, Svelte treated as external, then gzipped. Measured on 2026-11-01 against version 1.0.0.
| What was imported | Raw | Gzipped |
|---|---|---|
| clsx + tailwind-merge (shared baseline) | 37.6 kB | 9.6 kB |
| One Button | 41.2 kB | 10.9 kB |
| A form: Field, Input, Select, Checkbox, Switch, Button | 53.0 kB | 13.5 kB |
| A typical app screen: card, table, modal, menu, tabs, toasts | 68.5 kB | 17.9 kB |
| Everything the package exports | 173.4 kB | 41.5 kB |
| theme.css, the whole token layer | 9.4 kB | 2.8 kB |
Most of the first component is the shared baseline: clsx and tailwind-merge together are 9.6 kB gzipped, and every component after
that adds about 0.48 kB. Tree-shaking works because the package is ESM with
no side effects outside CSS — importing Button does not drag in the command palette.
The Tailwind classes the components use are compiled into your stylesheet by your own build, so they cost what they cost in your project. The numbers above are the JavaScript.
Rendering and SSR
- Everything renders on the server. This documentation site is prerendered to static HTML, which is the proof: view the source of any component page.
- The effects render their final content on the server and start animating once the browser takes over, so there is no empty box in the HTML.
- The one thing a server cannot do is read local storage, which is what the theme hook is for.
- No runtime CSS-in-JS and no style injection: the classes are static strings, resolved by Tailwind at build time.