gh-vuer-ai-vuer-skill-marketplace-skills-vuer-uikit/docs/components/sheet.md

• Home
• Components
• Sheet

Sheet

Extends the Dialog component to display content that complements the main content of the screen.

Props

Sheet

Prop Type Default Description ...Radix props ComponentProps - All Radix Dialog root props

SheetContent

Prop Type Default Description side 'top' | 'right' | 'bottom' | 'left' 'right' Which edge to slide from ...Radix props ComponentProps - All Radix content props

Other parts (SheetTrigger, SheetClose, SheetHeader, SheetFooter, SheetTitle, SheetDescription) are styled wrappers around Radix components.

Example

<Sheet>
  <SheetTrigger asChild>
    <Button>Open</Button>
  </SheetTrigger>
  <SheetContent side="left">
    <SheetHeader>
      <SheetTitle>Title</SheetTitle>
      <SheetDescription>Optional description</SheetDescription>
    </SheetHeader>
  </SheetContent>
</Sheet>

Usage

<Sheet>
  <SheetTrigger asChild>
    <Button variant="outline">Open</Button>
  </SheetTrigger>
  <SheetContent onOpenAutoFocus={(e) => {
    e.preventDefault();
  }}>
    <SheetHeader>
      <SheetTitle>Edit profile</SheetTitle>
      <SheetDescription>
        Make changes to your profile here. Click save when you&apos;re done.
      </SheetDescription>
    </SheetHeader>
    <div className="grid flex-1 auto-rows-min gap-4">
      <div className="grid gap-3">
        <label className="text-[12px]" htmlFor="sheet-demo-name">Name</label>
        <InputRoot id="sheet-demo-name" defaultValue="Pedro Duarte" />
      </div>
      <div className="grid gap-3">
        <label className="text-[12px]" htmlFor="sheet-demo-username">Username</label>
        <InputRoot id="sheet-demo-username" defaultValue="@peduarte" />
      </div>
    </div>
    <SheetFooter>
      <Button variant="primary">Save</Button>
      <SheetClose asChild>
        <Button variant="secondary">Close</Button>
      </SheetClose>
    </SheetFooter>
  </SheetContent>
</Sheet>