Overlay

Sheet

Slide-in panel from a screen edge. macOS-flavored. Built on bits-ui's Dialog primitive — same focus trap and ESC, but content slides in from one of four sides.

Examples

side="right" (default)

<Button onclick={() => open = true}>Open right sheet</Button>
<Sheet bind:open title="Inspector" description="Properties for the selection.">
  <p>Sheet body content scrolls if it overflows.</p>
</Sheet>

side="left"

<Sheet bind:open side="left" title="Navigation">…</Sheet>

side="bottom"

<Sheet bind:open side="bottom" size="md" title="Filters">…</Sheet>

Props

Prop	Type	Default	Description
`open`	`boolean`	`false`	Bindable open state.
`title`	`string`	`—`	Optional heading.
`description`	`string`	`—`	Optional subhead.
`side`	`'right' \| 'left' \| 'top' \| 'bottom'`	`'right'`	Edge to slide in from.
`size`	`'sm' \| 'md' \| 'lg' \| 'full'`	`'md'`	Cross-axis dimension.
`children`	`Snippet`	`—`	Body content.
`footer`	`Snippet`	`—`	Optional action row.

Install

CLI

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