Early Access
Styling

Styled Mode

The default experience. Import a component and it just looks great — no CSS file, no configuration, no setup.

How it works

When a component renders, it writes data-cui-* attributes onto its root DOM node. The package ships a tiny stylesheet that is lazily injected into <head> (via CSSStyleSheet.insertRule / a <style> tag) on first mount. No bundler plugin, no PostCSS, no CSS import is required on the consumer side.

Live example

Style cascade

Because styles target data-cui-* attributes (not class names), there is zero risk of conflicts with your existing CSS. You can still override individual properties using higher-specificity selectors or CSS custom properties.

/* Override a specific component without fighting class specificity */
[data-cui-toggle] {
  --toggle-width: 52px;
  --toggle-height: 28px;
}

/* Target state variants */
[data-cui-toggle][data-state='checked'] {
  background-color: #0ea5e9;
}

Per-component unstyled escape hatch

You can opt out of the default style on a single instance without changing anything else. See the Headless / Unstyled page for details.

// This Toggle keeps its default style
<Toggle checked={a} onCheckedChange={setA} />

// This one is completely bare
<Toggle unstyled checked={b} onCheckedChange={setB} className="custom" />