Sheet

A slide-out panel (drawer) that enters from any edge of the screen. Built on Base UI's Drawer primitive with backdrop, scroll locking, and focus trapping.

$npx shadcn add @patchui/sheet

Right (Default)

Directions

Without Close Button

Usage

import {
  Button,
  Sheet,
  SheetTrigger,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetDescription,
  SheetFooter,
} from "@patchui/react";
 
<Sheet>
  <SheetTrigger render={<Button />}>Open Sheet</SheetTrigger>
  <SheetContent side="right">
    <SheetHeader>
      <SheetTitle>Settings</SheetTitle>
      <SheetDescription>Update your preferences.</SheetDescription>
    </SheetHeader>
    <div className="p-6">{/* Content */}</div>
    <SheetFooter>
      <Button>Save</Button>
    </SheetFooter>
  </SheetContent>
</Sheet>

Props

SheetContent

Prop	Type	Default	Description
side	"right" \| "left" \| "top" \| "bottom"	"right"	Which edge of the screen the sheet slides in from.
showCloseButton	boolean	true	Whether to render an X close button in the top-right corner.
className	string	-	Additional CSS classes applied to the sheet popup.

Compound Components

Component	Description
Sheet	Root component managing open/close state. Accepts open and onOpenChange for controlled usage.
SheetTrigger	Renders the element that opens the sheet. Use render prop for polymorphism.
SheetContent	Portal-rendered panel with backdrop, scroll lock, and directional animation.
SheetHeader	Container for title and description.
SheetTitle	The sheet's heading.
SheetDescription	Secondary description text.
SheetPanel	Scrollable content area with padding.
SheetFooter	Footer area for action buttons with a top border.
SheetClose	Closes the sheet when clicked.

Notes

Directional animation: The sheet slides in from the specified side with a smooth cubic-bezier transition.
Scroll locking: Body scrolling is disabled while the sheet is open.
Width/height: Left and right sheets default to max-w-md. Top and bottom sheets span the full width.
Backdrop dismiss: Clicking the backdrop closes the sheet by default.