# Sheet

Content that complements the page, sliding in from an edge and floating 8 px in from it.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/sheet
```

## Usage

```tsx
import { Button } from '@/components/fetaui/button'
import { Sheet } from '@/components/fetaui/sheet'

export function Example() {
  return (
    <Sheet
      trigger={<Button>Open sheet</Button>}
      title="Edit profile"
      footer={<Button shape="pill">Save changes</Button>}
    >
      {/* fields */}
    </Sheet>
  )
}
```

## API

| Prop | Type | Default |
|---|---|---|
| title | ReactNode | required |
| children | ReactNode | required |
| description | ReactNode |  |
| eyebrow | ReactNode |  |
| side | right, left, top, bottom | right |
| width | number |  |
| footer | ReactNode |  |
| onBeforeClose | (reason) => boolean |  |
| locked | boolean | false |
| trigger | ReactElement |  |
| open | boolean |  |
| onOpenChange | (open) => void |  |
| animated | boolean | true |

## When to use

- For tasks that relate to the page: editing a record, filters, navigation on small screens, sharing.

## When not to use

- For decisions that need full focus: use Dialog.
- For Mobile first flows with heights: use Drawer.

## Accessibility

- A native modal dialog labelled by the title.
- Focus moves to the title and returns to the trigger on close.
- The scrolling body is keyboard reachable.
- Return `false` from onBeforeClose to ask about unsaved changes first.

## Motion

- Slides from its edge on a 0.3 spring over 320 ms, with the scrim fading to 28%.
- The body follows 60 ms later, rising 8 px.
- Closing takes 220 ms.
- A bottom sheet follows the finger and closes past 40% or on a flick.
- With reduced motion, it fades in.