Bottom Sheet

Pro

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.

Preview

Installation

npx @lumioui/cli add pro/bottom-sheet

Usage

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

Also exported: useBottomSheet, BottomSheetContent, BottomSheetScrollView, BottomSheetScene.

API reference

BottomSheet

Prop Type Default
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].

 [320]
defaultSnap number

Detent index (into the sorted points) the sheet opens at. Default 0.

 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.

 false
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.

 true
keyboardAware boolean

Ride the software keyboard: the sheet lifts with the keyboard frame on the UI thread. Default true.

 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.

 true
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.

 "solid"
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".

 "Bottom sheet"
className string

Classes for the sheet surface.

 —
children React.ReactNode —

BottomSheetContent

Prop Type Default
className string —

BottomSheetScrollView

Prop Type Default
className string —
contentContainerClassName string —

BottomSheetScene

Prop Type Default
className string —
radius number

Corner radius of the scene at rest. Default 0 (a full screen).

 0