Components/Sheet

Sheet

Side-anchored panel that overlays the page. Choose any of the four edges via the `side` prop on either <Sheet> (default for all content) or per <SheetContent> (overrides the default). Used for navigation, filters, inspectors, and edit-in-place forms.

Installation

npx ajaxui add sheet

All four sides

Each SheetContent honors its own `side` prop — top, right, bottom, left. The animation direction matches the anchor.

Mobile navigation

Left-anchored nav with active item, footer action, and a hamburger trigger. The default mobile pattern.

Filters panel

Inline form controls inside a right-anchored sheet. Apply/Reset live in the footer so they're always reachable.

Notes

Anatomy

<Sheet side="right">              // default side
  <SheetTrigger asChild/>          // open
  <SheetContent side="top">        // overrides Sheet's side
    <SheetHeader>
      <SheetTitle/>
      <SheetDescription/>
    </SheetHeader>
    {/* body content */}
    <SheetFooter>
      <SheetClose asChild/>         // close
    </SheetFooter>
  </SheetContent>
</Sheet>

Two patterns for picking a side:

Default on the parent — set <Sheet side="left"> when every content inside slides from the same edge.
Override per content — set <SheetContent side="top"> when one Trigger should open from a different edge than another.

Props

Prop	Type	Default	Description
side	"top" \| "right" \| "bottom" \| "left"	"right"	On <Sheet>: default for every <SheetContent>. On <SheetContent>: override per content.
open	boolean	—	Controlled open state.
defaultOpen	boolean	false	Uncontrolled initial state.
onOpenChange	(open: boolean) => void	—	Fires when the sheet opens or closes.
asChild	boolean (on Trigger/Close)	false	Merge handlers into the child instead of rendering a <button>.