Sheet
A panel that slides in from an edge of the screen to complement the main content, like a filter drawer or a settings panel. Built on Base UI's dialog primitive.
Last updated January 1, 1980
CreditsModifiedPublished
Copied from shadcn/ui.
- Adds logical side="start"/"end" values on top of the physical top/right/bottom/left, resolved from the ambient direction measured at the trigger — so a sheet can open from the reading-start edge in both LTR and RTL without branching on direction yourself
- Close button uses end-3 instead of right-3 so it sits in the correct corner regardless of direction
Overview
Installation
Usage
import {
Sheet,
SheetClose,
SheetContent,
SheetDescription,
SheetFooter,
SheetHeader,
SheetTitle,
SheetTrigger,
} from "@/components/ui/sheet"
export function Example() {
return (
<Sheet>
<SheetTrigger render={<Button variant="outline">Open</Button>} />
<SheetContent>
<SheetHeader>
<SheetTitle>Are you absolutely sure?</SheetTitle>
<SheetDescription>This action cannot be undone.</SheetDescription>
</SheetHeader>
</SheetContent>
</Sheet>
)
}Examples
Side
Pass side to control which edge the sheet slides in from.
RTL
Use side="start" instead of a hardcoded left/right — it opens from the right in RTL and the left in LTR automatically.
API Reference
Sheet
API reference: shadcn/ui Sheet .