Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Bottom Drawer with Snap Points for React

A bottom drawer that lists snap heights of 148px, 355px, and full screen, and settles on the nearest.

Snap Points Drawer lists 148px for a quick preview, 355px for half the screen, and 100% for a full view, with Close. The copy says a drag settles on the nearest height.

Use it for a map or a player people peek at before opening fully. One fixed height can be a plain Drawer. In React, Base UI stops at the heights you pass in.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Drawer anatomy: grabber, title, description, content, close

Usage

<Drawer showSwipeHandle snapPoints={SNAP_POINTS}>
  <DrawerTrigger render={<Button variant="outline" />}>
    Open with Snap Points
  </DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Snap Points Drawer</DrawerTitle>
      <DrawerDescription>
        Drag to snap to 148px, 355px, or 100% of screen height.
      </DrawerDescription>
    </DrawerHeader>
    <div className="flex flex-col gap-4 p-4">
      <p className="text-muted-foreground text-sm">
        This drawer has three snap points. Try dragging it to different
        heights and it will snap to the nearest point.
      </p>
      <ul className="flex list-inside list-disc flex-col gap-2 text-sm">
        <li>148px - Quick preview</li>
        <li>355px - Half screen</li>
        <li>100% - Full view</li>
      </ul>
    </div>
    <DrawerFooter>
      <DrawerClose render={<Button variant="outline" />}>Close</DrawerClose>
    </DrawerFooter>
  </DrawerContent>
</Drawer>

FAQ

How are the snap points set?

snapPoints on Drawer takes ["148px", "355px", 1]. A string with a unit is a height; a number from 0 to 1 is a fraction of the screen, so 1 is the full height.

Which snap point does it open at?

The first one, 148px. Set defaultSnapPoint on Drawer to open at another, or control it with snapPoint.

How do people move between snap points?

By dragging the bar or the panel. On release the drawer settles on a point. Swiping down from the lowest point closes it.

What happens to content that doesn't fit?

At a low snap point the rest of the drawer sits below the screen edge. Put the most useful part at the top, and let the body scroll once the drawer is fully open.

How do people close it?

With Close, a DrawerClose in the footer, by swiping down from the lowest point, or with Escape. The Button goes in the render prop of DrawerClose.

How does the trigger open the drawer?

An outline button opens the drawer. Its text, Open with Snap Points, is the accessible name. The Button goes in the render prop of DrawerTrigger.

API Reference

Drawer

Sets showSwipeHandle and snapPoints={SNAP_POINTS}. The rest is on the Drawer page.

Button

Sets variant="outline". The rest is on the Button page.

All 22 drawer examples