DocsComponents

Drawer

A sliding surface for navigation or supporting content.

Installation

Terminal

pnpm dlx shadcn@latest add https://react-toolbox.io/r/drawer.json https://react-toolbox.io/r/button.json

New here? Set up your project first. Styles, fonts, and required components are included. This example also installs Button for its trigger.

Usage

Use type="right" for a drawer entering from the right. For responsive navigation that can pin beside content, use NavDrawer from the Layout family.

Use the Code tab above for a complete example. The import follows your configured UI alias. See Theming to customize colors, spacing, and style slots.

State and callbacks

Drawer visibility is controlled by active. Close it from onOverlayClick or onEscKeyDown by updating your own state. withOverlay and insideTree change how it is presented.

delay preserves the surface while its exit animation completes; it does not automatically close an open drawer.

API reference

Generated from the installed TypeScript source. Defaults are the values declared by each function; a dash means no parameter default is declared. Forwarded props can use the receiving component’s default. Callback types show the exact arguments passed to your handler.

`Drawer`

Property	Type	Default
`active`	`boolean`	`false`
`delay`	`number`	`500`
`insideTree`	`boolean`	`false`
`type`	`'left' \| 'right'`	`'left'`
`withOverlay`	`boolean`	`true`
`classNames`	`DrawerTheme` Classes for the component's rendered parts. Applied after legacy theme overrides.	`—`
`theme`Deprecated alias	`DrawerTheme` Use classNames for style slots; use ThemeProvider for design tokens.	`—`
`ref`	`Ref<HTMLElement>`	`—`

Callbacks

Property	Type	Default
`onOverlayClick`	`MouseEventHandler<HTMLDivElement>`	`—`
`onEscKeyDown`	`(event: KeyboardEvent) => void`	`—`

Also inherits HTMLAttributes<HTMLElement>, except the omissions and overrides in its exported props type below. Use the supported native aria-*, data-*, event, and element attributes as appropriate.

Style slots

Pass a map of Tailwind classes to classNames. Available keys:

active
drawer
left
right
wrapper

theme is the deprecated compatibility alias. When both are provided, classNames wins conflicting utilities within each slot. See Theming for tokens and override rules.

Exported TypeScript types

Expand a type to inspect its full declaration, including generic constraints, union branches, callback arguments, ref handles, and inherited props. Import these types from @/components/ui/material/drawer.

DrawerTheme

tsx

type DrawerTheme = Partial<Record<'active' | 'drawer' | 'left' | 'right' | 'wrapper', string>>;

DrawerClassNames

tsx

type DrawerClassNames = DrawerTheme;

DrawerCommonProps

tsx

interface DrawerCommonProps {
  active?: boolean;
  delay?: number;
  insideTree?: boolean;
  onOverlayClick?: MouseEventHandler<HTMLDivElement>;
  onEscKeyDown?: (event: KeyboardEvent) => void;
  type?: 'left' | 'right';
  withOverlay?: boolean;
}

DrawerProps

tsx

interface DrawerProps extends HTMLAttributes<HTMLElement>, DrawerCommonProps {
  /** Classes for the component's rendered parts. Applied after legacy theme overrides. */
  classNames?: DrawerTheme;
  /** @deprecated Use classNames for style slots; use ThemeProvider for design tokens. */
  theme?: DrawerTheme;
  ref?: Ref<HTMLElement>;
}

Material guidelines

Use a temporary drawer over content on small screens and a persistent navigation surface when desktop space permits.
Navigation rows and subheaders are 48px high with 14px medium labels. Use 8px spacing around groups and dividers, and identify the current destination.

Material Design 1: Navigation drawer