Skip to Content

Sheet

A sheet is a panel that slides in from the edge of the screen, overlaying the current content.

Size

The size prop sets the width for left and right sheets, and the height for top and bottom sheets.

Component props

NameTypeDescription
sidestring"left" | "right" | "top" | "bottom" (default: "right")
sizestring | numberWidth (left/right) or height (top/bottom) of the sheet
isOpenbooleanControlled open state
onOpenChange(open: boolean) => voidCalled when the open state changes

SheetHeader props

NameTypeDescription
titleReactNodeTitle displayed at the top of the sheet
showClosebooleanShows the close button (default: true)
childrenReactNodeAdditional content below the title