Drawer

<Drawer>TailwindCSS Modules

Edge-anchored panel for filters, details, and forms. Drawers slide in from the edge of the screen and provide an overlay to block interaction with the background.

InstallationColoxo CLI
npx coloxo add drawer --style coloxo-css
ES Module ImportPlayground / npm package
import { Drawer } from '@coloxo/ui';

Design Tokens:

--cx-z-overlay: 400--cx-z-modal: 500--cx-color-bg-primary: #FFFFFF--cx-shadow-xl

Overview

A Drawer is a panel that slides out from the edge of the screen. It is typically used for navigation, filters, or displaying detailed information without losing context of the underlying page.

1. Variant Matrix

Drawer variants across different sides and sizes.

Right (default)LeftTop
Sides

2. Interactive Props Configurator

Experiment with the Drawer props in real-time.

Show Footer

Close on Backdrop Click

Visual Render Canvas
tsx
<Drawer  open={open}  onOpenChange={setOpen}  title="Filters"  description="Select categories to view."  footer={...}>  <Input label="Search..." /></Drawer>

3. Dark theme

Drawer adapts to dark environments with appropriate overlay opacities and surface elevation.

4. Enterprise layout compositions

Demonstrating hierarchy, alignment, icon pairing, and density in professional SaaS environments.

User Details
Manage role and access

Profile content placeholder

Filter Results
Refine your dataset

Filter controls

Accessibility

Focus Management

Focus is automatically trapped within the drawer while open, and restored to the trigger when closed.

ARIA Roles

The drawer is rendered as a dialog with aria-modal='true' and uses aria-labelledby for the title.

Keyboard Interaction

The Escape key closes the drawer. Tabbing cycles through focusable elements inside the drawer.

3. Component API

Comprehensive reference for the Drawer component props.

NameTypeDefaultDescription
side"left" | "right" | "top" | "bottom"rightEdge.
size"sm" | "md" | "lg"mdPanel size.