Sheet

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

Installation

Nothing to add. This component ships as source in your download, so it is already in your project.

Filesrc/vui/sheet.tsx

Import from@viliha/vui-react/sheet

The exported names are at the top of that file. The import path is an alias the download's tsconfig.json points at src/vui/, so you can move that folder and change one line rather than every file that imports from it.

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-react/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

Sheet props

It takes no props of its own. Everything you pass reaches the underlying SheetPrimitive.Root primitive, so every attribute it accepts works here unchanged and nothing is invented on top.

SheetClose props

It takes no props of its own. Everything you pass reaches the underlying SheetPrimitive.Close primitive, so every attribute it accepts works here unchanged and nothing is invented on top.

SheetContent props

Plus everything React.ComponentProps<typeof SheetPrimitive.Content> accepts, passed straight through to the underlying element.

Prop	Type	Default
side?	"top" \| "right" \| "bottom" \| "left"	"right"
showCloseButton?	boolean	true

SheetDescription props

It takes no props of its own. Everything you pass reaches the underlying SheetPrimitive.Description primitive, so every attribute it accepts works here unchanged and nothing is invented on top.

SheetFooter props

It takes no props of its own. Everything you pass reaches the underlying <div> element, so every attribute it accepts works here unchanged and nothing is invented on top.

SheetHeader props

It takes no props of its own. Everything you pass reaches the underlying <div> element, so every attribute it accepts works here unchanged and nothing is invented on top.

SheetTitle props

It takes no props of its own. Everything you pass reaches the underlying SheetPrimitive.Title primitive, so every attribute it accepts works here unchanged and nothing is invented on top.

SheetTrigger props

It takes no props of its own. Everything you pass reaches the underlying SheetPrimitive.Trigger primitive, so every attribute it accepts works here unchanged and nothing is invented on top.