@carabine/ui

React component library — styled by default, headless when you want.

No CSS import needed. Styles are bundled with JS and injected via data-cui-* attributes. Pass unstyled to strip all defaults and use your own styles.

Installation

pnpm add @carabine/ui
# or
npm install @carabine/ui

Quick start

import { Tooltip } from '@carabine/ui/tooltip';

<Tooltip>
  <Tooltip.Trigger>Hover me</Tooltip.Trigger>
  <Tooltip.Content>Shortcut: ⌘K</Tooltip.Content>
</Tooltip>

Headless mode

Pass unstyled to any component to remove all default styles:

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

// Styled out of the box
<Toggle />

// Headless — bring your own styles
<Toggle unstyled className="my-toggle" />

Components

| Component | Description | Docs | |---|---|---| | Tooltip | Hover/focus floating label | README | | Toggle | Simple on/off switch | README | | CodePreview | Live preview + code display | README | | CopyButton | Copy-to-clipboard with animation | README | | Selector | Pill-tab compound component for named content panels | README |

Each component's README contains the full props table, usage examples, and CSS variables.

Imports

Each component has its own entry point for tree-shaking:

import { Tooltip }    from '@carabine/ui/tooltip';
import { Toggle }     from '@carabine/ui/toggle';
import { CopyButton } from '@carabine/ui/copy-button';
import { cn }         from '@carabine/ui/cn';

// Or the full barrel (less tree-shakeable)
import { Tooltip, Toggle, cn } from '@carabine/ui';

Theming

All styles use CSS custom properties. Override on :root or any ancestor:

:root {
  --cui-primary: #6366f1;
  --cui-primary-hover: #4f46e5;
  --cui-primary-text: #ffffff;
  --cui-radius: 8px;
  --cui-font-family: system-ui, sans-serif;
  --cui-font-size: 14px;
  --cui-color: #1f2937;
  --cui-bg: #ffffff;
  --cui-border-color: #e5e7eb;
  --cui-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  --cui-muted: #6b7280;
  --cui-muted-bg: #f3f4f6;
}

Every component ships light and dark themes. Dark mode is applied automatically via @media (prefers-color-scheme: dark).

Design principles

| Principle | Description | |---|---| | Styled by default | Works out of the box — no CSS import needed | | Headless when you want | Pass unstyled to remove all styles | | CSS-first | Theming via --cui-* CSS custom properties | | Light & dark | Dark theme built in, no configuration required | | TypeScript-first | Full type safety with strict mode | | Zero runtime deps | Only react and react-dom as peer deps |

Development

pnpm dev          # Watch mode (bunchee)
pnpm build        # Production build (dual ESM/CJS)
pnpm type-check   # TypeScript type checking
pnpm test         # Run tests (vitest)
pnpm format       # Format code (prettier)

License

MIT