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 examples

Edge, width tier, and surface style on the same panel structure. Each snippet begins with Variant: naming the row.

CSS variable overrides

Drawer CSS variables

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

271 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-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);
}

/* 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-glass-border-dark: #ffffff26;
  /* ...same variables with -dark at the end */
}

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.