---
title: Sheet
description: Extends the Dialog component to display content that complements the main content of the screen.
author:
  name: imskyleen
  url: https://github.com/imskyleen
---

<ComponentPreview name="radix-sheet-demo" />

## Installation

<ComponentInstallation name="radix-sheet" />

## Usage

```tsx
<Sheet>
  <SheetTrigger>Open Sheet</SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Title</SheetTitle>
      <SheetDescription>Description</SheetDescription>
    </SheetHeader>
    <p>Sheet Content</p>
    <SheetFooter>
      <button>Close</button>
    </SheetFooter>
  </SheetContent>
</Sheet>
```

## Props

### Radix UI

<div className="flex flex-row gap-x-3">
  <ExternalLink
    href="https://www.radix-ui.com/primitives/docs/components/dialog"
    text="Docs"
  />
  <ExternalLink
    href="https://www.radix-ui.com/primitives/docs/components/dialog#api-reference"
    text="API Reference"
  />
</div>

### Shadcn UI

<div className="flex flex-row gap-x-3">
  <ExternalLink
    href="https://ui.shadcn.com/docs/components/sheet"
    text="Docs"
  />
</div>

### Animate UI props

#### SheetContent

<TypeTable
  type={{
    transition: {
      description: 'The transition of the sheet',
      type: 'Transition',
      required: false,
      default: "{ type: 'spring', stiffness: 150, damping: 25 }",
    },
    overlay: {
      description: 'Whether to show an overlay',
      type: 'boolean',
      required: false,
      default: 'true',
    },
  }}
/>

## Credits

- We use [Radix UI](https://www.radix-ui.com/primitives/docs/components/dialog) for the sheet component.
- We take our inspiration from [Shadcn UI](https://ui.shadcn.com/docs/components/sheet) for the sheet style.