Early Access
Styling

With Tailwind CSS

Combine headless mode with Tailwind utility classes for a frictionless styling workflow. No configuration needed beyond a standard Tailwind setup.

Setup

No plugin or Tailwind preset required. Configure Tailwind normally, then pass unstyled to opt out of built-in styles and apply your own classes.

# 1. Install Tailwind CSS (v4 shown)
npm install tailwindcss @tailwindcss/vite
# or for Next.js
npm install tailwindcss @tailwindcss/postcss
/* globals.css */
@import 'tailwindcss';

Toggle with Tailwind

Tooltip with Tailwind

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

<Tooltip.Root>
  <Tooltip.Trigger asChild>
    <button className="rounded-md bg-zinc-900 px-3 py-1.5 text-sm text-white hover:bg-zinc-700">
      Hover me
    </button>
  </Tooltip.Trigger>
  <Tooltip.Content
    unstyled
    className="rounded-lg bg-zinc-900 px-3 py-1.5 text-xs text-white shadow-lg"
  >
    Custom tooltip
  </Tooltip.Content>
</Tooltip.Root>

CopyButton with Tailwind

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

<CopyButton
  value="npm install @carabine/ui"
  unstyled
  className={cn(
    'flex h-8 w-8 items-center justify-center rounded-md border border-zinc-200',
    'text-zinc-500 transition-colors hover:border-zinc-400 hover:text-zinc-900',
    'data-[state=copied]:border-green-300 data-[state=copied]:text-green-600',
  )}
/>

Tips

  • Use data-state variants (data-[state=checked]:bg-indigo-500) to style interactive states directly in Tailwind classes — no extra JS needed.
  • The cn() utility exported from @carabine/ui is fully compatible with clsx and tailwind-merge.
  • For typed Tailwind variants, pair with tailwind-variants or cva — they compose seamlessly with unstyled components.