Sheet

An edge-anchored drawer for secondary navigation, inspectors, forms, and mobile-first choices.

Use Sheet when content should remain spatially connected to an application edge. Use Modal for centered tasks that require focused attention without implying a persistent workspace.

Profile sheet

Installation

$npx shadcn@latest add @patchui/sheet

The copied source is available in the registry JSON. The canonical implementation lives in packages/react/src/components/sheet.tsx.

Usage

<Sheet side="right">
  <SheetTrigger render={<Button variant="secondary" />}>
    Edit Profile
  </SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Profile</SheetTitle>
      <SheetDescription>Update member details.</SheetDescription>
    </SheetHeader>
    <SheetBody>...</SheetBody>
    <SheetFooter>
      <SheetClose render={<Button variant="secondary" />}>Cancel</SheetClose>
      <SheetClose render={<Button />}>Save Profile</SheetClose>
    </SheetFooter>
  </SheetContent>
</Sheet>

Set side on Sheet so placement and swipe direction remain synchronized. SheetContent owns the outer boundary, backdrop, and elevation.

Composition

Sheet
├── SheetTrigger
└── SheetContent
    ├── SheetHeader
    │   ├── SheetTitle
    │   └── SheetDescription
    ├── SheetBody
    └── SheetFooter
        └── SheetClose

Examples

Bottom picker

Bottom sheets work well for a short mobile-first choice list. Each option can close the sheet directly through SheetClose.

Bottom picker

API reference

Prop	Type	Default	Description
open / onOpenChange	boolean / (open: boolean) => void	-	Controls the drawer’s open state.
defaultOpen	boolean	false	Sets the initial uncontrolled open state.
side	"top" \| "right" \| "bottom" \| "left"	"right"	Selects the anchored edge and matching swipe direction.
SheetContent.showClose	boolean	automatic	Overrides the close control, which SheetHeader normally supplies.
SheetHeader.leading / trailing	ReactNode / ReactNode	-	Switches to a compact three-slot header when edge controls are needed.
SheetFooter.stacked	boolean	false	Stacks footer actions vertically instead of using a horizontal row.

SheetHeader adds a close control by default; set hideClose or provide custom trailing content to override it. SheetClose can render a Button or another semantic control.

Accessibility

SheetTitle and SheetDescription provide the drawer’s accessible name and description through Base UI Drawer.
Focus is contained while open and returns to the trigger after close.
Escape, backdrop interaction, swipe dismissal, and SheetClose all request the same open-state change.
Keep Cancel explicit when a sheet contains editable or unsaved state.
SheetBody is the scrollable region, preserving access to the header and footer around long content.

Placement guidance

Use right for inspectors and editing, left for application navigation, bottom for short mobile-first choices, and top only when the relationship to the upper edge is meaningful. Keep placement consistent across similar workflows.