Styling Overview — carabine/ui

🎨Styled (Default)Zero-config. Styles inject automatically via data-cui-* attributes.⬡Headless / UnstyledPass unstyled to strip every default style. Bring your own CSS.🌊With Tailwind CSSPair headless mode with Tailwind utility classes.✦CSS VariablesOverride design tokens without touching component source.

How styles work

Every component rendered by @carabine/ui attaches one or more data-cui-* attributes to its DOM node. A tiny CSS sheet (bundled inside the package) targets those attributes. The sheet is injected once into <head> the first time any component mounts — no import '*.css' needed anywhere in your app.

<!-- What the DOM looks like for a Toggle -->
<button data-cui-toggle data-state="checked" ...>
  <span data-cui-toggle-thumb ...></span>
</button>

Choosing a mode

Pass unstyled on any root component to disable automatic attribute injection for that instance and all its descendants. You can mix modes freely — one Tooltip styled, another headless, within the same page.

import { Toggle } from '@carabine/ui';

// ✅ Styled (default) — no extra config
<Toggle checked={on} onCheckedChange={setOn} />

// ✅ Headless — data-cui-* NOT attached
<Toggle unstyled checked={on} onCheckedChange={setOn} className="my-toggle" />