Starter
$0/yr$0/mo
For one project
- Three projects
- Community support
Pro / Theme
One brand colour for every section
The 108 sections read the theme contract: shadcn’s variable names, and --ma-brand above them. Set the brand, and the scale, the primary colour, the tinted neutrals, the accent, the four tones, the focus ring and the chart colours are derived in CSS, with no build step and no script on the page. Set a neutral or an accent yourself to override the derived one. What you copy below is what this preview runs.
preview
The four tones, the motion preset and the palette, then real sections with sample content. All of it is one data-ma-theme scope, and the theme toggle in the header switches its dark values.
tone · brand
Brand ground
The CTA panel and any section set to tone="brand" paint it. The text on it is chosen for contrast.
tone · ink
5
chart colours, 0.14 or more apart in lightness, so a colour-blind reader can still tell them apart
tone · muted
Cards, hairlines, fields and the focus ring follow the tone.
tone · surface
- Deploy finished
- Card expires in 3 days
- New sign-in from Lisbon
- Payment failed
motion · ui450 ms
stiffness 305 · damping 33
paletteprimary: 600 in light, 400 in dark
The brand scale and the neutral scale, eleven steps each, derived from the brand colour unless a neutral is set.
- primary
- accent
- success
- warning
- info
- destructive
- chart 1–5
Your product
A hero that already wears your colour.
Aurora, split headline, revealed copy and actions. Ship faster, lighter, calmer
108
sections on this contract
125
primitives, MIT
83
at zero bytes
Sample plans
Plus
$120/yr$12/mo
For a growing team
- Unlimited projects
- Priority support
- Shared workspaces
Business
$290/yr$29/mo
For larger teams
- Everything in Plus
- Single sign-on
We pasted our tweakcn theme and every section followed. No file edited.
One variable. The whole page.
Questions
Short answers; the theming guide has the long ones.
Do I need Tailwind?
No. theme.css is plain CSS; the Tailwind bridge is a second, optional file.
Will my shadcn theme work?
Yes. The sections read the same variable names, and your values win by specificity.
What about browsers without relative colour?
The copied block carries the same values precomputed, under @supports not.
Take this theme to your project.
Copy the CSS below and paste it after theme.css.
The CSS
Paste it in your global stylesheet after @moonarc/core/theme.css. The first block is the theme; the second is every derived value precomputed for browsers without oklch(from …); every other browser derives them from --ma-brand at runtime. The link in the first line is this page with your choices.
Or install the default theme
The registry serves the contract with its default values as a registry:theme item. The CLI merges the seeds and the roles into your :root and .dark and adds theme.css, which derives the rest, and the block above goes on top of it. The CLI needs the components.json from Setup; its tailwind.css names the stylesheet the variables go into.
npx shadcn@latest add https://moonarc.dev/r/theme.json