# Bottom sheet

A React component in [Beamline](https://beamline.io/)'s [Overlays](https://beamline.io/components/overlays) category, in the free sample. Live demo: https://beamline.io/components/bottom-sheet

A phone panel that rests at a peek and follows the finger to full height; a flick down closes it, and the handle works from the keyboard.

## Use it for

- Phone panels that rest at a peek and expand: filters, details, a picker.

## Not for

- Desktop side panels ([sheet](https://beamline.io/components/sheet)).
- Blocking decisions (dialog or [alert-dialog](https://beamline.io/components/alert-dialog)).

## Anatomy

- scrim
- panel
- handle (button)
- title
- description
- close
- body (scrolls)

## Variants

- **detents**: fractions of the screen height, default [0.45, 0.92]

## States

- closed
- entering
- resting at a detent
- dragging
- leaving

## Keyboard

- Escape closes
- Enter on the handle cycles heights
- ↑ ↓ on the handle move between heights (↓ at the lowest closes)
- Tab is trapped inside
- Opening autofocus preserves initialDetent. Focusing a control below the resting visible area expands the panel, independent of the entrance animation.

## Motion

Slides on the host-resolved --pui-ease-drawer over --pui-duration-considered (360 ms at foundation scale one); follows scoped speed and reduced/none. While dragged it follows the finger 1:1 and resists past the top.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` | `string` | — |  |
| `detents` | `number[]` | `[0.45, 0.92]` |  |
| `initialDetent` | `number` | `0` |  |
| `onDetentChange` | `(index) => void` | — |  |
| `trigger` | `ReactNode` | — |  |
| `open / defaultOpen / onOpenChange` | `boolean` | — |  |
| `classNames` | `typed part classes` | — | See visualContract.slots; existing handlers, accessibility and internal measurement refs are preserved. |
| `style` | `CSSProperties` | — | Visual root inline styles. |
| `ref` | `HTMLDivElement` | — | Native visual root/control reference, composed with internal refs when present. |

## Dependencies

`@radix-ui/react-dialog`, `motion`, `lucide-react`

## Import

```tsx
import { BottomSheet } from "@/components/bottom-sheet/bottom-sheet";
```

## Get it

Bottom sheet is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Bottom sheet is in the free sample, which costs nothing. [Get Beamline](https://beamline.io/checkout?pack=complete) · [Connect your agent](https://beamline.io/connect)

## More in Overlays

- [Alert Dialog](https://beamline.io/components/alert-dialog): A blocking confirmation that must be answered: the scrim does not dismiss it, focus starts on the safe choice, and an async action keeps it open until…
- [Command menu](https://beamline.io/components/command-menu): Search-first list of every action: ranked matching, groups, keycap shortcuts and nested pages; inline as CommandPalette or in a ⌘K dialog as CommandMenu.
- [Context menu](https://beamline.io/components/context-menu): Actions for an object on right-click, long-press, Shift+F10 or the menu key, opened at the pointer, with the same rows as the dropdown menu.
- [Dialog](https://beamline.io/components/dialog): A focused task over the page (create, invite, rename) with a title, body and footer; focus moves in, is trapped and returns on close.
- [Dropdown menu](https://beamline.io/components/dropdown-menu): A list of actions behind a trigger, with shortcuts, check items, headings and submenus; one highlight glides under the pointer and jumps with the keyboard.
- [Hover card](https://beamline.io/components/hover-card): A preview of a person, link or record on hover or keyboard focus, without leaving the page; HoverCardProfile is the standard person preview.
- [Popover](https://beamline.io/components/popover): A small surface anchored to a trigger for a short form, a filter or an explanation; focus moves in and returns on close.
- [Sheet](https://beamline.io/components/sheet): A panel that slides in from an edge with the page still visible behind it: header and footer stay put while the body scrolls.
- [Toast](https://beamline.io/components/toast): Short results of an action stacked at an edge: point at the stack to fan it out and pause the timers; undo or retry in place; Alt+T, Escape and a swipe…
- [Tooltip](https://beamline.io/components/tooltip): Short supporting text for a control: opens after a moment on hover and at once on keyboard focus; inside a toolbar group the next one opens instantly.