Use case

Design tokens for Tailwind v4

Stop hand-writing a @theme block. Design your system visually and export a complete Tailwind v4 theme — every utility resolves to your brand.

Read the docs

Tailwind v4 moved theming into CSS with the @theme directive. UIcockpit generates that block for you: pick colour, type, shape, density and motion in a live preview, then copy a complete, on-grid @theme.

Because the tokens are framework-neutral underneath, the same system also exports as plain tokens.css, JSON, a shadcn theme or an AI prompt — Tailwind is just one of the transports.

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

A real @theme, not a stub

Colours, radii, spacing, the full type scale, motion and breakpoints — mapped so bg-primary, rounded-md and text-muted just work.

Light + dark included

Both modes emit; add the dark class and every utility re-resolves. No duplicate config.

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

Does this work with Tailwind v4’s @theme?
Yes — the export is a drop-in @theme block for Tailwind v4. Older setups can use the plain tokens.css.
Are the tokens Tailwind-only?
No. They are framework-neutral CSS variables; the Tailwind @theme is one of eight export formats.

Generate a design system your AI agent follows.

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