Customizing with plain CSS

Import order

Import Manti first and your overrides second:

import '@manti-ui/styles/index.css';
import './theme.css';

Manti CSS is layered. Ordinary unlayered CSS wins without !important.

Prefer tokens

Use semantic tokens for changes that should affect the system:

:root {
  --manti-bg: light-dark(#fafafb, #0c0c10);
  --manti-surface: light-dark(#ffffff, #15151b);
  --manti-text: light-dark(#16161a, #f4f4f6);
  --manti-border: light-dark(#e6e6ea, #2a2a33);
  --manti-radius-factor: 0.8;
}

Use a component token for one intentional exception:

:root {
  --manti-button-radius: var(--manti-radius-full);
}

Target anatomy

When tokens are not enough, use public data attributes:

[data-scope='button'][data-part='root'] {
  letter-spacing: 0.02em;
}

[data-scope='button'][data-part='root'][data-variant='primary']:hover {
  translate: 0 -1px;
}

Stable selectors include:

data-scope — component name;
data-part — anatomy part;
data-variant and data-size;
documented state attributes such as data-state or data-loading.

Class names, private --_* variables, and undocumented DOM are not public API.

Add a variant

[data-variant='brand'] {
  --variant-solid: var(--manti-blue-9);
  --variant-solid-hover: var(--manti-blue-10);
  --variant-solid-active: color-mix(in oklab, var(--manti-blue-10) 88%, black);
  --variant-on-solid: var(--manti-text-on-accent);
  --variant-soft-bg: var(--manti-blue-2);
  --variant-soft-bg-hover: var(--manti-blue-3);
  --variant-soft-bg-active: var(--manti-blue-4);
  --variant-soft-text: var(--manti-blue-9);
  --variant-border: var(--manti-blue-7);
  --variant-text: var(--manti-blue-9);
  --variant-ring: var(--manti-blue-8);
}

<Button variant="brand">Save</Button>

Continue to Theming with tokens for token-selection guidance or Tailwind v4 for utility integration.

Last updated 13 September 2026