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