Shadcn.io is not affiliated with official shadcn/ui
Shadcn Alert
React alert for success, errors, and inline notices on a page. Built with TypeScript and Tailwind CSS for Next.js using Base UI — role=alert, default and destructive.
An alert sits on the page and says what just happened. Use it for form success, a failed payment, or a warning that should stay until they act. If the message can vanish on its own, that is a Sonner.
Looking for a neobrutalism version for shadcn?
Same alert, thicker borders. The NeoBrutalism alert is the kit if you want that look.
Usage
import { InfoIcon } from "lucide-react"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"<Alert>
<InfoIcon />
<AlertTitle>Heads up!</AlertTitle>
<AlertDescription>
You can add components with the CLI.
</AlertDescription>
</Alert>A direct svg child opens the icon column. role="alert" is already on the root.
Composition
Basic
Icon, title, description. The usual success or info row.
Destructive
variant="destructive" for a failed charge or a broken submit. Save amber for a warning.
Action
AlertAction pins a Button on the end. Enable, retry, dismiss.
Custom Colors
Class names on Alert — bg-amber-50 dark:bg-amber-950 and matching text. The variants stay default.
RTL
Wrap with DirectionProvider and dir="rtl". The icon stays on the start edge.
API
Prop
Type
AlertTitle and AlertDescription take className. AlertAction is the end slot for a button.
Notes
Stay for a reason
If they can miss it, use a Sonner. An alert stays until the next render removes it.
Write the title as the outcome: “Payment failed”, not “Error”.
With other components
Enable, retry, dismiss
FormAfter submit succeeds
InputField-level errors
SonnerWhen it can fade away
CardSit on a surface
BadgeStatus inside the row
Questions
Related
Was this page helpful?
Sign in to leave feedback.
Accordion
React accordion for FAQ and settings sections. Built with TypeScript and Tailwind CSS for Next.js using Base UI — one or many panels, keyboard navigation.
Alert Dialog
React alert dialog for delete confirms and irreversible choices. Built with TypeScript and Tailwind CSS for Next.js using Base UI — focus trap and a required answer.