What should reduced motion do for Drawer?

Simplify or remove sliding travel, elastic overshoot, swipe tilt, staggered entrances, and background scaling while keeping content and controls immediately available.

Drawer Component

An animated drawer with edge-based entrances, swipe-to-dismiss gestures, elastic movement, and staggered content transitions.

@base-ui/reactclass-variance-authoritymotiontailwind-merge

Tune the Real Props

Themespotify

Colour palette, drawer included. Its primary colour fills the main button and the hover fill.

Modedark

Light or dark version of the palette. Starts dark.

Sidebottom

Which edge of the screen the drawer slides in from.

Opens withslide

How the drawer arrives: slides in or fades in.

Duration

How long the open animation takes, in seconds.

Bounce

How much the drawer overshoots and settles. 0 is no bounce.

Stagger

Delay between each piece of drawer content appearing, in seconds.

Overview

Drawer reveals a panel from the screen edge instead of opening a new page or a centred dialog, so users always know where it came from. It can slide in with elastic settling or fade in, with its content following in a staggered fade.

Theme and Interaction Customisation

Choose side or bottom placement, a swipe handle, and an optional shrink-and-round effect on the page behind. Interaction settings include slide or fade opening, Elastic, Duration, Bounce, Stagger, and Tilt on swipe.

Example Production Use Case

A coffee store can open a bottom drawer to choose a roast profile. It slides up with a light elastic settle, options fade in one by one, and the product page shrinks slightly behind it.

A SaaS dashboard can use a side drawer for account settings, letting users adjust preferences while their workspace stays visible and closes with a clear button or Escape.

A mobile checkout can use a swipeable bottom drawer for delivery options, with a visible handle and a gentle tilt as users drag it down to dismiss.

Best Used For

Ecommerce product configuration.
SaaS account settings.
Shopping and checkout workflows.
Productivity applications.
Content management systems.
Interactive product interfaces.

Not For

A task that fits a simple inline control doesn’t need a drawer, and long multi-page workflows belong on their own page.

Avoid it when users must compare drawer content with what the panel covers, or when critical confirmations need an explicit decision rather than a swipe.

Performance Budget

Use transforms for sliding and tilt, keep gesture tracking local to the drawer, and avoid page-wide layout work on each pointer move. Keep elastic movement and stagger restrained, and sync the background shrink with the drawer.

Accessibility and Mobile

Use dialog semantics for modal drawers, with an accessible name, focus moved inside, an inert background, and focus restored on close, or region semantics for non-modal panels. Always provide a close button and Escape, not just swipe. On mobile, fit the viewport and keyboard and keep scrolling from triggering dismissal. With reduced motion, remove travel, overshoot, tilt, and background scaling.

Common Mistakes

Treating every drawer as a modal.
Making swipe the only way to dismiss.
Applying Bounce to fade entrances.
Making content appear too late.
Confusing scrolling with dismissal.
Assuming the background shrinks automatically.
Overusing tilt and bounce.

Changelog

v1.0.0

Oct 23, 2026

Initial release

API Reference

Prop	Type	Default	Description
`theme`	string	`spotify`	Colour palette, drawer included. Its primary colour fills the main button and the hover fill.
`mode`	string	`dark`	Light or dark version of the palette. Starts dark.
`rollingText`	boolean	`true`	The trigger and button labels roll to a second copy on hover.
`fillOnHover`	boolean	`false`	Buttons fill with colour from the edge on hover.
`side`	string	`bottom`	Which edge of the screen the drawer slides in from.
`showSwipeHandle`	boolean	`true`	Shows a handle you can grab to swipe the drawer away.
`openAnimation`	string	`slide`	How the drawer arrives: slides in or fades in.
`elastic`	boolean	`true`	The drawer springs in with a slight overshoot.
`duration`	number	`0.5`	How long the open animation takes, in seconds.
`bounce`	number	`0.2`	How much the drawer overshoots and settles. 0 is no bounce.
`stagger`	number	`0.04`	Delay between each piece of drawer content appearing, in seconds.
`tiltOnSwipe`	boolean	`false`	The drawer tilts slightly as you swipe it.
`scaleBackground`	boolean	`true`	The page behind shrinks a little while the drawer is open.

Questions, Answered.

What is Drawer?

Drawer is an animated React component that opens a panel from the screen edge, with sliding or fading entrances, elastic movement, swipe dismissal, staggered content, and optional background scaling.

Does Drawer support swipe-to-dismiss?

Yes. Users drag it back toward its opening edge to close it, following the configured placement.

Does Drawer support content scrolling?

It can contain scrolling content, but verify scroll and gesture handling in the shipped implementation so scrolling never dismisses the panel.

Does Drawer automatically save changes when it closes?

No. Saving preferences, submitting forms, and updating records need separate application logic.

Is Drawer accessible?

It can be, with correct panel semantics, labels, keyboard-operable dismissal, predictable focus, and correct background interaction.

Can Drawer be used on mobile?

Yes. It needs suitable touch targets, viewport-aware sizing, and scrolling that doesn’t conflict with swipe dismissal.

View MoreView More

Request a Custom Animation

Need a custom effect? Tell us what to create.