Sheet

A panel that slides in from any edge of the screen. Built on the @base-ui/react/dialogprimitive — inherits full accessibility, focus trapping, and ESC dismissal. Best for secondary workflows that don't fully replace the current context.

Anatomy

SheetContent accepts a side prop that controls which edge the panel slides from (default: "right"). showCloseButton toggles the built-in X button. SheetClose can wrap any element for custom dismiss actions.

side="right" (default)SheetHeader + SheetFootershowCloseButton prop

Sides

The side prop controls which edge the panel slides from. Each direction uses a matching slide animation.

side="right"
side="left"
side="top"
side="bottom"

Examples

Navigation menu

Settings panel

Filter panel

Design Guidelines

Do

  • Use right/left for navigation and settings. These sides feel natural for panels that supplement the main content without replacing it.
  • Use bottom for mobile-style action sheets. Bottom sheets feel familiar on touch devices and pair well with lists of actions.
  • Prefer Sheet over Dialog for multi-step flows. Sheets give more space and feel less interruptive for longer tasks.

Don't

  • Don't use for short confirmations. If you only need a yes/no answer, Dialog is the right tool — Sheet is for content, not prompts.
  • Don't overfill top/bottom sheets. These directions have constrained height — keep content brief or use right/left for scrollable content.
  • Don't open Sheet from inside a Dialog. Nested overlays break focus management; restructure the flow instead.

Developer Reference

Accessibility

  • Inherits role="dialog" from the dialog primitive with aria-labelledby / aria-describedby.
  • Keyboard focus is trapped; ESC and backdrop click dismiss the sheet.
  • Animations use data-starting-style and data-ending-style — side-specific translate transforms.
  • SheetClose asChild allows any element (Button, link) to dismiss the sheet.

Usage

import {
  Sheet,
  SheetTrigger,
  SheetContent,
  SheetHeader,
  SheetFooter,
  SheetTitle,
  SheetDescription,
  SheetClose,
} from "@/components/ui/sheet"

// Right sheet (default)
<Sheet>
  <SheetTrigger asChild>
    <Button>Open Settings</Button>
  </SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Settings</SheetTitle>
      <SheetDescription>Adjust your preferences.</SheetDescription>
    </SheetHeader>
    <div className="py-4">{/* content */}</div>
    <SheetFooter>
      <SheetClose asChild>
        <Button variant="outline">Cancel</Button>
      </SheetClose>
      <Button>Save</Button>
    </SheetFooter>
  </SheetContent>
</Sheet>

// Left navigation sheet
<SheetContent side="left">...</SheetContent>

// Bottom action sheet
<SheetContent side="bottom">...</SheetContent>

// Without close button
<SheetContent showCloseButton={false}>...</SheetContent>