A slide-out panel component built on Radix UI Dialog primitives, providing accessible sheet/drawer UI with animated entry and exit from any screen edge. ## Key Components | Export | Description | |---|---| | `Sheet` | Root component wrapping Radix UI Dialog | | `SheetTrigger` | Button/element that opens the sheet | | `SheetClose` | Element that closes the sheet | | `SheetPortal` | Renders sheet content outside the DOM hierarchy | | `SheetOverlay` | Dimmed backdrop rendered behind the sheet | | `SheetContent` | Main panel container; accepts `side` variant (`top`, `bottom`, `left`, `right`) | | `SheetHeader` | Layout wrapper for title and description at the top | | `SheetFooter` | Layout wrapper for action buttons at the bottom | | `SheetTitle` | Accessible title styled with `text-h3` | | `SheetDescription` | Accessible description styled with `text-h6 text-muted-foreground` | **Variants (`sheetVariants`):** `side` — `top` | `bottom` | `left` | `right` (default: `right`) ## Usage Example ```typescript import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetFooter, SheetTrigger, } from "@/components/ui/sheet" import { Button } from "@/components/ui/button" export function SettingsSheet() { return ( Open Settings Settings Manage your preferences here. {/* content */} Save Changes ) } ``` > **Source:** [`sheet.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/sheet.tsx) — Requires Radix UI (`@radix-ui/react-dialog`), `class-variance-authority`, and `lucide-react`.