Use case

A visual theme generator for Meta’s Astryx

Astryx ships 7 curated themes — or you hand-write a defineTheme file. UIcockpit is the third option: dial your own in a live preview and export the file.

Read the docs

Astryx (astryx.atmeta.com) themes are TypeScript files: token overrides as [light, dark] tuples plus typography and motion config, compiled by the Astryx CLI. Writing one by hand means picking dozens of colour values that must stay coherent across two modes.

UIcockpit generates that file from a kit you tuned visually: ~30 core semantic tokens (backgrounds, text, icons, borders, status, radius, shadows) mapped from your kit — light and dark both — plus your fonts and motion. Only the tokens that differ from Astryx’s defaults are overridden, exactly as their docs recommend.

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

A real defineTheme file

Ready for npx astryx theme build — resolved OKLCH literals, light/dark tuples, typography and motion included. No hand-picking 60 colour stops.

WCAG-audited before you export

The kit behind the theme passes a live 16-pair contrast audit, so the generated Astryx theme inherits accessible pairings.

No accounts, no lock-in

No login to configure or export. Your whole setup lives in the link; the static download is always one click away, byte-identical to the hosted kit. Eject any time.

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 replace Astryx?
No — it feeds it. Astryx provides the React components; UIcockpit generates the theme those components wear. The same kit also exports to Tailwind, shadcn and plain CSS.
How do I use the exported file?
Save it under themes/ in your Astryx project and compile it with npx astryx theme build ./themes/<name>.ts, then pass the built theme to your <Theme> provider.
What if I re-tune the kit later?
Regenerate the file from the same link — the kit lives behind a hash, so the theme file, tokens.css and every other export stay in sync.

Design a UI kit in 60 seconds.

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