CleenUI · Overlays · Drawer

Drawer

Custom slide-out panel — configurable from any edge, with size variants and complex contextual workflows.

storybook.cleenui.com · overlays-drawer--default
Open in new window

About Drawer

Drawer slides in from an edge of the screen (top, right, bottom, or left) to show contextual content without leaving the current page. Where Modal interrupts the workflow, Drawer extends it.

The component handles nested drawers (a drawer opening another drawer) with a back-button at the top, configurable widths/heights, and resizable edges for desktop power users. The DataGrid FilterDrawer is built on this primitive.

When to use it

  • Detail panels alongside a list (record inspection).
  • Multi-step contextual workflows that benefit from a wider surface.
  • Filter and configuration panels.
  • Comment and discussion side-panels.

Common props

Prop
Type
Description
open
boolean
Controlled open state.
edge
"top" | "right" | "bottom" | "left"
Slide-in edge.
size
"sm" | "md" | "lg" | string
Width or height; supports CSS units.
resizable
boolean
Allow user to resize the drawer.
onClose
() => void
Fires on dismissal.
Cross-references

Where this component shows up elsewhere in the foundation.

In modules

2
⚡ Already in an AI editor?

Set up CleenUI in your tool.

Skip the manual import — ask your AI agent to build with this component. The Builder skill knows its props, variants, and idioms.

Claude CodeCursorWindsurfGitHub CopilotClineAider+6All 12 guides
Other categories

More component families.