Drawer

Edge-anchored sheet / panel built on bits-ui Dialog. Supports right, left, top, and bottom anchors. Backdrop click and Escape close; focus is trapped while open.

Anchors

With Form

Long Content (Scrolling)

Props

Drawer.Root

Prop	Type	Default	Description
`open`	`boolean`	`false`	Controls drawer visibility (bindable)
`anchor`	`'right' \| 'left' \| 'top' \| 'bottom'`	`'right'`	Edge the drawer attaches to
`onOpenChange`	`(open: boolean) => void`	—	Callback when open state changes
`onClose`	`() => void`	—	Callback when drawer closes
`onOpenAutoFocus`	`(e: Event) => void`	—	Passthrough to override initial focus target
`class`	`string`	—	Additional CSS classes
`children`	`Snippet`	—	Drawer content

Drawer.Header / Drawer.Body / Drawer.Footer

Prop	Type	Default	Description
`class`	`string`	—	Additional CSS classes
`children`	`Snippet`	—	Section content

Drawer.Close

Prop	Type	Default	Description
`class`	`string`	—	Additional CSS classes
`children`	`Snippet`	`"x"`	Close button content

Usage

<script>
  import { Drawer, Button } from '@chrissnell/chonky-ui';

  let open = $state(false);
</script>

<Button onclick={() => (open = true)}>Open</Button>
<Drawer.Root bind:open anchor="right">
  <Drawer.Header>
    <h3>Details</h3>
    <Drawer.Close />
  </Drawer.Header>
  <Drawer.Body>
    <p>Panel content here.</p>
  </Drawer.Body>
  <Drawer.Footer>
    <Button onclick={() => (open = false)}>Close</Button>
  </Drawer.Footer>
</Drawer.Root>