ComponentsNew
Motion Drawer
A side panel springs in while the menu button glides into it. Drag the panel away, tap the backdrop or press the cross to close it.
Customize
backgroundColor
accentColor
Based on Motion Drawer (MIT license) · Terms of use
More in Pro
View allProps
15 properties| Property | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | Panel content, for example a menu. |
| width | number | 280 | Panel width in pixels. |
| direction | 'left' | 'right' | "left" | Which side the panel slides in from. |
| buttonOpeningVariants | 'merge' | 'push' | 'stay' | "merge" | How the menu button leaves: merges into the panel, rides away with it or fades in place. |
| enableDrag | boolean | true | The panel can be dragged away to close it. |
| dragThreshold | number | 0.3 | Share of the width you must drag for the panel to close. |
| backgroundColor | string | "#111111" | Panel color. |
| accentColor | string | "#ffffff" | Colour of the menu icon and the drawer edge line. |
| overlayColor | string | "rgba(0, 0, 0, 0.55)" | Color of the backdrop behind the panel. |
| contained | boolean | false | Panel and button sit inside the nearest positioned parent instead of the whole viewport. |
| isOpen | boolean | — | Controlled state: whether the panel is open. |
| onToggle | (isOpen: boolean) => void | — | Called on open and close. |
| showToggleButton | boolean | true | Show the menu button and the close cross. |
| animationConfig | { type?, damping?, stiffness?, duration? } | — | Spring settings of the slide. |
| className | string | — | Extra classes. |
Dependencies
4 required packages
npm install motion lucide-react clsx tailwind-merge