Bottom sheet

A React component in Beamline's Overlays category, in the free sample.

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).
Blocking decisions (dialog or 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

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 · Connect your agent