Sheet

A panel that slides in from the edge of the screen to surface focused content or contextual actions.

Sheet

Installation

pnpm dlx stera-ui@latest add sheet

Composition

Use the following composition to build a Sheet:

Sheet
├── SheetTrigger
└── SheetPopup
    ├── SheetHeader
    │   ├── SheetTitle
    │   └── SheetDescription
    ├── SheetContent       (scrollable region)
    └── SheetFooter
        └── SheetClose

Examples

Bottom Sheet

A bottom-anchored sheet renders a drag handle automatically and dismisses on swipe-down.

Snap points

Sheet Snap Points

Pass snapPoints to make a bottom sheet snap between heights. Values can be fractions of the viewport (0–1), pixel values (>1 or "148px"), or rem strings.

Nested Sheets

Nest Sheets

Nesting works from any side. A right-anchored sheet tucks its parent toward the edge as the child slides in.

Nest Side Sheets

Indent

TodayWednesday, June 5

Inbox

Drafts

Swipe to open

Sheet Swipe Area

Add a SheetSwipeArea — an invisible, fixed strip along the screen edge — so the sheet can be opened by swiping in from that edge on touch devices. Base UI manages the gesture and the strip's touch-action; you position it (e.g. fixed inset-y-0 right-0 w-4).

API Reference

Built on Base UI's Drawer primitive — see the full API reference there.

Sheet

Prop	Type	Default
`side`	`"right" \| "left" \| "top" \| "bottom"`	`"right"`
`swipeDirection`	`"up" \| "down" \| "left" \| "right"`	derived from `side`
`snapPoints`	`(number \| string)[]`	–
`snapPoint`	`number \| string \| null`	–
`onSnapPointChange`	`(snapPoint, details) => void`	–
`open`	`boolean`	–
`onOpenChange`	`(open, details) => void`	–
`modal`	`boolean \| "trap-focus"`	`true`

SheetPopup

Prop	Type	Default
`showCloseButton`	`boolean`	`true`

SheetTrigger

Prop	Type	Description
`render`	`ReactElement`	Render prop for the trigger element

SheetClose

Prop	Type	Description
`render`	`ReactElement`	Render prop for the close element