Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Drawer examples · Bottom

Bottom Drawer with Snap Points for React

A bottom drawer that snaps to 148px, 355px or the full screen height as it's dragged.

Framework
UI library

A bottom drawer with three resting heights. snapPoints lists them, 148px for a peek, 355px for half the screen and 1 for the full height, and the drawer settles on the nearest one when people let go. Use it for maps, players and lists people glance at before opening fully.

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

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.

All 22 drawer examples