# Side Sheet

Side panel for tablets that grows out of the row you tapped or follows your finger in from the edge, as the screen behind shifts and dims. Drag its edge to choose one of three widths, or swipe it away.

> Composed · Pro · Overlays — React Native, Expo Go incompatible (dev build required).

## Install

```bash
npx @lumioui/cli add pro/side-sheet
```

## Import

```tsx
import { SideSheetScene, SideSheet } from "@/components/ui/side-sheet/side-sheet";
```

## Props

### SideSheet

| Prop | Type | Notes |
| --- | --- | --- |
| `open` | `boolean` | — |
| `onOpenChange` | `(open: boolean) => void` | — |
| `origin?` | `SideSheetOrigin | null` | The touched element's window frame (e.g. from `measureInWindow`). |
| `width?` | `number` | Fixed width in pt — turns resizing off. |
| `widths?` | `{ compact: number` | Detent widths in pt. Default compact 320 · regular 400 · wide 520  (each capped to leave the page a strip beside the panel). |
| `regular` | `number` | — |
| `wide` | `number }` | — |
| `detent?` | `SideSheetDetent` | Controlled width detent. |
| `defaultDetent?` | `SideSheetDetent` | Uncontrolled starting detent. Default "regular". |
| `onDetentChange?` | `(detent: SideSheetDetent) => void` | — |
| `resizable?` | `boolean` | Drag the leading edge to resize. Default true (tablet widths only). |
| `edgeSwipe?` | `boolean` | Swipe in from the right edge of the surrounding `SideSheetScene`. Default true. |
| `phoneBreakpoint?` | `number` | Below this window width the panel is a full-width phone sheet. Default 600. |
| `children?` | `React.ReactNode` | — |
| `className?` | `string` | — |

### SideSheetScene

| Prop | Type | Notes |
| --- | --- | --- |
| `className?` | `string` | — |
| `parallax?` | `number` | Share of the panel's width the scene shifts left by. Default 0.16. |

Source: https://lumioui.com/components/side-sheet