Bottom Sheet
A swipeable panel that rises from the bottom edge. Drag the knob up and down between snap points.
A swipeable panel that rises from the bottom edge. Built on the Base UI Drawer primitive via Celestia's Drawer wrapper.
Defaults: a visible drag knob, swipe-to-dismiss, and snap points at 50% and 100% so you can drag the sheet up and down. Use BottomSheet for mobile-style action panels and filters. Prefer Sheet for side panels without swipe, and Drawer when you need other edges.
tsx
import { BottomSheet, BottomSheetBody, BottomSheetClose, BottomSheetContent, BottomSheetDescription, BottomSheetFooter, BottomSheetHeader, BottomSheetTitle, BottomSheetTrigger,} from "@celestia-project/ui/primitive/bottom-sheet"import { Button } from "@celestia-project/ui/primitive/button"
<BottomSheet> <BottomSheetTrigger render={<Button variant="outline" />}> Open Bottom Sheet </BottomSheetTrigger> <BottomSheetContent> <BottomSheetHeader> <BottomSheetTitle>Share</BottomSheetTitle> <BottomSheetDescription> Drag the knob up or down — or swipe down past the lowest snap to dismiss. </BottomSheetDescription> </BottomSheetHeader> <BottomSheetBody> {/* options */} </BottomSheetBody> <BottomSheetFooter> <BottomSheetClose render={<Button variant="outline" />}> Cancel </BottomSheetClose> </BottomSheetFooter> </BottomSheetContent></BottomSheet>Snap points
By default the sheet snaps between half and full height ([0.5, 1]). Override or disable:
tsx
{/* Custom resting heights */}<BottomSheet snapPoints={[0.35, 0.7, 1]}> …</BottomSheet>
{/* Content-sized sheet — dismiss only, no up/down snaps */}<BottomSheet snapPoints={[]}> …</BottomSheet>Numbers between 0 and 1 are viewport fractions; values > 1 or strings like "148px" / "30rem" are absolute heights (Base UI Drawer snap points).
Props
| Prop | Type | Default |
|---|---|---|
showSwipeHandle (on BottomSheet) | boolean | true (shows the drag knob) |
swipeDirection (on BottomSheet) | "up" | "down" | "left" | "right" | "down" |
snapPoints (on BottomSheet) | Array<number | string> | [0.5, 1] |
defaultSnapPoint | number | string | null | first snap point |
open / onOpenChange | controlled open state | uncontrolled |
| Sub-component | Role |
|---|---|
BottomSheetTrigger | Opens the sheet |
BottomSheetContent | Portal + overlay + swipeable panel (styles the knob) |
BottomSheetKnob | Standalone pill if you turn showSwipeHandle off |
BottomSheetHeader / Title / Description | Top chrome |
BottomSheetBody | Scrollable middle section |
BottomSheetFooter | Action row pinned to the bottom |
BottomSheetClose | Dismiss control |
BottomSheetSwipeHandle | Low-level swipe hit-area (same as Drawer) |