Drawer

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

Last updated: August 2, 2026

Installation

npx smoothui-cli add drawer

Features

Opens from all 4 sides: top, right, bottom, left
Controlled open and onOpenChange props
Backdrop click to dismiss
Escape key to dismiss
Focus trap within the drawer
Title and description slots
Footer slot for action buttons
Spring animation with reduced motion support

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.