shadcn.io is an independent project built on shadcn/ui
Open Sheet is the trigger. The panel is titled Top Sheet. Its description says it slides down from the top of the screen.
Use the top edge for a search bar or a notice that reads downward. A Popover is lighter for a hint tied to one control. In Svelte, Ark UI still traps focus on this edge too.
Installation
Anatomy
Usage
<Sheet><SheetTrigger>{#snippet asChild(props)}<Button {...props()}>Open Sheet</Button>{/snippet}</SheetTrigger><SheetContent side="top"><SheetHeader><SheetTitle>Top Sheet</SheetTitle><SheetDescription>This sheet slides down from the top of the screen.</SheetDescription></SheetHeader></SheetContent></Sheet>FAQ
How do I open the sheet from the top?
Set side="top" on SheetContent. Leave it out and the sheet opens from the right. It takes top, right, bottom or left.
How tall is the top sheet?
A top sheet spans the full width and is as tall as its content, here just SheetHeader. Cap a long one with a class such as data-[side=top]:max-h-[50vh] and let its body scroll.
What does the top sheet announce?
SheetTitle names the dialog for assistive tech, so every sheet renders one; hide it with sr-only when the design has no visible heading. Here it reads Top Sheet, and SheetDescription reads This sheet slides down from the top of the screen.
How is Open Sheet connected?
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 side="top". The rest is on the Sheet page.
Button
Sets props. The rest is on the Button page.
