Alerts
Alert components and inline feedback banners.
Alerts
Alerts provide contextual feedback messages for user actions, displaying system states, warnings, validations, or calls to action.
Interactive Showcase
Browse all the interactive alert designs and variants included in Synapse UI.
Synapse UI
Use the CLI to install this!
AI Response
AIHere's a suggestion based on your query:
const greeting = 'Hello, World!';Item deleted
The selected item has been moved to trash.
Delete project?
This action cannot be undone. All data associated with this project will be permanently removed.
New notification
You have a new message from the team.
System update available
2m agoA new version is ready to install.
Quick Settings
Push notifications
Receive alerts on your device
Sound effects
Play sounds for interactions
Operation successful
Your changes have been saved and applied.
npm install synapse-uiadded 42 packages in 2.3sWe've just released a new feature! Check out our improved dashboard.
Success
Your action was completed successfully.
Report Generated
Your monthly analytics report is ready for download.
Weekly Performance
Revenue
$12.4K
Users
2,340
Bounce Rate
24%
Update Available
v2.4.0This update includes performance improvements, bug fixes, and new collaboration features.
Current: v2.3.1 → New: v2.4.0
Recent Activity
Sarah commented on Design Review
2m ago
Mike merged PR #234
15m ago
Emma completed Dashboard UI
1h ago
Get Started
Complete these steps to unlock all features.
Pro Plan
Renews in 7 days on April 15, 2024
Next payment
$29/month
Payment method
•••• 4242
Security Alert
Recent account activity
New login detected
Just nowChrome on MacOS • San Francisco, CA
New device added
2 hours agoiPhone 15 Pro
Recovery email updated
Yesterdayj***@example.com
Wasn't you?
Team Collaboration
Manage who has access to this project.
Alex Chen
alex@company.com
Sarah Kim
sarah@company.com
Mike Johnson
mike@company.com
3 team members • 2 online
Installation
Install any of the alert components directly into your project via the CLI:
# Install Alert 01 (Simple Banner Alert)
npx shadcn@latest add http://localhost:3000/r/alert-01.json
# Install Alert 02 (Alert with Action Buttons)
npx shadcn@latest add http://localhost:3000/r/alert-02.json
# Install Alert 06 (Collapsible Info Alert)
npx shadcn@latest add http://localhost:3000/r/alert-06.jsonUsage Examples
Here are some common ways to use alert components to display contextual state banners:
1. Alert with Action Links
An alert box displaying warning information along with primary action buttons:
import { Alert } from "@/components/ui/alert-02";
export default function SecurityWarning() {
return (
<Alert
title="Security Update Needed"
description="We've detected that your profile lacks two-factor authentication. Protect your account now."
confirmLabel="Enable 2FA"
onConfirm={() => console.log("Enable 2FA Clicked")}
/>
);
}