Sheet

Use Sheet when the current page still provides useful context while a secondary task is open. Choose the side from the surrounding layout rather than from the task type alone.

When to use

Mobile navigation
Filter panels for a list
View or edit an item with part of the list visible for reference

Use Dialog for a short confirmation in the center of the page.

Usage

Sides

Use right for item details and filters in left-to-right layouts. Use left when the sheet replaces left-side navigation. Reserve top and bottom for compact content that does not need the full viewport height.

Sides

API Reference

Prop	Type	Default	Description
`side`	`"top" \| "right" \| "bottom" \| "left"`	`"right"`	Edge the panel slides from. Set on SheetContent.
`closeButtonVisible`	`boolean`	`true`	Show the close button on SheetContent. Set to false if another close control is provided.
`asChild`	`boolean`	`false`	On SheetTrigger and SheetClose. Requires a button child.
`open`	`boolean`	—	Controlled open state on Sheet.
`onOpenChange`	`(open: boolean) => void`	—	Called when the sheet opens or closes.

Notes

Default side is right.
Setting closeButtonVisible={false} hides the built-in close button. Provide another close control in that case.
As with Dialog, a trigger using asChild needs a <button> or Button child.

Glass appearance

Set appearance="glass" on SheetContent when the underlying page should remain visible. See Liquid glass for setup and browser fallbacks.