Docs/Customization
SECTION03

Your CSS has
the final word.

Three altitudes of control, in order of reach: semantic tokens to re-theme the system, --mo-* hooks to tune one component, and plain CSS to own any selector. All three work because the library lives in @layer and you don’t.

1 · GLOBAL TOKENS

Set once on :root (or any ancestor): every component reading the token follows — light, dark, both.

1:root {2  --primary: oklch(0.55 0.2 260);  /* brand, everywhere */3  --radius: 0rem;                  /* whole radius scale follows */4  --ring: var(--destructive);      /* every focus state follows */5}

Tokens the library reads

--background--foreground--card--popover--primary--secondary--muted--accent--destructive--success--warning--border--input--ring--radius

2 · COMPONENT HOOKS

When one component needs its own answer, set its hook — scoped to the element or an ancestor, no selectors to fight.

1:root {2  --mo-card-radius: 0;           /* square cards only */3  --mo-button-height: 2.25rem;   /* taller buttons */4}5 6.theme-marketing {7  --mo-badge-radius: 9999px;     /* …but pills in the hero */}8 

A few of the 130 hooks

--mo-button-radius--mo-button-height--mo-button-padding-x--mo-card-radius--mo-card-padding--mo-card-bg--mo-input-radius--mo-switch-width--mo-tabs-radius--mo-dialog-radius--mo-badge-radius--mo-tooltip-delay

Every component page lists its own hooks under Theming.

3 · PLAYGROUND

A real Mò component tree and a real stylesheet — not a simulation. Pick a preset, then write your own CSS: :root here means “this preview”.

Presets

Preview

Deploy to production

Ship the stylesheet and script with your build.

DefaultSecondaryOutline

Your CSS — edit me

Try it: change a value, delete a rule, or write your own — :root here means “this preview”.

RECOMMENDED WORKFLOW

  1. Tokens first. If the change is global (brand, radius, ring), a token is the whole job — and it survives every component update.
  2. Hooks second. One component drifting from the system? Its --mo-* hook is scoped and documented on its page.
  3. CSS last. Anything else: write a normal rule. Unlayered author CSS wins the cascade regardless of load order — that’s the philosophy.

Specificity still applies within your own CSS — two of your rules compete the way CSS always has. Mò just never competes with you.