Zentauri UI
Overlay

Modals for focused tasks

Modals isolate critical tasks—confirmations, short forms, and destructive actions—while preserving page context underneath. Suitable for React SPAs and Next.js layouts using portals.

Examples

Slide-up animation with a top-aligned panel.

Modal variants examples

Max width, vertical anchor, and surface style with a shared dialog layout. Code uses a Variant: lead-in per row.

What it does

Focus must move inside the dialog on open and restore on close.

Provide labelled titles even when visually minimal.

Composition and API

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

Avoid stacking unrelated modals; queue user tasks instead.

Common use cases

  • Confirm destructive deletes with explicit copy.
  • Collect short forms without navigating away.
  • Show legal acknowledgements before continuing.
  • Present multi-step onboarding checkpoints.

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 Modal 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 modal 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 Modal 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.