Sheet

Side-sliding panel overlay via Radix UI Dialog

Right

Usage

import { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription } from '@tryvienna/ui'

<Sheet>
  <SheetTrigger asChild>
    <Button variant="outline">Open Sheet</Button>
  </SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Edit Profile</SheetTitle>
      <SheetDescription>Make changes to your profile.</SheetDescription>
    </SheetHeader>
    <div className="grid gap-4 py-4">
      <div className="grid gap-2">
        <Label htmlFor="sheet-name">Name</Label>
        <Input id="sheet-name" defaultValue="Will" />
      </div>
    </div>
    <SheetFooter>
      <Button>Save</Button>
    </SheetFooter>
  </SheetContent>
</Sheet>

Examples

Right

Right

<Sheet>
  <SheetTrigger asChild>
    <Button variant="outline">Open Sheet</Button>
  </SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Edit Profile</SheetTitle>
      <SheetDescription>Make changes to your profile.</SheetDescription>
    </SheetHeader>
    <div className="grid gap-4 py-4">
      <div className="grid gap-2">
        <Label htmlFor="sheet-name">Name</Label>
        <Input id="sheet-name" defaultValue="Will" />
      </div>
    </div>
    <SheetFooter>
      <Button>Save</Button>
    </SheetFooter>
  </SheetContent>
</Sheet>

Left

Left

<Sheet>
  <SheetTrigger asChild>
    <Button variant="outline">Open Left</Button>
  </SheetTrigger>
  <SheetContent side="left">
    <SheetHeader>
      <SheetTitle>Navigation</SheetTitle>
      <SheetDescription>Browse menu items.</SheetDescription>
    </SheetHeader>
    <nav className="grid gap-2 py-4">
      <a href="#" className="text-sm hover:underline">
        Home
      </a>
      <a href="#" className="text-sm hover:underline">
        Settings
      </a>
      <a href="#" className="text-sm hover:underline">
        Profile
      </a>
    </nav>
  </SheetContent>
</Sheet>

Variants

Name	Options	Default
side	top | bottom | left | right	right

API Reference

Sheet

Also accepts all props from SheetPrimitive.Root.

SheetTrigger

Also accepts all props from SheetPrimitive.Trigger.

SheetClose

Also accepts all props from SheetPrimitive.Close.

SheetContent

Prop	Type	Default	Description
side	"top" | "bottom" | "left" | "right" | null	right
showCloseButton	boolean	true

Also accepts all props from SheetPrimitive.Content.

SheetHeader

Also accepts all props from div.

SheetFooter

Also accepts all props from div.

SheetTitle

Also accepts all props from SheetPrimitive.Title.

SheetDescription

Also accepts all props from SheetPrimitive.Description.

Data Attributes

Component	data-slot
Sheet	"sheet-content"
SheetTrigger	"sheet-trigger"
SheetClose	"sheet-close"
SheetContent	"sheet-content"
SheetHeader	"sheet-header"
SheetFooter	"sheet-footer"
SheetTitle	"sheet-title"
SheetDescription	"sheet-description"