Sheet

A panel that slides in from an edge of the screen and keeps the page behind it in view — settings, a record's detail, a filter set.

tsx

1import {
2  Sheet,
3  SheetTrigger,
4  SheetContent,
5  SheetHeader,
6  SheetTitle,
7  SheetDescription,
8  SheetFooter,
9  SheetClose,
10} from "@pestoui/core"

Settings panel

Header and footer bring their own padding; the body between them is yours to lay out. The footer sticks to the bottom edge.

Sides

side picks the edge. Left and right are full-height columns; top and bottom span the width and size to their content.

Props

Prop	Type	Default	Description
open / defaultOpen / onOpenChange	boolean / boolean / (open: boolean) => void	—	On Sheet. Controlled or uncontrolled open state.
side	"top" \| "right" \| "bottom" \| "left"	"right"	On SheetContent. The edge the panel slides in from.
showCloseButton	boolean	true	On SheetContent. Renders the × in the top corner. Turn it off only when the footer carries a SheetClose.
asChild	boolean	—	On SheetTrigger and SheetClose. Hands the behaviour to the child element.

PreviousShare Panel Next Sidebar Blocks

Pesto UI · 117 documented components