Drawer

A highly animated, responsive drawer component. Built entirely from scratch, with plain CSS transitions for butter-smooth entering and exiting animations — no animation library. It supports sliding in from all four screen edges (top, bottom, left, right) and safely locks the background document from scrolling while open.

The drawer is always controlled — you own open and pass onOpenChange.

Drawer

open: is required — the drawer has no uncontrolled mode.
onOpenChange: is also required, and fires on the overlay click, Escape and the close button alike.

Active Color

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

Install Drawer

npx shadcn@latest add @algorize-ui/drawer

components/custom/blocks/Drawer.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Install dependencies

Nothing beyond the shared setup — Drawer needs only the cn helper and lucide-react, which the installation guide already put in place.

Examples

Bottom sheet

Setside"bottom": for the familiar full-width mobile sheet.

Open on mount

open: being yours means you can start it true, or flip it from any effect, with no trigger element at all.

Features

Learn about the Drawer component's touch-friendly swiping gestures, snap points, and smooth slide-in animations.

Customizable

Easily adapt the component's styling and behavior to fit your application's unique design system.

Accessible

Built with accessibility in mind, ensuring all users can interact with your application effectively.

Responsive

Fully responsive design that looks and works great across desktop, tablet, and mobile devices.

Performant

Optimized for maximum performance with minimal re-renders and efficient state management.

Best Practices & Guidelines

Usage Guidelines

Follow standard design principles when implementing this component. Ensure proper contrast, spacing, and context within your layout.

Props Reference

Prop	Type	Default	Description
`open`	`boolean`	Required	Controls the visible state of the drawer. When true, the component mounts via React Portals and a CSS transition slides it into view.
`onOpenChange`	`(open: boolean) => void`	Required	Callback function to update the `open` state. Triggered by clicking the overlay, hitting the Escape key, or using the close button.
`side`	`"top" \| "bottom" \| "left" \| "right"`	`"right"`	Determines which edge of the screen the drawer slides in from, and applies the corresponding layout dimensions.