shadcn.io is an independent project built on shadcn/ui
The trigger says Open Sheet. The panel title is Sheet Title. The description says it provides additional context. Nothing sits under the header.
Start here, then add a body and actions. A Dialog is the centered version of the same header. In Solid, Ark UI uses the title as the dialog name.
Installation
Anatomy
Usage
<Sheet>
<SheetTrigger asChild={props => <Button {...props()}>Open Sheet</Button>} />
<SheetContent>
<SheetHeader>
<SheetTitle>Sheet Title</SheetTitle>
<SheetDescription>
This is a description that provides additional context about the sheet
content.
</SheetDescription>
</SheetHeader>
</SheetContent>
</Sheet>FAQ
What do the title and description say?
SheetTitle reads Sheet Title and SheetDescription reads This is a description that provides additional context about the sheet content. Both sit in SheetHeader, and nothing else is in the panel.
Why does a sheet need a SheetTitle?
SheetTitle names the dialog for assistive tech, so every sheet renders one; hide it with sr-only when the design has no visible heading. SheetDescription is optional; it's read after the title when the sheet opens.
Which edge does this sheet use?
SheetContent leaves side unset, so the panel comes from the right. Set side to top, bottom or left to move it. The title and the focus trap work the same on every edge.
How does Open Sheet open it?
The button labeled Open Sheet is the trigger, and its text is the accessible name.
asChild on SheetTrigger receives props: spread them onto the button.
API Reference
Sheet
Sets asChild and props. The rest is on the Sheet page.
Button
Sets props. The rest is on the Button page.
