quick start

Primitive structure first

Start from the structural parts. Once the behavior works, attach your classes and tokens.

Preview

This is the primitive structure with minimal product styling on top.

quick-start.tsx

import { Drawer } from 'hiraki'

export function Example() {
  return (
    <Drawer.Root>
      <Drawer.Trigger className="trigger">Open</Drawer.Trigger>
      <Drawer.Portal>
        <Drawer.Overlay className="overlay" />
        <Drawer.Content className="content">
          <Drawer.Handle className="handle" />
          <Drawer.Title className="title">Edit profile</Drawer.Title>
          <Drawer.Description className="description">
            Build your own design around the primitives.
          </Drawer.Description>
          <Drawer.Close className="close">Close</Drawer.Close>
        </Drawer.Content>
      </Drawer.Portal>
    </Drawer.Root>
  )
}