Sheet

A panel that slides in from the edge of the screen. Extends the Dialog component, ideal for forms and auxiliary content that doesn't need full-screen focus.

Sides

Use the side prop on SheetContent to control where it slides in from:

Installation

Props

PropTypeDefaultDescription
side
"top" | "right" | "bottom" | "left""right"The side the sheet slides in from.
open
booleanControlled open state.
onOpenChange
(open: boolean) => voidCallback when open state changes.