Drawer

Last updated: September 20, 2026

Animated slide-out panel that opens from any side of the viewport with spring animation, backdrop dismiss, and focus trap.

Installation

npx smoothui-cli add drawer

Features

Slide-out panel from any viewport edge with backdrop dismiss, Escape to close, focus trap, and spring animation. Title, description, and footer slots for actions.

Sides

Top

Slides down from the top edge — good for notifications, filters, or compact toolbars.

Right

The default side panel — navigation, settings, or detail views that feel like they push content aside.

Bottom

Mobile-first sheets and action menus that rise from the bottom of the screen.

Left

Mirrors the right drawer for navigation rails or secondary panels on the leading edge.

Accessibility

Keyboard Interactions

Key	Description
`Escape`	Closes the drawer
`Tab`	Cycles focus through focusable elements within the drawer (focus is trapped)
`Shift + Tab`	Cycles focus backward through focusable elements within the drawer

ARIA Attributes

Attribute	Element	Purpose
`role="dialog"`	Drawer content	Identifies the element as a dialog
`aria-labelledby`	Drawer content	References the drawer title for an accessible name
`aria-describedby`	Drawer content	References the drawer description

Reduced Motion

This component respects the prefers-reduced-motion media query via useReducedMotion from Motion. When reduced motion is preferred, all slide and fade animations are disabled instantly.

Props

DrawerSide

Created by

Eduardo Calvo

Improved by

motion.dev

SmoothUI

Animated React components with smooth Motion animations. Drop-in shadcn/ui compatible.