Components
- Accordion
- Action Bar
- Alert Dialog
- Alert
- Announcement
- Aspect Ratio
- Autocomplete
- Avatar
- Badge
- Bottom Navigation
- Breadcrumb
- Button Group
- Button
- Calendar
- Card
- Carousel
- Chart
- Checkbox
- Circular Progress
- Circular Slider
- Clipboard
- Collapsible
- Color Picker
- Combobox
- Command
- Context Menu
- Data List
- Date Picker
- Dialog
- Drawer
- Editable
- Field
- File Upload
- Float
- Floating Panel
- Frame
- Hint
- Hover Card
- Image Cropper
- Input Group
- Input OTP
- Input
- Item
- Kbd
- Link Overlay
- Listbox
- Marquee
- Menu
- Native Select
- Number Input
- Pagination
- Popover
- Progress
- Prose
- QR Code
- Radio Group
- Rating
- Resizable
- Scroll Area
- Segment Group
- Select
- Separator
- Sheet
- Sidebar
- Signature Pad
- Skeleton
- Skip Nav
- Slider
- Spinner
- Status
- Steps
- Switch
- Table
- Tabs
- Textarea
- Timer
- Toast
- Toggle Group
- Toggle Tooltip
- Toggle
- Tooltip
- Tour
- Tree View
Heads up!
You can add icons to alerts to provide visual context and improve user experience.
Installation
pnpm dlx shadcn@latest add https://shark.vini.one/r/alert.json
Usage
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
<Alert> <AlertTitle>Heads up!</AlertTitle> <AlertDescription>You can add icons to alerts.</AlertDescription> </Alert>
Variants
The variant prop controls the alert's visual style.
Default
Deployment successful
You can now start building your next great project.
Info
New update available
A new update is available. Check it out now.
Warning
Storage almost full
Your storage is almost full. Consider upgrading your plan to avoid losing data.
Success
Payment successful
Your payment has been processed successfully. You will receive a receipt in your email.
Destructive
Session expired
Your session has expired. Please log in again.
Examples
With icon
Icons can be added to alerts for visual context and improved user experience.
New Feature Available
Icons can be added to alerts to provide visual context and improve user experience.
With action
New update available
Check it out now.
Custom color
Fancy alert, huh?
This is a fancy alert with a custom color.
API Reference
Alert
Root wrapper for alert messages. Supports variants (info, warning, etc.).
| Prop | Type | Default |
|---|---|---|
variant | "default", "info", "warning", "success", "destructive" | "default" |
className | string | - |
asChild | boolean | false |
AlertTitle
Alert title or heading. Bold by default.
| Prop | Type | Default |
|---|---|---|
className | string | - |
asChild | boolean | false |
AlertDescription
Alert body or description. Muted foreground for hierarchy.
| Prop | Type | Default |
|---|---|---|
className | string | - |
asChild | boolean | false |
AlertAction
Holds action buttons (e.g. dismiss, retry).
| Prop | Type | Default |
|---|---|---|
className | string | - |
asChild | boolean | false |