Alert Components
Sleek alert components with neon effects for user feedback, notifications, and status messages. Copy and paste into your project.
Neon Alerts
Electric alerts with glowing neon effects in multiple vibrant colors for enhanced visual feedback
Information
This is a cyan neon alert with important information for the user.
Announcement
This is a purple neon alert highlighting a special announcement.
Success!
Your action was completed successfully with chartreuse styling.
Warning
This is a pink neon alert indicating a potential issue.
Basic Alerts
Standard alert variants for everyday use with clean styling and clear messaging
Default Alert
This is a standard alert with default styling for general notifications.
Simple Message
A basic alert without a close button.
An alert with just a description and no title.
Custom Content
This alert includes custom content below the description.
Status & Feedback Alerts
Alert states for success, error, warning, and info feedback with appropriate icons and colors
Success
Your changes have been saved successfully!
Error
There was an error processing your request. Please try again.
Warning
This action cannot be undone. Please proceed with caution.
Information
Here's some important information you should know.
Completed
All tasks have been completed successfully.
Attention Required
Please review the following items before proceeding.
Alert Sizes
Different sizes to fit various design contexts and layout requirements
Small (sm)
Small Alert
This is a small alert with compact spacing.
Default
Default Alert
This is a default size alert with standard spacing.
Large (lg)
Large Alert
This is a large alert with generous spacing for better readability.
Long Content Example
Important Security Notice
Your account security is our top priority. We've detected unusual login activity from a new device. For your protection, we've sent a verification code to your registered email address.
Recommended Actions:
- Verify the login attempt using the code sent to your email
- Review your recent account activity
- Update your password if you suspect unauthorized access
Installation
Install required dependencies:
npm install framer-motion clsx tailwind-merge lucide-reactImport the component: import { Alert } from "@/components/alert"
If you use icons, also install and import them: import { AlertCircle } from "lucide-react"
Ensure the cn utility exists. See complete installation guide.