Brand logoentauri

Add this component

npx zentauri-ui add drawer

Accessibility notes

Overlay patterns include focus, dismissal, and semantic roles where the component owns interaction. Verify trigger labels and escape behavior in your flow.

Dependency notes

Static imports do not pull framer-motion. Use the animated entry only when you want motion and have framer-motion installed.

Overlay

Drawer for slide-over workflows

Slide-over drawers keep users in context while exposing secondary tasks—filters, record details, or multi-step forms. Built for React apps and Next.js layouts that already use portals for modals.

Examples

Bottom drawer for mobile-friendly sheets.

Drawer variants playground

Pick a side, size, and appearance to preview the drawer live. Toggle Show output / Show code and the snippet updates to match the selected variant.

All appearances

Every shipped appearance token at a glance. Click any swatch to load it into the playground above.

Drawer API

Generated from the package prop types and variant definitions.

Drawer

DrawerProps

State

PropTypeDefault
defaultOpenboolean | undefinednone
onOpenChange((open: boolean) => void) | undefinednone
openboolean | undefinednone

Content

PropTypeDefault
childrenReactNodenone

DrawerContent

DrawerContentProps

Variants

PropTypeDefault
appearance
amberaquabluecrimsoncyandefaultelectricemeraldforestglassgradient-bluegradient-green+32
default
side
bottomleftrighttop
right
size
fulllgmdsmxl
md

Content

PropTypeDefault
childrenReactNodenone
Inherited HTML props
PropTypeDefault
classNamestring | undefinednone
idstring | undefinednone
styleCSSProperties | undefinednone

DrawerContentVariant

DrawerContentVariantProps

Behavior

PropTypeDefault
appearance'default' | 'blue' | 'cyan' | 'green' | 'lime' | 'mint' | 'ocean' | 'sapphire' | 'lavender' | 'ruby' | 'red' | 'slate' | 'zinc' | 'stone' | 'royal' | 'electric' | 'forest' | 'sunset' | 'magenta' | 'crimson' | 'aqua' | 'plum' | 'sky' | 'rose' | 'purple' | 'pink' | 'orange' | 'yellow' | 'teal' | 'indigo' | 'emerald' | 'gradient-blue' | 'gradient-green' | 'gradient-red' | 'gradient-yellow' | 'gradient-purple' | 'gradient-teal' | 'gradient-indigo' | 'gradient-pink' | 'gradient-orange' | 'gray' | 'violet' | 'glass' | 'amber' | null | undefinednone
side'bottom' | 'left' | 'right' | 'top' | null | undefinednone
size'md' | 'sm' | 'lg' | 'xl' | 'full' | null | undefinednone

DrawerTrigger

DrawerTriggerProps

Variants

PropTypeDefault
appearance
amberaquabluecrimsoncyandefaultelectricemeraldforestglassgradient-bluegradient-green+32
default
Inherited HTML props
PropTypeDefault
childrenReactNodenone
classNamestring | undefinednone
idstring | undefinednone
onClickMouseEventHandler<HTMLButtonElement> | undefinednone
styleCSSProperties | undefinednone
titlestring | undefinednone

DrawerContentAnimated

DrawerContentAnimatedProps

animated

Behavior

PropTypeDefault
animationDrawerAnimation | undefinednone
appearance'default' | 'blue' | 'cyan' | 'green' | 'lime' | 'mint' | 'ocean' | 'sapphire' | 'lavender' | 'ruby' | 'red' | 'slate' | 'zinc' | 'stone' | 'royal' | 'electric' | 'forest' | 'sunset' | 'magenta' | 'crimson' | 'aqua' | 'plum' | 'sky' | 'rose' | 'purple' | 'pink' | 'orange' | 'yellow' | 'teal' | 'indigo' | 'emerald' | 'gradient-blue' | 'gradient-green' | 'gradient-red' | 'gradient-yellow' | 'gradient-purple' | 'gradient-teal' | 'gradient-indigo' | 'gradient-pink' | 'gradient-orange' | 'gray' | 'violet' | 'glass' | 'amber' | null | undefinednone
side'bottom' | 'left' | 'right' | 'top' | null | undefinednone
size'md' | 'sm' | 'lg' | 'xl' | 'full' | null | undefinednone

