Overlay

Drawer

Bottom-anchored slide-up sheet with a drag handle. The shape iOS apps use for share sheets and settings sub-pages. For non-bottom edges, use Sheet.

Examples

Default (md)

<Button onclick={() => open = true}>Open drawer</Button>
<Drawer bind:open title="Share book" description="Pick a destination.">
  <p>Body content scrolls if it overflows.</p>
</Drawer>

size="lg"

<Drawer bind:open size="lg" title="Filter library">…</Drawer>

Props

Prop	Type	Default	Description
`open`	`boolean`	`false`	Bindable open state.
`title`	`string`	`—`	Optional heading.
`description`	`string`	`—`	Optional subhead.
`size`	`'sm' \| 'md' \| 'lg' \| 'full'`	`'md'`	Height as a vh fraction (40 / 60 / 80 / 100).
`children`	`Snippet`	`—`	Body content.
`footer`	`Snippet`	`—`	Optional action row.

Install

CLI

npm install bits-ui
npx @a3tai/mittsu add drawer