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 Vue, Ark UI uses the title as the dialog name.
Installation
Anatomy
Usage
<Sheet>
<SheetTrigger :asChild="true"><Button>Open Sheet</Button></SheetTrigger>
<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.
SheetTrigger takes asChild and merges onto the one Button inside it.
API Reference
Sheet
Sets asChild. The rest is on the Sheet page.
Button
No extra props in this demo. The rest is on the Button page.
