Sheet
Sheet
A Radix Dialog under the hood, styled to slide in from an edge instead of appearing centered — a mobile nav drawer, a filter panel, a details pane.
import { Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetFooter, SheetClose } from "@pompeitech/vesuvius-ui";From the right (default)
From the left
API
Every part matches Dialog's (same root open/onOpenChange/modal, same Trigger/Header/Title/Description/Footer/Close shape), with one addition:
SheetContent
| Prop | Type | Default | Description |
|---|---|---|---|
side | "right" | "left" | "top" | "bottom" | "right" | Which edge it slides in from. |
Plus every prop DialogContent accepts — Portal-rendered, focus-trapped, closes on Esc or outside click.
Accessibility
Same as Dialog: role="dialog" with aria-modal="true", SheetTitle required for the accessible name (give it className="sr-only" rather than omitting it if no visible title fits the design), focus trapped while open and returned to the trigger on close.