Sheet

A panel that slides in from the edge of the screen. Ideal for navigation menus, filters, or detail views that don't require a full page.

Right Sheet

<Sheet>
  <SheetTrigger asChild>
    <Button variant="outline">Open Sheet</Button>
  </SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Settings</SheetTitle>
      <SheetDescription>
        Adjust your preferences below.
      </SheetDescription>
    </SheetHeader>
    <p className="text-sm text-muted-foreground mt-4">
      Sheet body content goes here.
    </p>
  </SheetContent>
</Sheet>

API Reference

Prop	Type	Default	Description
`open`	`boolean`	—	Controlled open state of the sheet.
`onOpenChange`	`(open: boolean) => void`	—	Callback fired when the open state changes.
`side`	`"top" \| "right" \| "bottom" \| "left"`	`"right"`	The edge of the viewport the sheet slides in from.

Accessibility

Built on Radix primitives, so focus is trapped inside the sheet while open and restored to the trigger on close. Escape closes the sheet. The backdrop is marked aria-hidden.

Every sheet must have a SheetTitle. If the title should be visually hidden, wrap it in VisuallyHidden from Radix.