A drawer that lets
the browser do the dragging.

Compose it from a few React parts, style every one with your own CSS, or hand it to your agent. The drag, the momentum and the snap points are native scroll snap, and <dialog> gives the top layer, focus trap and Escape for free.

pnpm add @drawerdeck/react
Read the docs

See the shape of it

This is @drawerdeck/react's own <Drawer.*> parts, live. Press Open, then drag or scroll between half and full. Close it with Escape, an outside press or Done.

Settings

  • Appearance
  • Notifications
  • Privacy
  • Security
  • Accounts
  • Language and region
  • Accessibility
  • Storage and data
  • Connected apps
  • Advanced
  • About

Why native scrolling

Two existing drawers drive the drag, the momentum and the snap points from JavaScript. drawerdeck's are native scroll snap instead, with <dialog> for the top layer, focus trapping and Escape.

Read why ›See the comparison ›

drawerdeck is part of deck.cool, a family of unstyled React packages that look like you and work like the browser. Meet the family ›