Zentauri UI
Feedback

Alerts for status and system messages

Show inline status, validation summaries, and operational notices with a composable Alert component. Works in React 19 projects and Next.js route segments that need lightweight feedback without modal chrome.

Examples

Compare semantic tones and motion with the code tab.

Alert variants examples

Each row pairs live output with matching JSX; the Variant line states which appearance/size tokens apply.

CSS variable overrides

Alert CSS variables

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

150 variables

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

:root {
  --zui-alert-ring-offset: oklch(98.4% 0.003 247.858);
  --zui-alert-default-border: #0000001a;
  --zui-alert-default-bg: #0000000d;
  --zui-alert-default-fg: oklch(20.8% 0.042 265.755);
  --zui-alert-success-border: oklch(69.6% 0.17 162.48 / 0.4);
  --zui-alert-success-bg: oklch(69.6% 0.17 162.48 / 0.1);
  --zui-alert-success-fg: oklch(26.2% 0.051 172.552);
  --zui-alert-warning-border: oklch(76.9% 0.188 70.08 / 0.4);
  --zui-alert-warning-bg: oklch(76.9% 0.188 70.08 / 0.1);
  --zui-alert-warning-fg: oklch(27.9% 0.077 45.635);
  --zui-alert-error-border: oklch(64.5% 0.246 16.439 / 0.5);
  --zui-alert-error-bg: oklch(64.5% 0.246 16.439 / 0.1);
  --zui-alert-error-fg: oklch(27.1% 0.105 12.094);
  --zui-alert-info-border: oklch(68.5% 0.169 237.323 / 0.4);
  --zui-alert-info-bg: oklch(68.5% 0.169 237.323 / 0.1);
  --zui-alert-info-fg: oklch(29.3% 0.066 243.157);
  --zui-alert-ghost-border: transparent;
  --zui-alert-ghost-bg: transparent;
  --zui-alert-ghost-fg: oklch(37.2% 0.044 257.287);
  --zui-alert-purple-border: oklch(43.8% 0.218 303.724);
  --zui-alert-purple-bg: oklch(97.7% 0.014 308.299);
  --zui-alert-purple-fg: oklch(20.8% 0.042 265.755);
  --zui-alert-pink-border: oklch(45.9% 0.187 3.815);
  --zui-alert-pink-bg: oklch(97.1% 0.014 343.198);
  --zui-alert-pink-fg: oklch(20.8% 0.042 265.755);
  --zui-alert-orange-border: oklch(47% 0.157 37.304);
  --zui-alert-orange-bg: oklch(98% 0.016 73.684);
  --zui-alert-orange-fg: oklch(20.8% 0.042 265.755);
  --zui-alert-yellow-border: oklch(47.6% 0.114 61.907);
  --zui-alert-yellow-bg: oklch(98.7% 0.026 102.212);
  --zui-alert-yellow-fg: oklch(20.8% 0.042 265.755);
  --zui-alert-teal-border: oklch(43.7% 0.078 188.216);
  --zui-alert-teal-bg: oklch(98.4% 0.014 180.72);
  --zui-alert-teal-fg: oklch(20.8% 0.042 265.755);
  --zui-alert-indigo-border: oklch(39.8% 0.195 277.366);
  --zui-alert-indigo-bg: oklch(96.2% 0.018 272.314);
  --zui-alert-indigo-fg: oklch(20.8% 0.042 265.755);
  --zui-alert-gray-border: oklch(27.8% 0.033 256.848);
  --zui-alert-gray-bg: oklch(98.5% 0.002 247.839);
  --zui-alert-gray-fg: oklch(20.8% 0.042 265.755);
  --zui-alert-violet-border: oklch(43.2% 0.232 292.759);
  --zui-alert-violet-bg: oklch(96.9% 0.016 293.756);
  --zui-alert-violet-fg: oklch(20.8% 0.042 265.755);
  --zui-alert-gradient-blue-border: oklch(42.4% 0.199 265.638);
  --zui-alert-gradient-blue-from: oklch(97% 0.014 254.604);
  --zui-alert-gradient-blue-to: oklch(97.7% 0.014 308.299);
  --zui-alert-gradient-blue-fg: oklch(20.8% 0.042 265.755);
  --zui-alert-gradient-green-border: oklch(44.8% 0.119 151.328);
  --zui-alert-gradient-green-from: oklch(98.2% 0.018 155.826);
  --zui-alert-gradient-green-to: oklch(98.6% 0.031 120.757);
  --zui-alert-gradient-green-fg: oklch(20.8% 0.042 265.755);
  --zui-alert-gradient-red-border: oklch(44.4% 0.177 26.899);
  --zui-alert-gradient-red-from: oklch(97.1% 0.013 17.38);
  --zui-alert-gradient-red-to: oklch(97.1% 0.014 343.198);
  --zui-alert-gradient-red-fg: oklch(20.8% 0.042 265.755);
  --zui-alert-gradient-yellow-border: oklch(47.6% 0.114 61.907);
  --zui-alert-gradient-yellow-from: oklch(98.7% 0.026 102.212);
  --zui-alert-gradient-yellow-to: oklch(98% 0.016 73.684);
  --zui-alert-gradient-yellow-fg: oklch(20.8% 0.042 265.755);
  --zui-alert-gradient-purple-border: oklch(43.8% 0.218 303.724);
  --zui-alert-gradient-purple-from: oklch(97.7% 0.014 308.299);
  --zui-alert-gradient-purple-to: oklch(97.1% 0.014 343.198);
  --zui-alert-gradient-purple-fg: oklch(20.8% 0.042 265.755);
  --zui-alert-gradient-teal-border: oklch(43.7% 0.078 188.216);
  --zui-alert-gradient-teal-from: oklch(98.4% 0.014 180.72);
  --zui-alert-gradient-teal-to: oklch(98.4% 0.019 200.873);
  --zui-alert-gradient-teal-fg: oklch(20.8% 0.042 265.755);
  --zui-alert-gradient-indigo-border: oklch(39.8% 0.195 277.366);
  --zui-alert-gradient-indigo-from: oklch(96.2% 0.018 272.314);
  --zui-alert-gradient-indigo-to: oklch(97.7% 0.014 308.299);
  --zui-alert-gradient-indigo-fg: oklch(20.8% 0.042 265.755);
  --zui-alert-gradient-pink-border: oklch(45.9% 0.187 3.815);
  --zui-alert-gradient-pink-from: oklch(97.1% 0.014 343.198);
  --zui-alert-gradient-pink-to: oklch(96.9% 0.015 12.422);
  --zui-alert-gradient-pink-fg: oklch(20.8% 0.042 265.755);
  --zui-alert-gradient-orange-border: oklch(47% 0.157 37.304);
  --zui-alert-gradient-orange-from: oklch(98% 0.016 73.684);
  --zui-alert-gradient-orange-to: oklch(97.1% 0.013 17.38);
  --zui-alert-gradient-orange-fg: oklch(20.8% 0.042 265.755);
  --zui-alert-description-fg: oklch(44.6% 0.043 257.281);
}

/* Dark theme variables follow the same names with -dark appended. */
.dark {
  --zui-alert-ring-offset-dark: oklch(12.9% 0.042 264.695);
  --zui-alert-default-border-dark: #ffffff1a;
  /* ...same variables with -dark at the end */
}

What it does

Alerts are inline by design: combine title and description slots for scanning.

Motion presets help draw attention without hijacking focus from inputs.

Composition and API

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

Keep roles truthful—do not mark purely decorative banners as assertive live regions unless they truly interrupt workflow.

Common use cases

  • Summarize form errors above a Next.js server action form.
  • Surface deployment or maintenance banners on dashboard shells.
  • Highlight irreversible actions with a persistent warning tone.
  • Provide neutral guidance next to dense configuration tables.

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 Alert 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 alert 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 Alert 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.