Overlays and menus
Sheet
A modal edge panel with Base UI focus management and animated entry and exit.
⠋
Install
npx shadcn@latest add https://4af.selfsimilar.dev/r/sheet.jsonUsage
import {
Sheet,
SheetContent,
SheetTitle,
SheetTrigger,
} from "@/components/ui/sheet";
<Sheet>
<SheetTrigger>Open sheet</SheetTrigger>
<SheetContent>
<SheetTitle>Edit project</SheetTitle>
Project settings
</SheetContent>
</Sheet>API
Main exports: Sheet and its trigger, close, content, header, body, footer, title, and
description parts
A focus-trapped Base UI dialog that enters from an edge.
After the exit
SheetContent takes onExitComplete, called once the exit animation has finished and the
panel has left the DOM. Use it when the host can only mount or unmount the sheet, for example
when the sheet is driven by a store: close the sheet first, then clear the host's state in the
callback, so the exit animation isn't cut short.
<SheetContent onExitComplete={() => store.clear()}>