Sheet

Slide-in drawer panel from any edge. Supports backdrop, keyboard dismiss, and multiple sizes.

import { Sheet } from 'phoundry-ui';

Right Sheet (Default)

Show code

let open = $state(false);

<Button onclick={() => open = true}>Open Right Sheet</Button>

<Sheet open={open} onclose={() => open = false} title="Details">
  <p>Sheet content goes here.</p>
</Sheet>

Left Sheet

Show code

<Sheet open={open} onclose={() => open = false} side="left" title="Navigation">
  <p>Sidebar navigation content.</p>
</Sheet>

Top Sheet

Show code

<Sheet open={open} onclose={() => open = false} side="top" size="lg" title="Notifications">
  <p>Top sheet — height follows size presets.</p>
</Sheet>

Full width column

Show code

<Sheet open={open} onclose={() => open = false} side="right" size="full" title="Fullscreen column" />

Modal-like dismissal

Show code

<Sheet
  open={open}
  onclose={() => open = false}
  closeOnBackdrop={false}
  title="Review changes"
>
  <p>Must close via button or X — backdrop clicks ignored.</p>
</Sheet>

Bottom Sheet

Show code

<Sheet open={open} onclose={() => open = false} side="bottom" size="sm" title="Quick Actions">
  <p>Bottom sheet content.</p>
</Sheet>

Props

Prop	Type	Default	Description
open required	boolean	—	Whether the sheet is visible.
onclose required	() => void	—	Called when the sheet should close.
side	'left' \| 'right' \| 'top' \| 'bottom'	'right'	Which edge the sheet slides from.
size	'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'	'md'	Sheet width (left/right) or height (top/bottom).
title	string	—	Header title text.
closeOnBackdrop	boolean	true	Close when clicking the backdrop.
closeOnEscape	boolean	true	Close on Escape key.
showCloseButton	boolean	true	Show the X close button in the header.
class	string	—	Additional CSS classes for the sheet panel.
children required	Snippet	—	Sheet body content.

Usage tips

Use side="right" for detail panels, side="left" for navigation, and side="bottom" for mobile-style menus.
Set closeOnBackdrop=false for sheets with unsaved form data to prevent accidental dismissal.
The size prop controls width for left/right sheets and height for top/bottom sheets (sm–xl map to px presets, full fills the axis).
showCloseButton={false} hides the header close control — still provide another dismiss affordance when closeOnEscape is left enabled.
Uses role="dialog" and aria-modal="true"; add your own focus trap if the sheet contains complex interactive widgets.