Alert
A persistent message that helps people recover or continue.
pnpm dlx shadcn@latest add @uiarc/alertLive · keyboard ready
- Persistent, in-flow messages about a page or form, such as an expiring card.
- Status that changes over time, where one alert should morph between tones.
- Dismissible notices that should collapse and close the gap below them.
- Use toast or toast-stack for transient results of an action.
- Use empty-state when there is no content to show.
- Use dialog when people must respond before continuing.
Installation
Add Alert with the shadcn CLI, or copy the source by hand.
pnpm dlx shadcn@latest add @uiarc/alertAdds the component and its local dependencies, and installs motion, lucide-react. First time? Add the @uiarc registry to components.json, or use the full URL:
example.tsx
import { Alert } from "@/registry/components/alert/alert"; export function BillingNotice() { return ( <Alert tone="warning" title="Card expires soon" onDismiss={() => track("dismissed")}> Update your payment method before March 1 to avoid interruption. </Alert> );}Alert
An inline message with a tone icon, title, and optional details that morph when they change.
PropTypeDefaultDescription
titleRequiredstring–Headline. A new title rises in over the old one.tone"info" | "success" | "warning" | "danger""info"Colour and icon. Danger uses role="alert"; the rest use role="status".childrenReactNode–Details under the title. String children crossfade when they change.openboolean–Controls presence. Hiding collapses the height and fades it out.onDismiss() => void–Shows a dismiss button. Uncontrolled alerts collapse first, then call this....propsHTMLAttributes<HTMLDivElement>–Forwarded to the alert element, such as className and id.- EnterorSpace
- Activates the dismiss button when present.
- Danger alerts use role="alert" and interrupt; other tones use role="status" and announce politely.
- Outgoing copies are aria-hidden while they fade, so the live region reads only the current text.
- The dismiss button is labelled "Dismiss: <title>"; the tone icon is aria-hidden.
- Presence collapses or expands the height on a smooth spring with a fade, so content below closes the gap.
- Tone changes morph the icon through a small scale and blur; copy changes rise in while the height springs to fit.
- Reduced motion swaps content with short fades and no height animation.
- The alert fills its container and the copy wraps; the icon and dismiss button keep fixed sizes.
- Hover styles on the dismiss button apply only on hover-capable fine pointers.
- A ResizeObserver lets the height spring when copy changes; keep only a few alerts mounted per page.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use for persistent, in-flow messages tied to a page or form. Use toast or toast-stack for transient results of an action.
- Keep one Alert mounted and change tone, title, and children to morph between states instead of swapping components.
The full library index for assistants is at /llms.txt.