Bottom Sheet

Pro

A draggable sheet that rests on snap points and closes when pulled down.

Harbor St → Mill Park12 min

Customize

Snap points

Backdrop

Installation

Bottom Sheet is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy bottom-sheet.tsx into components/ui and run npm install motion.

See Pro pricing

Usage

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

<BottomSheet
  open={open}
  onOpenChange={setOpen}
  snapPoints={[0.45, 0.92]}
  title="Filters"
>
  <FilterList />
</BottomSheet>

Props

10 properties

Property	Type	Default	Description
open	boolean	—	Whether the sheet is shown.
onOpenChange	(open: boolean) => void	—	Called with false on Escape, backdrop click or a drag past the threshold.
snapPoints	number[]	[0.5, 0.92]	Resting heights as fractions of the viewport or container height.
defaultSnap	number	0	Index of the snap point the sheet opens at, from the lowest.
closeThreshold	number	0.5	How far below the lowest snap, as a fraction of its height, a release closes the sheet.
backdrop	boolean	true	Dim the page and make the sheet modal.
title	string	—	Heading in the drag area, also the accessible name.
children	ReactNode	—	Sheet content. It scrolls when taller than the sheet.
container	HTMLElement \| null	document.body	Portal target. An element keeps the sheet inside it; null waits until it exists.
className	string	—	Extra classes for the sheet panel.

Dependencies: motion