Overlay
Sheet
Side-anchored panel (left, right, top, or bottom). Useful for settings and detail drawers.
Install
pnpm add @codefast/ui
Import path
@codefast/ui/sheet
Examples
Anatomy
How the parts compose. Copy this skeleton and fill in the slots.
import {
Sheet, SheetTrigger, SheetContent,
SheetHeader, SheetTitle, SheetDescription,
SheetBody, SheetFooter, SheetClose,
} from "@codefast/ui/sheet";
<Sheet>
<SheetTrigger asChild>…</SheetTrigger>
<SheetContent side="right">
<SheetHeader><SheetTitle>…</SheetTitle></SheetHeader>
<SheetBody>…</SheetBody>
<SheetFooter><SheetClose>…</SheetClose></SheetFooter>
</SheetContent>
</Sheet>
API reference
Props for each part of the component. All native element props are also forwarded.
Sheet
Root. Manages open state (a Dialog under the hood).
| Prop | Type | Default | Description |
|---|---|---|---|
| open / onOpenChange | boolean / (open: boolean) => void | — | Control visibility from your own state. |
| defaultOpen | boolean | false | Open on mount when uncontrolled. |
SheetContent
| Prop | Type | Default | Description |
|---|---|---|---|
| side | "top" | "right" | "bottom" | "left" | "right" | Which edge the panel slides in from. |
Accessibility
Built to be keyboard-navigable and screen-reader friendly out of the box.
| Key | Function |
|---|---|
| Space | Opens the sheet when the trigger is focused. |
| Tab | Cycles focus within the sheet (focus is trapped). |
| Esc | Closes the sheet and restores focus to the trigger. |
- A Sheet is a Dialog: focus is trapped and the background is inert while open.
- Always provide a SheetTitle so the panel has an accessible name.
- Use a Sheet for side tasks; use a Drawer (Vaul) for mobile bottom-sheet gestures.
Guidelines
Conventions that keep usage consistent across an app.
Do
- Use for secondary tasks — filters, details, quick edits.
- Anchor navigation sheets to the left, content/detail sheets to the right.
Don’t
- Don’t put a multi-step primary flow in a sheet — use a page.
- Don’t stack a sheet over a dialog.