styling

Same primitive, different Tailwind styling

This is the part that needs to be obvious. The two previews below use the same Hiraki primitives, but the Tailwind styling language is completely different.

Style A: Soft product sheet

Calm, clean, and app-like. Uses the same drawer parts with a light surface treatment.

soft-sheet.tsx

import { Drawer } from 'hiraki'

export function SoftSheet() {
  return (
    <Drawer.Root>
      <button className="rounded-2xl border border-zinc-200 bg-white px-4 py-2 text-sm font-medium text-zinc-900">
        Open soft sheet
      </button>
      <Drawer.Portal>
        <Drawer.Overlay className="bg-slate-900/30 backdrop-blur-sm" />
        <Drawer.Content className="rounded-t-[28px] border border-white/60 bg-white text-zinc-900 shadow-[0_-20px_60px_rgba(15,23,42,0.18)]">
          <Drawer.Handle className="mt-3 bg-slate-900/15" />
          <div className="space-y-5 p-6">
            <Drawer.Title className="text-lg font-semibold">Checkout summary</Drawer.Title>
            <Drawer.Description className="text-sm text-zinc-600">
              Soft product styling on top of the primitives.
            </Drawer.Description>
          </div>
        </Drawer.Content>
      </Drawer.Portal>
    </Drawer.Root>
  )
}

Style B: Editorial side panel

Bold, branded, and sharp. Same API, completely different visual language.

editorial-panel.tsx

import { Drawer } from 'hiraki'

export function EditorialPanel() {
  return (
    <Drawer.Root direction="right">
      <button className="border border-orange-400 bg-orange-500 px-4 py-2 text-sm font-black uppercase tracking-[0.18em] text-black">
        Open editorial panel
      </button>
      <Drawer.Portal>
        <Drawer.Overlay className="bg-black/70" />
        <Drawer.Content className="h-full max-w-md border-l-4 border-orange-500 bg-neutral-950 text-orange-50">
          <div className="border-b border-orange-500/30 px-6 py-5">
            <Drawer.Title className="text-xs font-black uppercase tracking-[0.3em] text-orange-400">
              Issue 04
            </Drawer.Title>
            <Drawer.Description className="mt-3 text-2xl font-semibold leading-tight text-orange-50">
              Same primitive, completely different visual language.
            </Drawer.Description>
          </div>
        </Drawer.Content>
      </Drawer.Portal>
    </Drawer.Root>
  )
}