Sheet

Composition

Use this public composition when building Sheet:

Sheet
├── SheetTrigger
└── SheetContent
    ├── SheetHeader
    │   ├── SheetTitle
    │   └── SheetDescription
    ├── SheetBody      # the scrolling region
    └── SheetFooter

SheetContent carries no horizontal padding of its own — SheetHeader, SheetBody, and SheetFooter each own their inset, so the header and footer dividers span edge-to-edge without any negative-margin tricks. Put scrolling content in SheetBody; it sits between the non-scrolling header and footer, which keeps both pinned without position: sticky.

Usage

<Sheet><SheetTrigger render={<Button />}>Open</SheetTrigger><SheetContent><SheetTitle>Filters</SheetTitle></SheetContent></Sheet>

Examples

Sides

Use side to choose which edge owns the temporary workflow.

Scrolling content

Wrap the middle of the panel in SheetBody to get a single scroll region with a pinned header and footer.

With tabs

Wrap the regions in Tabs so the TabsList lives in the header and its panels scroll in SheetBody. Because each region owns its padding, the tabs sit inset and the header's full-width divider does the separating — no bleed or negative margins.

Nested sheets

Open a Sheet from inside another. The older sheet slides out to peek behind the newer one, and the nested backdrop stays light and blur-free so it remains visible. Clicking the exposed area (outside the top sheet) closes the top one.

The Sheet roots must be nested in the React tree for this visual relationship. Sibling roots are independent and do not produce the stacking effect, even if both sheets are open at the same time. Dialog and Sheet share the same nesting behavior, so a Dialog nested inside a Sheet (or vice versa) also participates.

Playground

Mix side and size to see every combination. top and bottom are always fullscreen.

Side

Size

Props

Prop/API	Type	Default	Description
`side`	`"top" \| "right" \| "bottom" \| "left"`	`"right"`	Panel edge.
`size`	`"sm" \| "md" \| "lg" \| "fullscreen"`	`"md"`	Panel size valid for the chosen side.
`showCloseButton`	`boolean`	`true`	Renders close affordance.
`nestingEffect`	`"stack" \| "none"`	`"stack"`	Enables or removes this surface's visual nesting treatment. Use `"none"` on both surfaces to keep the parent stationary and give the child its normal overlay.
`SheetBody`	`div` element	-	Scrolling region between header and footer; owns its horizontal padding.
`className`	`string`	-	Local layout or spacing overrides.
native/root props	React component props	-	Passed through to the underlying root or primitive.

Sheets nest natively — render a Sheet inside another in the React tree. The older sheet peeks out behind the newer one under a light, blur-free backdrop, and because that backdrop is real, clicking it (outside the top sheet) dismisses the top sheet. Sibling roots remain independent.

Accessibility

Preserve the documented Sheet composition so labels, triggers, content, and controls remain connected.
Provide visible labels or accessible names for interactive controls.
Preserve the component-provided focus, keyboard, disabled, and invalid-state behavior.
Do not communicate state with color alone; include text, icons, or helper copy.

Quick Preview