Drawer: Snap points

Pass snapPoints to rest a bottom drawer at preset heights. Numbers from 0 to 1 are fractions of the viewport, larger numbers are pixels, and strings take px or rem. The visible part always fits its content, so nothing hides below the screen.

import { Button } from "@/components/ui/button"
import {
  Drawer,
  DrawerBody,
  DrawerContent,
  DrawerDescription,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer"

const snapPoints = ["20rem", 1]

const places = [
  "Blue Bottle Coffee",
  "Tartine Bakery",
  "Mission Dolores Park",
  "Ferry Building",
  "Golden Gate Park",
  "Lands End Trail",
  "Twin Peaks",
  "Coit Tower",
  "Alamo Square",
  "Baker Beach",
  "Crissy Field",
  "Japanese Tea Garden",
]

export function DrawerSnapPoints() {
  return (
    <Drawer snapPoints={snapPoints}>
      <DrawerTrigger render={<Button variant="outline" />}>
        Nearby places
      </DrawerTrigger>
      <DrawerContent>
        <DrawerHeader>
          <DrawerTitle>Nearby places</DrawerTitle>
          <DrawerDescription>
            Drag up to see the full list, or down to close.
          </DrawerDescription>
        </DrawerHeader>
        <DrawerBody>
          <ul className="flex flex-col divide-y">
            {places.map((place) => (
              <li key={place} className="py-3 text-sm">
                {place}
              </li>
            ))}
          </ul>
        </DrawerBody>
      </DrawerContent>
    </Drawer>
  )
}

Add this example

This adds the example as components/examples/drawer/snap-points.tsx, together with the Drawer component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/drawer-snap-points.json

To add only the component, follow the Drawer installation.

Props in this example

The Drawer props this example sets, from the API reference.

Drawer

Prop	Type	Default
`snapPoints`Heights a vertical drawer can rest at. 0–1 is a fraction of the viewport, >1 is pixels, strings take px or rem.	`(number \| string)[]`	`–`

DrawerTrigger

Prop	Type	Default
`render`	`ReactElement \| (props, state) => ReactElement`	`<button>`

Every prop is in the Drawer API reference.

More Drawer examples

See them all, with keyboard support and accessibility notes, on the Drawer page.