Data feedback

Alert

Callout banner for critical messages, status, and warnings.

5 examplesData ComponentReact 19 & Next.js 16Tailwind CSS v4

Install

pnpm add @quinkit/ui

Import

import { Alert } from "@quinkit/ui";

Interactive Examples

Live previews · code · themes · viewport · dark mode

Informational Alert

A neutral informational banner.

Heads up

A new version of Quinkit UI is available.

Destructive Alert

Communicate errors and critical failures.

Payment failed

Your card was declined. Update your payment method.

Success Confirmation

Confirm a successful operational outcome.

Deployment complete

Your changes are live in production.

Warning Alert

Cautionary notification regarding quota or capacity.

Storage Capacity Warning

Your workspace is using 88% of allocated storage. Consider deleting old build artifacts.

Alert with Action Button

Banner with inline action button to resolve the alert state.

Billing Method Expiring

Your primary credit card expires in 5 days.

Overview

Alert is part of the Week 4–6 free core component set. It follows the shared component standard with TypeScript exports, semantic token styling, accessibility-minded markup, and Storybook examples.

Accessibility Details

Uses semantic HTML or Radix primitives where applicable.
Interactive components expose keyboard/focus behavior through native controls or Radix.
ARIA roles, states, and labels are applied where relevant.

Styling

Uses semantic design tokens such as bg-background, text-foreground, border-border, bg-popover, and text-muted-foreground.
Motion-heavy components include reduced-motion compatible classes where applicable.

Accessibility & Keyboard

Alert adheres to WAI-ARIA design patterns for accessible web components.

Keyboard Navigation

Tab / Shift + Tab — Focuses control and moves between interactive elements.
Space / Enter — Triggers action or toggles selection.
Escape — Closes open popovers, overlays, or dropdown menus.

ARIA Standards

Built with semantic HTML tags and explicit aria-* attributes.
Uses high-contrast focus rings (ring-ring) visible in both light & dark mode.
Supports screen readers with non-visual label fallbacks.

Registry Install

Add a shadcn-compatible bridge file to your project that re-exports from @quinkit/ui.

Registry

npx shadcn@latest add https://quinkit-ui.vercel.app/r/alert.json