Skip to content
Cuelark UI
FeedbackAnimated

Alert

Callouts with a colored rail, tone icons and fold-away dismiss.

Alerts call out information inline: a notice, a success, a warning, an error. The tone is carried by a rail and icon while text stays readable, and dismissible alerts fold away smoothly.

Preview

New version available
Cuelark UI 1.1 adds motion tokens. Re-run the CLI to update.
Domain verified
ui.cuelark.com is now serving over HTTPS.

Installation

pnpm dlx shadcn@latest add https://ui.cuelark.com/r/alert.json

The CLI also installs the Cuelark theme tokens, the GSAP motion layer. With the @cuelark namespace configured, use @cuelark/alert.

Builds on: motion

Usage

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";

<Alert tone="warning">
  <AlertTitle>Usage at 90%</AlertTitle>
  <AlertDescription>Upgrade to avoid throttling.</AlertDescription>
</Alert>

Motion

How it moves

Dismissing folds the alert's height and padding away (GSAP) before it unmounts.

Scale it with --cl-motion (0 off, 1 default, 1.5 expressive) on any ancestor. Reduced-motion preferences always switch it off.

API reference

Alert

PropTypeDefaultDescription
tone"info" | "success" | "warning" | "destructive" | "neutral""info"Color and icon.
iconReactNode | null—Custom icon, or null for none.
onDismiss() => void—Adds a close button.

AlertTitle · AlertDescription

Accessibility

  • Warnings and errors use role=alert; others use role=status.
  • Color is never the only signal: each tone has an icon.

FAQ

Also searched as: react alert · alert banner · callout component · shadcn alert · notification banner