Content

PropTypeDefault
childrenReactNodenone
Inherited HTML props
PropTypeDefault
classNamestring | undefinednone
idstring | undefinednone
styleCSSProperties | undefinednone
CSS variable overrides

Drawer CSS variables

Override these drawer variables on :root, a theme selector, or a component wrapper.

566 variables

Pattern: --zui-<component>-<slot?>-<variant?>-<property>-<state?>-dark?

:root {
  --zui-drawer-overlay-bg: oklch(98.4% 0.003 247.858 / 0.7);
  --zui-drawer-trigger-default-bg: oklch(12.9% 0.042 264.695);
  --zui-drawer-trigger-glass-border: #00000026;
  --zui-drawer-trigger-glass-bg: oklch(98.4% 0.003 247.858 / 0.7);
  --zui-drawer-trigger-glass-fg: oklch(20.8% 0.042 265.755);
  --zui-drawer-trigger-sky-border: oklch(44.3% 0.11 240.79);
  --zui-drawer-trigger-sky-bg: oklch(97.7% 0.013 236.62);
  --zui-drawer-trigger-sky-fg: oklch(44.3% 0.11 240.79);
  --zui-drawer-trigger-rose-border: oklch(45.5% 0.188 13.697);
  --zui-drawer-trigger-rose-bg: oklch(96.9% 0.015 12.422);
  --zui-drawer-trigger-rose-fg: oklch(45.5% 0.188 13.697);
  --zui-drawer-trigger-purple-border: oklch(43.8% 0.218 303.724);
  --zui-drawer-trigger-purple-bg: oklch(97.7% 0.014 308.299);
  --zui-drawer-trigger-purple-fg: oklch(43.8% 0.218 303.724);
  --zui-drawer-trigger-pink-border: oklch(45.9% 0.187 3.815);
  --zui-drawer-trigger-pink-bg: oklch(97.1% 0.014 343.198);
  --zui-drawer-trigger-pink-fg: oklch(45.9% 0.187 3.815);
  --zui-drawer-trigger-orange-border: oklch(47% 0.157 37.304);
  --zui-drawer-trigger-orange-bg: oklch(98% 0.016 73.684);
  --zui-drawer-trigger-orange-fg: oklch(47% 0.157 37.304);
  --zui-drawer-trigger-yellow-border: oklch(47.6% 0.114 61.907);
  --zui-drawer-trigger-yellow-bg: oklch(98.7% 0.026 102.212);
  --zui-drawer-trigger-yellow-fg: oklch(47.6% 0.114 61.907);
  --zui-drawer-trigger-teal-border: oklch(43.7% 0.078 188.216);
  --zui-drawer-trigger-teal-bg: oklch(98.4% 0.014 180.72);
  --zui-drawer-trigger-teal-fg: oklch(43.7% 0.078 188.216);
  --zui-drawer-trigger-indigo-border: oklch(39.8% 0.195 277.366);
  --zui-drawer-trigger-indigo-bg: oklch(96.2% 0.018 272.314);
  --zui-drawer-trigger-indigo-fg: oklch(39.8% 0.195 277.366);
  --zui-drawer-trigger-emerald-border: oklch(43.2% 0.095 166.913);
  --zui-drawer-trigger-emerald-bg: oklch(97.9% 0.021 166.113);
  --zui-drawer-trigger-emerald-fg: oklch(43.2% 0.095 166.913);
  --zui-drawer-trigger-gray-border: oklch(27.8% 0.033 256.848);
  --zui-drawer-trigger-gray-bg: oklch(98.5% 0.002 247.839);
  --zui-drawer-trigger-gray-fg: oklch(27.8% 0.033 256.848);
  --zui-drawer-trigger-amber-border: oklch(47.3% 0.137 46.201);
  --zui-drawer-trigger-amber-bg: oklch(98.7% 0.022 95.277);
  --zui-drawer-trigger-amber-fg: oklch(47.3% 0.137 46.201);
  --zui-drawer-trigger-violet-border: oklch(43.2% 0.232 292.759);
  --zui-drawer-trigger-violet-bg: oklch(96.9% 0.016 293.756);
  --zui-drawer-trigger-violet-fg: oklch(43.2% 0.232 292.759);
  --zui-drawer-trigger-gradient-blue-border: oklch(42.4% 0.199 265.638);
  --zui-drawer-trigger-gradient-blue-from: oklch(97% 0.014 254.604);
  --zui-drawer-trigger-gradient-blue-to: oklch(97.7% 0.014 308.299);
  --zui-drawer-trigger-gradient-blue-fg: oklch(42.4% 0.199 265.638);
  --zui-drawer-trigger-gradient-green-border: oklch(44.8% 0.119 151.328);
  --zui-drawer-trigger-gradient-green-from: oklch(98.2% 0.018 155.826);
  --zui-drawer-trigger-gradient-green-to: oklch(98.6% 0.031 120.757);
  --zui-drawer-trigger-gradient-green-fg: oklch(44.8% 0.119 151.328);
  --zui-drawer-trigger-gradient-red-border: oklch(44.4% 0.177 26.899);
  --zui-drawer-trigger-gradient-red-from: oklch(97.1% 0.013 17.38);
  --zui-drawer-trigger-gradient-red-to: oklch(97.1% 0.014 343.198);
  --zui-drawer-trigger-gradient-red-fg: oklch(44.4% 0.177 26.899);
  --zui-drawer-trigger-gradient-yellow-border: oklch(47.6% 0.114 61.907);
  --zui-drawer-trigger-gradient-yellow-from: oklch(98.7% 0.026 102.212);
  --zui-drawer-trigger-gradient-yellow-to: oklch(98% 0.016 73.684);
  --zui-drawer-trigger-gradient-yellow-fg: oklch(47.6% 0.114 61.907);
  --zui-drawer-trigger-gradient-purple-border: oklch(43.8% 0.218 303.724);
  --zui-drawer-trigger-gradient-purple-from: oklch(97.7% 0.014 308.299);
  --zui-drawer-trigger-gradient-purple-to: oklch(97.1% 0.014 343.198);
  --zui-drawer-trigger-gradient-purple-fg: oklch(43.8% 0.218 303.724);
  --zui-drawer-trigger-gradient-teal-border: oklch(43.7% 0.078 188.216);
  --zui-drawer-trigger-gradient-teal-from: oklch(98.4% 0.014 180.72);
  --zui-drawer-trigger-gradient-teal-to: oklch(98.4% 0.019 200.873);
  --zui-drawer-trigger-gradient-teal-fg: oklch(43.7% 0.078 188.216);
  --zui-drawer-trigger-gradient-indigo-border: oklch(39.8% 0.195 277.366);
  --zui-drawer-trigger-gradient-indigo-from: oklch(96.2% 0.018 272.314);
  --zui-drawer-trigger-gradient-indigo-to: oklch(97.7% 0.014 308.299);
  --zui-drawer-trigger-gradient-indigo-fg: oklch(39.8% 0.195 277.366);
  --zui-drawer-trigger-gradient-pink-border: oklch(45.9% 0.187 3.815);
  --zui-drawer-trigger-gradient-pink-from: oklch(97.1% 0.014 343.198);
  --zui-drawer-trigger-gradient-pink-to: oklch(96.9% 0.015 12.422);
  --zui-drawer-trigger-gradient-pink-fg: oklch(45.9% 0.187 3.815);
  --zui-drawer-trigger-gradient-orange-border: oklch(47% 0.157 37.304);
  --zui-drawer-trigger-gradient-orange-from: oklch(98% 0.016 73.684);
  --zui-drawer-trigger-gradient-orange-to: oklch(97.1% 0.013 17.38);
  --zui-drawer-trigger-gradient-orange-fg: oklch(47% 0.157 37.304);
  --zui-drawer-trigger-blue-border: #2563eb;
  --zui-drawer-trigger-blue-bg: #2563eb14;
  --zui-drawer-trigger-blue-fg: #2563eb;
  --zui-drawer-trigger-blue-bg-hover: #2563eb18;
  --zui-drawer-trigger-cyan-border: #0891b2;
  --zui-drawer-trigger-cyan-bg: #0891b214;
  --zui-drawer-trigger-cyan-fg: #0891b2;
  --zui-drawer-trigger-cyan-bg-hover: #0891b218;
  --zui-drawer-trigger-green-border: #16a34a;
  --zui-drawer-trigger-green-bg: #16a34a14;
  --zui-drawer-trigger-green-fg: #16a34a;
  --zui-drawer-trigger-green-bg-hover: #16a34a18;
  --zui-drawer-trigger-lime-border: #65a30d;
  --zui-drawer-trigger-lime-bg: #65a30d14;
  --zui-drawer-trigger-lime-fg: #65a30d;
  --zui-drawer-trigger-lime-bg-hover: #65a30d18;
  --zui-drawer-trigger-mint-border: #10b981;
  --zui-drawer-trigger-mint-bg: #10b98114;
  --zui-drawer-trigger-mint-fg: #10b981;
  --zui-drawer-trigger-mint-bg-hover: #10b98118;
  --zui-drawer-trigger-ocean-border: #0284c7;
  --zui-drawer-trigger-ocean-bg: #0284c714;
  --zui-drawer-trigger-ocean-fg: #0284c7;
  --zui-drawer-trigger-ocean-bg-hover: #0284c718;
  --zui-drawer-trigger-sapphire-border: #1d4ed8;
  --zui-drawer-trigger-sapphire-bg: #1d4ed814;
  --zui-drawer-trigger-sapphire-fg: #1d4ed8;
  --zui-drawer-trigger-sapphire-bg-hover: #1d4ed818;
  --zui-drawer-trigger-lavender-border: #8b5cf6;
  --zui-drawer-trigger-lavender-bg: #8b5cf614;
  --zui-drawer-trigger-lavender-fg: #8b5cf6;
  --zui-drawer-trigger-lavender-bg-hover: #8b5cf618;
  --zui-drawer-trigger-ruby-border: #be123c;
  --zui-drawer-trigger-ruby-bg: #be123c14;
  --zui-drawer-trigger-ruby-fg: #be123c;
  --zui-drawer-trigger-ruby-bg-hover: #be123c18;
  --zui-drawer-trigger-red-border: #dc2626;
  --zui-drawer-trigger-red-bg: #dc262614;
  --zui-drawer-trigger-red-fg: #dc2626;
  --zui-drawer-trigger-red-bg-hover: #dc262618;
  --zui-drawer-trigger-slate-border: #475569;
  --zui-drawer-trigger-slate-bg: #47556914;
  --zui-drawer-trigger-slate-fg: #475569;
  --zui-drawer-trigger-slate-bg-hover: #47556918;
  --zui-drawer-trigger-zinc-border: #52525b;
  --zui-drawer-trigger-zinc-bg: #52525b14;
  --zui-drawer-trigger-zinc-fg: #52525b;
  --zui-drawer-trigger-zinc-bg-hover: #52525b18;
  --zui-drawer-trigger-stone-border: #57534e;
  --zui-drawer-trigger-stone-bg: #57534e14;
  --zui-drawer-trigger-stone-fg: #57534e;
  --zui-drawer-trigger-stone-bg-hover: #57534e18;
  --zui-drawer-trigger-royal-border: #4338ca;
  --zui-drawer-trigger-royal-bg: #4338ca14;
  --zui-drawer-trigger-royal-fg: #4338ca;
  --zui-drawer-trigger-royal-bg-hover: #4338ca18;
  --zui-drawer-trigger-electric-border: #0ea5e9;
  --zui-drawer-trigger-electric-bg: #0ea5e914;
  --zui-drawer-trigger-electric-fg: #0ea5e9;
  --zui-drawer-trigger-electric-bg-hover: #0ea5e918;
  --zui-drawer-trigger-forest-border: #166534;
  --zui-drawer-trigger-forest-bg: #16653414;
  --zui-drawer-trigger-forest-fg: #166534;
  --zui-drawer-trigger-forest-bg-hover: #16653418;
  --zui-drawer-trigger-sunset-border: #ea580c;
  --zui-drawer-trigger-sunset-bg: #ea580c14;
  --zui-drawer-trigger-sunset-fg: #ea580c;
  --zui-drawer-trigger-sunset-bg-hover: #ea580c18;
  --zui-drawer-trigger-magenta-border: #c026d3;
  --zui-drawer-trigger-magenta-bg: #c026d314;
  --zui-drawer-trigger-magenta-fg: #c026d3;
  --zui-drawer-trigger-magenta-bg-hover: #c026d318;
  --zui-drawer-trigger-crimson-border: #b91c1c;
  --zui-drawer-trigger-crimson-bg: #b91c1c14;
  --zui-drawer-trigger-crimson-fg: #b91c1c;
  --zui-drawer-trigger-crimson-bg-hover: #b91c1c18;
  --zui-drawer-trigger-aqua-border: #0f766e;
  --zui-drawer-trigger-aqua-bg: #0f766e14;
  --zui-drawer-trigger-aqua-fg: #0f766e;
  --zui-drawer-trigger-aqua-bg-hover: #0f766e18;
  --zui-drawer-trigger-plum-border: #7e22ce;
  --zui-drawer-trigger-plum-bg: #7e22ce14;
  --zui-drawer-trigger-plum-fg: #7e22ce;
  --zui-drawer-trigger-plum-bg-hover: #7e22ce18;
  --zui-drawer-content-border: #0000001a;
  --zui-drawer-content-bg: oklch(98.4% 0.003 247.858);
  --zui-drawer-content-fg: oklch(20.8% 0.042 265.755);
  --zui-drawer-content-shadow: 0 12px 40px rgba(15,23,42,0.14);
  --zui-drawer-content-default-bg: oklch(98.4% 0.003 247.858);
  --zui-drawer-content-default-fg: oklch(20.8% 0.042 265.755);
  --zui-drawer-content-glass-border: #00000026;
  --zui-drawer-content-glass-bg: oklch(98.4% 0.003 247.858 / 0.7);
  --zui-drawer-content-sky-border: oklch(44.3% 0.11 240.79);
  --zui-drawer-content-sky-bg: oklch(97.7% 0.013 236.62);
  --zui-drawer-content-rose-border: oklch(45.5% 0.188 13.697);
  --zui-drawer-content-rose-bg: oklch(96.9% 0.015 12.422);
  --zui-drawer-content-purple-border: oklch(43.8% 0.218 303.724);
  --zui-drawer-content-purple-bg: oklch(97.7% 0.014 308.299);
  --zui-drawer-content-pink-border: oklch(45.9% 0.187 3.815);
  --zui-drawer-content-pink-bg: oklch(97.1% 0.014 343.198);
  --zui-drawer-content-orange-border: oklch(47% 0.157 37.304);
  --zui-drawer-content-orange-bg: oklch(98% 0.016 73.684);
  --zui-drawer-content-yellow-border: oklch(47.6% 0.114 61.907);
  --zui-drawer-content-yellow-bg: oklch(98.7% 0.026 102.212);
  --zui-drawer-content-teal-border: oklch(43.7% 0.078 188.216);
  --zui-drawer-content-teal-bg: oklch(98.4% 0.014 180.72);
  --zui-drawer-content-indigo-border: oklch(39.8% 0.195 277.366);
  --zui-drawer-content-indigo-bg: oklch(96.2% 0.018 272.314);
  --zui-drawer-content-emerald-border: oklch(43.2% 0.095 166.913);
  --zui-drawer-content-emerald-bg: oklch(97.9% 0.021 166.113);
  --zui-drawer-content-gray-border: oklch(27.8% 0.033 256.848);
  --zui-drawer-content-gray-bg: oklch(98.5% 0.002 247.839);
  --zui-drawer-content-amber-border: oklch(47.3% 0.137 46.201);
  --zui-drawer-content-amber-bg: oklch(98.7% 0.022 95.277);
  --zui-drawer-content-violet-border: oklch(43.2% 0.232 292.759);
  --zui-drawer-content-violet-bg: oklch(96.9% 0.016 293.756);
  --zui-drawer-content-gradient-blue-border: oklch(42.4% 0.199 265.638);
  --zui-drawer-content-gradient-blue-from: oklch(97% 0.014 254.604);
  --zui-drawer-content-gradient-blue-to: oklch(97.7% 0.014 308.299);
  --zui-drawer-content-gradient-green-border: oklch(44.8% 0.119 151.328);
  --zui-drawer-content-gradient-green-from: oklch(98.2% 0.018 155.826);
  --zui-drawer-content-gradient-green-to: oklch(98.6% 0.031 120.757);
  --zui-drawer-content-gradient-red-border: oklch(44.4% 0.177 26.899);
  --zui-drawer-content-gradient-red-from: oklch(97.1% 0.013 17.38);
  --zui-drawer-content-gradient-red-to: oklch(97.1% 0.014 343.198);
  --zui-drawer-content-gradient-yellow-border: oklch(47.6% 0.114 61.907);
  --zui-drawer-content-gradient-yellow-from: oklch(98.7% 0.026 102.212);
  --zui-drawer-content-gradient-yellow-to: oklch(98% 0.016 73.684);
  --zui-drawer-content-gradient-purple-border: oklch(43.8% 0.218 303.724);
  --zui-drawer-content-gradient-purple-from: oklch(97.7% 0.014 308.299);
  --zui-drawer-content-gradient-purple-to: oklch(97.1% 0.014 343.198);
  --zui-drawer-content-gradient-teal-border: oklch(43.7% 0.078 188.216);
  --zui-drawer-content-gradient-teal-from: oklch(98.4% 0.014 180.72);
  --zui-drawer-content-gradient-teal-to: oklch(98.4% 0.019 200.873);
  --zui-drawer-content-gradient-indigo-border: oklch(39.8% 0.195 277.366);
  --zui-drawer-content-gradient-indigo-from: oklch(96.2% 0.018 272.314);
  --zui-drawer-content-gradient-indigo-to: oklch(97.7% 0.014 308.299);
  --zui-drawer-content-gradient-pink-border: oklch(45.9% 0.187 3.815);
  --zui-drawer-content-gradient-pink-from: oklch(97.1% 0.014 343.198);
  --zui-drawer-content-gradient-pink-to: oklch(96.9% 0.015 12.422);
  --zui-drawer-content-gradient-orange-border: oklch(47% 0.157 37.304);
  --zui-drawer-content-gradient-orange-from: oklch(98% 0.016 73.684);
  --zui-drawer-content-gradient-orange-to: oklch(97.1% 0.013 17.38);
  --zui-drawer-content-blue-border: #2563eb;
  --zui-drawer-content-blue-bg: #2563eb14;
  --zui-drawer-content-blue-fg: #0f172a;
  --zui-drawer-content-cyan-border: #0891b2;
  --zui-drawer-content-cyan-bg: #0891b214;
  --zui-drawer-content-cyan-fg: #0f172a;
  --zui-drawer-content-green-border: #16a34a;
  --zui-drawer-content-green-bg: #16a34a14;
  --zui-drawer-content-green-fg: #0f172a;
  --zui-drawer-content-lime-border: #65a30d;
  --zui-drawer-content-lime-bg: #65a30d14;
  --zui-drawer-content-lime-fg: #0f172a;
  --zui-drawer-content-mint-border: #10b981;
  --zui-drawer-content-mint-bg: #10b98114;
  --zui-drawer-content-mint-fg: #0f172a;
  --zui-drawer-content-ocean-border: #0284c7;
  --zui-drawer-content-ocean-bg: #0284c714;
  --zui-drawer-content-ocean-fg: #0f172a;
  --zui-drawer-content-sapphire-border: #1d4ed8;
  --zui-drawer-content-sapphire-bg: #1d4ed814;
  --zui-drawer-content-sapphire-fg: #0f172a;
  --zui-drawer-content-lavender-border: #8b5cf6;
  --zui-drawer-content-lavender-bg: #8b5cf614;
  --zui-drawer-content-lavender-fg: #0f172a;
  --zui-drawer-content-ruby-border: #be123c;
  --zui-drawer-content-ruby-bg: #be123c14;
  --zui-drawer-content-ruby-fg: #0f172a;
  --zui-drawer-content-red-border: #dc2626;
  --zui-drawer-content-red-bg: #dc262614;
  --zui-drawer-content-red-fg: #0f172a;
  --zui-drawer-content-slate-border: #475569;
  --zui-drawer-content-slate-bg: #47556914;
  --zui-drawer-content-slate-fg: #0f172a;
  --zui-drawer-content-zinc-border: #52525b;
  --zui-drawer-content-zinc-bg: #52525b14;
  --zui-drawer-content-zinc-fg: #0f172a;
  --zui-drawer-content-stone-border: #57534e;
  --zui-drawer-content-stone-bg: #57534e14;
  --zui-drawer-content-stone-fg: #0f172a;
  --zui-drawer-content-royal-border: #4338ca;
  --zui-drawer-content-royal-bg: #4338ca14;
  --zui-drawer-content-royal-fg: #0f172a;
  --zui-drawer-content-electric-border: #0ea5e9;
  --zui-drawer-content-electric-bg: #0ea5e914;
  --zui-drawer-content-electric-fg: #0f172a;
  --zui-drawer-content-forest-border: #166534;
  --zui-drawer-content-forest-bg: #16653414;
  --zui-drawer-content-forest-fg: #0f172a;
  --zui-drawer-content-sunset-border: #ea580c;
  --zui-drawer-content-sunset-bg: #ea580c14;
  --zui-drawer-content-sunset-fg: #0f172a;
  --zui-drawer-content-magenta-border: #c026d3;
  --zui-drawer-content-magenta-bg: #c026d314;
  --zui-drawer-content-magenta-fg: #0f172a;
  --zui-drawer-content-crimson-border: #b91c1c;
  --zui-drawer-content-crimson-bg: #b91c1c14;
  --zui-drawer-content-crimson-fg: #0f172a;
  --zui-drawer-content-aqua-border: #0f766e;
  --zui-drawer-content-aqua-bg: #0f766e14;
  --zui-drawer-content-aqua-fg: #0f172a;
  --zui-drawer-content-plum-border: #7e22ce;
  --zui-drawer-content-plum-bg: #7e22ce14;
  --zui-drawer-content-plum-fg: #0f172a;
}

