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<typeof SheetPrimitive.Root>`	-	All Radix Dialog root props

SheetContent

Prop	Type	Default	Description
`side`	`'top' \| 'right' \| 'bottom' \| 'left'`	`'right'`	Which edge to slide from
...Radix props	`ComponentProps<typeof SheetPrimitive.Content>`	-	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>