When to use it

Use Sheet when the page needs a panel that slides in from an edge without fully replacing the current view. It is the natural choice for cart drawers, mobile navigation menus, filter sidebars, and settings panels where visitors should still feel connected to the page behind the overlay.

If the content needs to fully interrupt the flow (confirmation, edit form, critical decision), use Dialog instead. Sheet is for persistent, browsable side-content.

Slot strategy

Sheet builds on the Dialog primitive with a side-aware layout:

• Sheet is the root. It manages open/close state and accepts open and onOpenChange for controlled usage.
• SheetTrigger is the element that opens the panel. Use asChild to render your own button.
• SheetContent is the sliding panel. It wraps itself with a portal and overlay automatically. The side prop controls which edge it slides from: right (default), left, top, or bottom.
• SheetHeader sits at the top with a bottom border and holds the title and description.
• SheetFooter sticks to the bottom using mt-auto, which makes it stay anchored regardless of body content length.
• SheetTitle renders the heading and includes an optional close button (controlled by showClose, defaults to true).
• SheetDescription provides supporting context below the title.
• SheetClose is available for additional close affordances inside the body.

Behavior and theming guidance

The panel slides in with a directional animation that matches the side prop. Opening uses a slower 500ms ease-in-out, and closing uses a faster 300ms transition, which makes the dismiss feel snappier than the reveal.

The overlay dims the background the same way Dialog does. Clicking the overlay or pressing Escape closes the sheet.

For cart drawers and similar persistent panels, use controlled state with open and onOpenChange so you can update the sheet content in response to cart mutations and close it programmatically after checkout navigation.