Shadcn Alert
React alert component for success messages, errors, and notifications. Built with TypeScript and Tailwind CSS for Next.js with accessibility support.
Alert styling not right?
Join our Discord community for help from other developers.
Ever submitted a form and wondered "Did it work?" for those awkward 3 seconds? Yeah, that silence kills user confidence. This shadcn/ui alert component gives users the instant feedback they crave in your Next.js applications—no more guessing, no more uncertainty.
Success alert
Confirmation when actions complete successfully:
Built with semantic HTML, proper ARIA attributes, and a smart grid layout that adapts to icon presence. Works perfectly with TypeScript and styled with Tailwind CSS classes.
npx shadcn@latest add alertWhy alerts actually work
Here's the thing—good alerts are like a conversation between your app and the user. When someone clicks "Save," their brain immediately asks "What happened?" Your React component better have an answer.
Think about it: without feedback, users start second-guessing themselves. Did the form submit? Should I click again? Is the app broken? That uncertainty creates anxiety, and anxious users don't trust your product.
Alerts solve this by closing the feedback loop instantly. They transform uncertainty into confidence with a simple message: "Account updated successfully" or "Please fix the errors below." No modal interruptions, no page refreshes—just clear, timely communication.
This JavaScript component handles all the accessibility requirements and visual polish. Your job is just to write good messages that actually help people.
Common alert patterns you'll use
Form validation alert
When users mess up form fields—be specific about what needs fixing:
Warning alert
When something needs attention but isn't broken yet:
Error alert
When things actually break—be clear about what went wrong:
Alert with actions
Interactive alerts with Button components for user actions:
Dismissible alert
Alerts that users can close when they've acknowledged the message:
These patterns work across all React applications. Whether you're building with Next.js or vanilla JavaScript, these alert components handle the complex accessibility and styling requirements so you don't have to.
Features
This free open source alert component includes everything you need:
- Semantic HTML structure - Built for screen readers and search engines
- TypeScript native - Full type safety with IntelliSense support
- Tailwind CSS styling - Easy customization with utility classes
- Automatic ARIA attributes - Accessibility handled by default
- Flexible content support - Text, icons, buttons, and custom elements
- Smart grid layout - Adapts to icon presence automatically
- Variant system - Default and destructive styles built-in
API Reference
Alert
The root container that displays the alert message.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "destructive" | "default" | Visual style variant for the alert |
className | string | - | Additional CSS classes for styling |
children | React.ReactNode | - | Alert content (icon, title, description) |
AlertTitle
The heading text for the alert message.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes for styling |
children | React.ReactNode | - | Title text content |
AlertDescription
Additional context or details about the alert.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes for styling |
children | React.ReactNode | - | Description content (text, lists, links) |
Variant Styles
| Variant | Use Case | Appearance |
|---|---|---|
default | Information, success, general messages | Card background with border |
destructive | Errors, warnings, critical notices | Destructive text color |
Layout System
| Feature | Description | Implementation |
|---|---|---|
| Icon detection | Automatically adjusts layout for icons | CSS :has() selector |
| Grid columns | Dynamic column sizing based on content | grid-cols-[calc(var(--spacing)*4)_1fr] |
| Icon sizing | Consistent 16x16px icons | [&>svg]:size-4 |
| Text alignment | Proper alignment with and without icons | CSS Grid positioning |
Production tips
Write like a human, not a robot. This free shadcn/ui component handles the technical stuff, but your message content makes or breaks the user experience. "Settings saved successfully" beats "Operation completed successfully" every time.
Choose variants wisely. Use the destructive variant only for actual errors—not warnings or important info. If users see red alerts for minor issues, they'll start ignoring the really important ones.
Integrate with forms smoothly. Alerts work great with Form validation and Input field feedback. Show success alerts after form submission, error alerts for validation failures.
Consider Toast alternatives. For temporary success messages, toast notifications might be less intrusive than persistent alerts. Use alerts for messages that users need to see and potentially act on.
Test with real screen readers. This open source component announces alerts automatically, but test with VoiceOver or NVDA to make sure your message content makes sense when spoken aloud.
Integration with other components
Alerts work perfectly with Form validation workflows and Button actions throughout your React applications. Use them alongside Card components for structured layouts, or with Badge components to show status indicators within the alert content.
Questions you might have
Shadcn Alert Dialog
React alert dialog for confirmation modals and destructive actions. Built with TypeScript and Tailwind CSS for Next.js applications with focus management.
Shadcn Aspect Ratio
React aspect ratio component for consistent image and video proportions. Built with TypeScript and Tailwind CSS for Next.js applications with responsive design.