Early Access
Styling

Headless / Unstyled

Pass the unstyled prop to strip every default style. The component still manages all state and accessibility — you own the visual layer entirely.

The unstyled prop

Every component in @carabine/ui accepts an unstyled boolean. When truthy, no data-cui-* attributes are written to the DOM, so the bundled stylesheet has nothing to target. The component becomes a pure behaviour shell.

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

// No style whatsoever — you get a plain <button>
<Toggle unstyled checked={on} onCheckedChange={setOn} />

Live comparison

Styled
Unstyled

What you keep

Even with unstyled, the component still provides:

  • State management (controlled & uncontrolled)
  • data-state attribute for CSS targeting
  • Keyboard accessibility & ARIA attributes
  • asChild composition
  • All event callbacks

Styling unstyled components

Target the data-state attribute that every component still emits:

/* globals.css or any CSS module */
.my-toggle {
  padding: 4px 12px;
  border-radius: 9999px;
  border: 1.5px solid #d1d5db;
  cursor: pointer;
  font-size: 13px;
  transition: background 150ms, border-color 150ms;
  background: transparent;
}

.my-toggle[data-state='checked'] {
  background: #6366f1;
  border-color: #6366f1;
  color: #fff;
}
import { Toggle } from '@carabine/ui';

<Toggle unstyled className="my-toggle" checked={on} onCheckedChange={setOn} />