Convert any tinted-theming base24 color scheme into a shadcn/ui / Basecoat UI CSS theme. One command, 190+ schemes, zero dependencies.
No install — open the gallery, pick a theme, download:
Or use the CLI — convert a base24 scheme YAML to a shadcn/ui theme.css:
bun src/cli.tsscheme.yaml-o theme.css
From a URL with a preview:
bun src/cli.tshttps://raw.githubusercontent.com/.../one-dark.yaml-o theme.css --preview
Use magenta as the primary color:
bun src/cli.tsscheme.yaml-p base0E
Run the dev server (localhost only):
bun src/server.tsOpens at http://localhost:3001 — gallery, Basecoat UI proxy (localhost only), CSS API.
Each base24 slot maps to a semantic shadcn token. base00 becomes
--background, base0D drives
--primary. Charts, sidebar, destructive — all mapped.
Full Björn Ottosson conversion inline — sRGB linearization, D65 XYZ matrix, LMS transform, cube root, oklch output. No dependencies.
Detects scheme mode from variant field or luminance.
Auto-generates the opposite variant — neutral axis swap, capped chroma,
adjusted lightness.
| shadcn token | base24 slot | Rationale |
|---|---|---|
| --background | base00 | Default background (darkest) |
| --foreground | base05 | Primary text color |
| --card | base01 | Elevated surface |
| --primary | base0D ✦ | Brand/action color (overridable) |
| --secondary | base02 | Selection background |
| --muted | base01 | Subdued surface |
| --destructive | base08 | Errors, destructive actions |
| --border | base03 | Subtle borders |
| --ring | base0D ✦ | Focus ring (follows primary) |
| --sidebar | base10 | Darker sidebar background |
✦ = configurable via --primary flag. Also changes --ring, --chart-1, --sidebar-primary.
Runtime — fast TS execution, built-in HTTP server, zero-config.
Component library — shadcn/ui for any web stack. CDN at unpkg.com/basecoat-css@1.0.1.
v3 Play CDN for gallery, v4 compiled in Basecoat's style packs. Cascade fixes for v3/v4 layer conflicts.
Perceptually uniform. Björn Ottosson's conversion: sRGB → linear → XYZ D65 → LMS → oklch.
190+ base24 schemes from spec-0.11. Fetched from GitHub API, parsed inline.
No npm packages. YAML parsed with regex, oklch conversion inline, HTML generated from templates.
The tinted-theming project maintains hundreds of meticulously crafted color schemes — battle-tested across terminals, editors, and applications for over a decade.
Meanwhile, shadcn/ui theming
uses CSS custom properties in oklch() — a modern, perceptually uniform
color space. But there was no bridge between these two worlds.
base24-to-shadcn is that bridge. It takes any base24 scheme, converts every hex color to oklch via the Björn Ottosson algorithm, and maps the 24 terminal slots to shadcn's 30 semantic design tokens. The result: instant, production-ready CSS themes that work with Basecoat UI, shadcn/ui, and any Tailwind CSS project.