How do I install a shadcn/ui theme?

Open a theme and run its shadcn command, for example npx shadcn@latest add https://ui.cuelark.com/r/theme-linear.json. The CLI writes the light and dark CSS variables into your global stylesheet. Or copy the CSS and paste it after your Tailwind import.

Do these themes work with any shadcn/ui project?

Yes. They set the standard shadcn/ui variables (background, foreground, primary, muted, border, ring and the rest), so every shadcn component picks them up. Cuelark components also read the signal, density and crop-mark variables.

Are these the official Linear or Stripe themes?

No. They are independent themes inspired by each product's public look, with colors measured from their sites. They are not affiliated with or endorsed by those companies, and they use open-source fonts where the originals are commercial.

Can I preview components in a theme before installing it?

Yes. Every theme page shows real components in light and dark mode, and every component page has a theme picker above its preview, plus a full-screen view.

Themes · 12

Themes for shadcn/ui

Light and dark palettes in the style of products people love, tuned for the standard shadcn/ui variables. Search, flip to dark, apply one to this whole site, or open it to copy the CSS. Want your own? Build one in the editor.

LinearInter
PrimaryOutline
Hairline borders, quiet greys, one indigo accent. The default.
Open
StripeInstrument Sans
PrimaryOutline
Navy ink on cool white, blurple buttons, soft blue shadows.
Open
VercelGeist
PrimaryOutline
Black and white, Geist, tight corners, blue only for focus.
Open
SupabaseInter
PrimaryOutline
Neutral greys with Supabase green buttons.
Open
NotionIBM Plex Sans
PrimaryOutline
Warm ink on white, Notion blue, calm and readable.
Open
ClaudeInstrument Sans
PrimaryOutline
Warm paper, clay buttons, generous corners.
Open
CuelarkInter
PrimaryOutline
Cool mist, vivid cobalt buttons, crop marks.
Open
PaperInter
PrimaryOutline
Warm paper, ink buttons and a chartreuse signal.
Open
MonoGeist
PrimaryOutline
Pure neutral, ink accents, Geist. Quiet and exact.
Open
AtelierInstrument Sans
PrimaryOutline
Paper with violet, editorial type, generous corners.
Open
TerminalSpace Grotesk
PrimaryOutline
Square corners, compact, mint signal, Space Grotesk.
Open
StudioPlus Jakarta Sans
PrimaryOutline
Zinc, coral buttons, soft SaaS type, roomy.
Open

Themes, answered

How do I install a shadcn/ui theme?: Open a theme and run its shadcn command, for example npx shadcn@latest add https://ui.cuelark.com/r/theme-linear.json. The CLI writes the light and dark CSS variables into your global stylesheet. Or copy the CSS and paste it after your Tailwind import.
Do these themes work with any shadcn/ui project?: Yes. They set the standard shadcn/ui variables (background, foreground, primary, muted, border, ring and the rest), so every shadcn component picks them up. Cuelark components also read the signal, density and crop-mark variables.
Are these the official Linear or Stripe themes?: No. They are independent themes inspired by each product's public look, with colors measured from their sites. They are not affiliated with or endorsed by those companies, and they use open-source fonts where the originals are commercial.
Can I preview components in a theme before installing it?: Yes. Every theme page shows real components in light and dark mode, and every component page has a theme picker above its preview, plus a full-screen view.