Inline alert that stays in the page flow in six tones, as a floating card or full-width banner; it unrolls with a spring, each tone icon moves once, and dismissing folds it away.
alertbannercalloutnoticestatusfeedbackmessage
Installation
$npx shadcn@latest add @geturui/alert
Also installs: Button
Usage
usage.tsx
1import { Alert } from "@/components/ui/alert";
2
3export function DownloadReady() {
4 return (
5 <Alert
6 tone="success"
7 title="Template downloaded"
8 description="Unzip it, run pnpm install, then pnpm dev."
9 actions={[
10 { label: "Open the setup guide", variant: "primary", href: "/docs/setup" },
11 { label: "Not now", variant: "secondary" },
12 ]}
13 dismissible
14 />
15 );
16}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
tone | "neutral" | "brand" | "info" | "success" | "warning" | "danger" | "neutral" | Colour, icon and ARIA role. |
layout | "floating" | "banner" | "floating" | Card in the page flow, or a full-width bar. |
size | "sm" | "md" | "lg" | "md" | Padding, type and icon tile scale. |
title / description | ReactNode | — | Heading and supporting text (children also work as the description). |
icon | ReactNode | false | — | Replace the tone icon, or hide it. |
actions | { label, onClick?, href?, variant?: "primary" | "secondary" | "link" }[] | — | Action row. Primary is volt on brand, ink elsewhere. |
dismissible | boolean | false | Adds a labelled close button. |
open / defaultOpen / onOpenChange | boolean / boolean / (open) => void | — / true / — | Visibility, controlled or uncontrolled. Closing animates height away. |
duration | number | — | Auto-dismiss after ms; a hairline counts down and pauses on hover or focus. |
Accessibility
- Danger and warning use role="alert"; every other tone uses role="status" so it is announced politely.
- Tone is carried by an icon and the title, never colour alone; icons are aria-hidden.
- The close button is labelled (dismissLabel). The countdown pauses while focus is inside.
- Unroll, icon motion and the blur on exit are replaced by fades under reduced motion.