Sheet
A slide-in panel with a Y2K window title bar. Animates from any edge of the screen.
sheet-demo.app
Installation
terminal.sh
npx y2kui@latest add sheetUsage
import {
Sheet,
SheetContent,
SheetDescription,
SheetHeader,
SheetTitle,
SheetTrigger,
} from "@/components/ui/sheet";
<Sheet>
<SheetTrigger asChild>
<Button>Open</Button>
</SheetTrigger>
<SheetContent side="right" title="panel.app">
<SheetHeader>
<SheetTitle>Panel Title</SheetTitle>
<SheetDescription>Panel description here.</SheetDescription>
</SheetHeader>
{/* Content */}
</SheetContent>
</Sheet>;Props
| Prop | Type | Default | Description |
|---|---|---|---|
side | 'top' | 'bottom' | 'left' | 'right' | 'right' | Which edge the sheet slides in from. |
title | ReactNode | — | Title shown in the window chrome title bar. |
open | boolean | — | Controlled open state. |
onOpenChange | (open: boolean) => void | — | Callback when open state changes. |