Installation
pnpm add @viliha/vui-uiThen import from @viliha/vui-ui/sheet.
Usage
Set side to slide in from any edge. Sheet extends the Dialog primitive.
sheet-demo.tsx
import {
Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle,
SheetDescription, SheetFooter, SheetClose,
} from "@viliha/vui-ui/sheet";
export function Example() {
return (
<Sheet>
<SheetTrigger asChild>
<Button variant="outline">Open</Button>
</SheetTrigger>
<SheetContent side="right">
<SheetHeader>
<SheetTitle>Edit profile</SheetTitle>
<SheetDescription>Make changes and save.</SheetDescription>
</SheetHeader>
</SheetContent>
</Sheet>
);
}API Reference
| Prop | Type | Default |
|---|---|---|
| side | "top" | "right" | "bottom" | "left" | "right" |
| showCloseButton | boolean | true |