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

Edit profile

Make changes to your profile here. Click save when you're done.

Name

Username

Edit profile

Make changes to your profile here. Click save when you're done.

Name

Username

Edit profile

Make changes to your profile here. Click save when you're done.

Name

Username

Edit profile

Make changes to your profile here. Click save when you're done.

Name

Username

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