/* Dark theme variables follow the same names with -dark appended. */
.dark {
  --zui-drawer-overlay-bg-dark: oklch(12.9% 0.042 264.695 / 0.7);
  --zui-drawer-trigger-default-bg-dark: oklch(12.9% 0.042 264.695);
}

What it does

Drawers should trap focus while open and restore it on dismiss.

Keep width responsive so keyboards remain usable on small screens.

Composition and API

Prefer compound subcomponents instead of one oversized prop bag. Export a small, documented API for your design system.

Avoid stacking multiple drawers without an explicit stacking policy.

Common use cases

  • Host mobile navigation without leaving the current route.
  • Show record inspectors beside data tables.
  • Collect multi-step inputs with a sticky footer.
  • Present non-blocking filters on commerce listings.

Accessibility

Keyboard order, focus rings, and ARIA attributes should match production usage. Test with your supported browsers and assistive technologies when semantics are non-trivial.

This preview page exposes a single h1 in the hero for a clean outline.

Next.js integration notes

Colocate examples under the App Router, keep server and client boundaries explicit, and avoid pulling interactive overlays into unexpected server layouts.

Set NEXT_PUBLIC_SITE_URL so canonical and Open Graph URLs resolve on deploy.

FAQ

Does the Drawer component work with Next.js App Router?

Yes. Import it like any other React component; keep interactive subtrees in client components when you need hooks or browser APIs, and leave static structure in server components where possible.

Can I customize drawer with Tailwind CSS?

Zentauri UI exposes class-friendly variants and slots so you can extend styles with Tailwind utilities without fighting inline styles.

Is this Drawer implementation accessible by default?

Primitives follow sensible defaults, but accessibility depends on how you label controls, manage focus, and wire keyboard handlers in your app. Validate critical flows with keyboard-only use and screen readers.