Comparison

UIcockpit vs shadcn/ui

shadcn/ui hands you neutral component primitives you own. UIcockpit hands you the design language that sits on top — so your app does not look like every other shadcn build. They are complementary, not rivals.

Read the docs

shadcn/ui is a brilliant collection of accessible React components you copy into your repo and own outright. What it deliberately does not give you is an opinion: out of the box, every shadcn app shares the same neutral grey look.

UIcockpit is the layer above. You make a handful of visual decisions — colour, type, shape, density, motion — and it derives a coherent set of framework-neutral design tokens. It even exports a drop-in shadcn globals.css, so the two work together: keep your shadcn components, wear your own brand.

$0
Forever free
100+
UI components
16
WCAG checks
7
Export formats

UIcockpit vs shadcn/ui

Where each one is the right tool — honestly.

UIcockpitshadcn/ui
StackFramework-neutral (HTML, Vue, Svelte, React…)React + Tailwind + Radix
What you getA complete design language as tokens + recipesComponent source code you own
Ready-made components100+ recipe CSS (full state contracts), not copy-paste sourceYes — accessible React components
Visual editor19 controls, live gallery + app previewHand-edit CSS variables
Export formats7 (tokens.css / JSON / Tailwind / shadcn / AI prompt / contract …)Component files
Works with shadcnYes — exports a shadcn-compatible globals.cssIt is shadcn
AI handoffBehaviour-shaping AI prompt + rules packHuman-readable docs
Hosted live kitYes — one <link>, returnable, auto-updatingNo
Lock-inNone — eject to filesNone — you own the code

Sits above, not against

We do not replace shadcn — we theme it. UIcockpit exports a shadcn globals.css so you can restyle an existing shadcn project without touching a single component.

Framework-neutral by design

The output is plain CSS custom properties (--k-*). They drop into React, Vue, Svelte, plain HTML — anything. You are never tied to one framework to wear your own brand.

One source, many transports

Tokens (CSS + JSON), a Tailwind @theme block, a shadcn globals.css, an AI prompt and a machine-readable contract — all derive from one config, so they can never disagree. Plus a hosted live <link> you return to, and a CLI + MCP so your agent reads the system and checks its own work against it.

Frequently asked

Is UIcockpit a shadcn alternative?
Not exactly — it solves a different problem. shadcn gives you components; UIcockpit gives you the design language to make them look like yours. Most people use both.
Can I use UIcockpit with my existing shadcn project?
Yes. Export the shadcn globals.css and drop it in — your components inherit the new brand, density and dark mode with no component edits.
Does UIcockpit give me components too?
It ships 100+ component recipes — CSS with full hover/focus/disabled contracts — plus the grammar an agent composes new components from, verified by uicockpit check. Not copy-paste React source like shadcn, so most people pair the two.

Generate a design system your AI agent follows.

100% free, framework-neutral tokens — no account, no lock-in, your design language, your file.