Skip to content

Pro / Theme

One brand colour for every section

The 28 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 · real sections with sample content, in a data-ma-theme scope, four tones; the theme toggle in the header switches its dark values

  • primary
  • neutral
  • accent
  • muted
  • ink
  • brand
  • success
  • warning
  • destructive

Your product

A hero that already wears your colour.

Aurora, split headline, revealed copy and actions. Ship faster, lighter, calmer

Copy the themeHow it worksnpx shadcn@latest add https://moonarc.dev/r/theme.json

28

sections on this contract

102

primitives, MIT

67

at zero bytes

Sample plans

Starter

$0/yr$0/mo

For one project

  • Three projects
  • Community support
Start

Plus

$120/yr$12/mo

For a growing team

  • Unlimited projects
  • Priority support
  • Shared workspaces
Subscribe

Business

$290/yr$29/mo

For larger teams

  • Everything in Plus
  • Single sign-on
Contact sales

We pasted our tweakcn theme and every section followed. No file edited.

A. BuyerDesign engineer

One variable. The whole page.

B. ReaderFounder

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.

Copy the CSSSee the sections

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.

src/styles/global.css
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.
terminal
npx shadcn@latest add https://moonarc.dev/r/theme.json