# Bottom Sheet

Floating bottom sheet that settles at the height your flick picks and keeps clear of the keyboard. At full height it meets the screen edges as the screen behind recedes, and lists hand the drag back.

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

## Install

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

## Import

```tsx
import { useBottomSheet, BottomSheet, BottomSheetContent, BottomSheetScrollView, BottomSheetScene } from "@/components/ui/bottom-sheet/bottom-sheet";
```

## Props

### BottomSheet

| Prop | Type | Notes |
| --- | --- | --- |
| `open` | `boolean` | Controlled open state. |
| `onOpenChange` | `(open: boolean) => void` | — |
| `snapPoints?` | `BottomSheetSnapPoint[]` | Detents — pt from the screen bottom to the sheet's top edge, or a  percentage of the screen height. Sorted ascending; anything taller than  the screen allows is capped just under the status bar, and a static  (non-scrolling) sheet never grows past its own content. Default [320]. |
| `defaultSnap?` | `number` | Detent index (into the sorted points) the sheet opens at. Default 0. |
| `snapIndex?` | `number` | Controlled detent index. When it changes while open the sheet glides  there; pair with `onSnapChange`. |
| `onSnapChange?` | `(index: number) => void` | Called with the detent index whenever the sheet comes to rest on a  different detent (drag, flick, accessibility action or `snapTo`). |
| `dragHandleOnly?` | `boolean` | Restrict dragging to the grabber. Default false — the whole surface  drags, and a `BottomSheetScrollView` inside hands the drag back and  forth with the sheet. |
| `enableDismiss?` | `boolean` | Allow pulling or flicking below the lowest detent to dismiss, and a  backdrop tap to close. Default true. When false the sheet rubber-bands  at its lowest detent instead. |
| `keyboardAware?` | `boolean` | Ride the software keyboard: the sheet lifts with the keyboard frame on  the UI thread. Default true. |
| `inset?` | `boolean` | Floating sheet: partial detents sit inset from the side and bottom  edges with every corner rounded; a detent that reaches the top of the  screen attaches to the edges, and the inset and lower corners follow  the sheet's position in between. Default true. False docks the sheet  to the bottom edge at every detent. |
| `material?` | `"solid" | "glass"` | Surface material. "solid" (default) is the opaque lifted surface,  legible in light and dark; "glass" opts into Lumio glass — use it  only when the sheet floats over photos, video or a map. |
| `snapLabels?` | `string[]` | Spoken names for the detents, lowest first (e.g. ["Peek", "Half",  "Full"]). Read as the grabber's value by screen readers. |
| `accessibilityLabel?` | `string` | Accessible name for the sheet. Default "Bottom sheet". |
| `className?` | `string` | Classes for the sheet surface. |
| `children?` | `React.ReactNode` | — |

### BottomSheetContent

| Prop | Type | Notes |
| --- | --- | --- |
| `className?` | `string` | — |

### BottomSheetScrollView

| Prop | Type | Notes |
| --- | --- | --- |
| `className?` | `string` | — |
| `contentContainerClassName?` | `string` | — |

### BottomSheetScene

| Prop | Type | Notes |
| --- | --- | --- |
| `className?` | `string` | — |
| `radius?` | `number` | Corner radius of the scene at rest. Default 0 (a full screen). |

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