# Sheet animation (/docs/components/sheet)




## What it fixes [#what-it-fixes]

A stock sheet slides over a page that doesn't react, so the two look flat against each other. With `slide-sink`, the page behind scales to 0.975, dims slightly and rounds its corners while the sheet arrives. Now the sheet reads as on top. When it closes, the page comes forward again.

The part of the page that steps back is the top-level element in `<body>` that holds the button you pressed. A sheet opened from inside another sheet doesn't sink the page twice.

## Install [#install]

```bash
npx shadcn add sheet
```

## Choose a cut [#choose-a-cut]

```tsx
<Cuts sheet="slide" />
<SheetContent data-cut="fade" />
```

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `sheet (on <Cuts>)` | `"slide-sink" \| "slide" \| "fade" \| "none"` | `"slide-sink"` | The cut for every sheet. |
| `data-cut (on SheetContent)` | `"slide-sink" \| "slide" \| "fade" \| "none"` |  | The cut for this sheet. |
| `data-cut-pace` | `number` |  | Duration multiplier. |

| Cut          | Opening                                            | Closing                      |
| ------------ | -------------------------------------------------- | ---------------------------- |
| `slide-sink` | from its edge over 460 ms, and the page steps back | 260 ms, and the page returns |
| `slide`      | the same, without the page stepping back           | same                         |
| `fade`       | opacity only, 200 ms                               | 150 ms                       |


## Questions

### Can the page stay still behind the sheet?

Yes. Use `<Cuts sheet="slide" />`: the sheet slides in from its edge without the page stepping back.