Side-anchored panel.
import { Sheet } from "@cooud-ui/ui";
npx cooud-ui add sheet
Generated from the component's exported types.
Extends ComponentPropsWithoutRef<typeof SheetPrimitive.Content>, VariantProps<typeof sheetVariants>
| Prop | Type | Default | Description |
|---|---|---|---|
side | "top" | "right" | "bottom" | "left" | "right" | — |
A panel that slides in from any edge of the screen.
{(["top", "right", "bottom", "left"] as const).map((side) => (<Sheet key={side}><SheetTrigger asChild><Button variant="outline" className="capitalize">{side}</Button></SheetTrigger><SheetContent side={side}><SheetHeader><SheetTitle className="capitalize">{side} sheet</SheetTitle><SheetDescription>This panel slides in from the {side} edge. Press Escape or clickoutside to dismiss it.</SheetDescription></SheetHeader><div className="flex flex-col gap-2 px-4 py-2"><Label htmlFor={`note-${side}`}>Quick note</Label><Input id={`note-${side}`} placeholder="Type something…" /></div><SheetFooter><SheetClose asChild><Button>Done</Button></SheetClose></SheetFooter></SheetContent></Sheet>))}