Skip to main content

Drawer

Side panel overlay with Escape to close and slide animation. Pair with registry Button or IconButton triggers (same theme + mode).

Trigger: label (Button)

Openers use registry Button with the same theme and mode as the drawer — not plain HTML buttons.

Trigger: icon only (IconButton)

Trigger: icon + label (Button)

Trigger button variants

Side: left (navigation)

Side: right (default)

Animation variants

enterAnimationVariant — open and close each panel to compare fluid spring motion (default, spring, zoom) vs legacy ease presets.

API

PropRequiredTypeDefaultDescription
themeOptionalSiteThemeatelierVisual theme.
modeOptional"light" | "dark"lightColor mode for panel tokens.
open / onCloseOptionalboolean + callbackControlled visibility.
sideOptional"left" | "right"rightSlide-in edge.
title / descriptionOptionalstringDialog labeling.
footerOptionalReactNodeSticky action row — use themed Button components.
enterAnimationVariantOptionalEnterAnimationVariantdefaultPanel enter/exit — default and spring use fluid spring physics (Animate UI–style); zoom is a stronger pop; subtle keeps legacy ease motion; fade, slide-*, scale, or none.