Components

Sheet

A panel that slides in from any edge of the screen to hold supplementary content, forms, or navigation without leaving the current page.

Basic usage

Compose a SheetTrigger and SheetContent. The Radix root manages open state for you — no useState required.

Set side on SheetContent to choose the edge the panel enters from. Left and right panels span the viewport height; top and bottom span its width.

SheetFooter pins itself to the bottom of the panel — ideal for a primary action paired with a SheetClose dismiss button.

Prop	Type	Default	Description
`Sheet`	Root	`—`	Stateful container. Accepts open / defaultOpen / onOpenChange for controlled or uncontrolled use.
`SheetTrigger`	Trigger	`—`	Element that toggles the sheet. Pass asChild to render your own Button instead of the default trigger.
`SheetContent`	Content	`—`	The sliding panel. Renders inside a portal over a dimmed overlay and includes a built-in close button.
`side`	'top' \| 'right' \| 'bottom' \| 'left'	`'right'`	Edge the panel slides in from. Set on SheetContent.
`SheetHeader`	div	`—`	Top region for the title and description.
`SheetTitle`	Title	`—`	Accessible label for the panel. Required for screen-reader announcements.
`SheetDescription`	Description	`—`	Supporting text linked to the panel via aria-describedby.
`SheetFooter`	div	`—`	Bottom region pinned to the base of the panel for actions.
`SheetClose`	Close	`—`	Dismisses the sheet. Use asChild to wrap a custom Button.
`className`	string	`—`	Additional Tailwind classes merged onto any sub-component.

Built on Radix Dialog: the panel is a modal role="dialog" with focus trapped inside while open and restored to the trigger on close.
Always include a SheetTitle — it provides the aria-labelledby name announced to screen readers; SheetDescription wires up aria-describedby.
Pressing Esc or clicking the dimmed overlay closes the sheet; the built-in close button carries a visually hidden "Close" label.
Content outside the open panel is inert and hidden from assistive technology, keeping keyboard navigation scoped to the sheet.