npm

Sheet

Sheet is a dialog that slides in from an edge of the screen (top, right, bottom, or left).

Installation

pnpm add @viliha/vui-ui

Then 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

PropTypeDefault
side"top" | "right" | "bottom" | "left""right"
showCloseButtonbooleantrue