Components
- Accordion
- Alert Dialog
- Alert
- Autocomplete
- Avatar
- Badge
- Button Group
- Button
- Card
- Carousel
- Chart
- Checkbox
- Clipboard
- Collapsible
- Combobox
- Command
- Context Menu
- Date Picker
- Dialog
- Editable
- Field
- File Upload
- Floating Panel
- Hover Card
- Input Group
- Input OTP
- Input
- Item
- Kbd
- Marquee
- Menu
- Native Select
- Number Input
- Pagination
- Popover
- Progress
- QR Code
- Radio Group
- Rating Group
- Scroll Area
- Select
- Separator
- Sheet
- Skeleton
- Slider
- Spinner
- Splitter
- Steps
- Switch
- Table
- Tabs
- Textarea
- Toast
- Toggle Group
- 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 @shark-ui/alert
Basic usage
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
<Alert> <AlertTitle>Alert</AlertTitle> <AlertDescription>This is an alert</AlertDescription> </Alert>
Variants
You can change the variant of the alert using the variant prop.
Solid
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
You can add icons to alerts to provide visual context and improve user experience.
New Feature Available
Icons can be added to alerts to provide visual context and improve user experience.
Custom color
You can use the className prop to customize the alert colors to match your design system.
Fancy alert, huh?
This is a fancy alert with a custom color.
With action buttons
New update available
A new update is available. Check it out now.
API Reference
Alert
Root element of the alert. Renders a div
| Prop | Type | Default |
|---|---|---|
variant | "solid", "info", "warning", "success", "destructive" | "solid" |
className | string | - |
AlertTitle
Styled title of the alert. Renders a div
| Prop | Type | Default |
|---|---|---|
className | string | - |
AlertDescription
Styled description with muted foreground text color. Renders a div
| Prop | Type | Default |
|---|---|---|
className | string | - |
AlertAction
Container for action buttons. Renders a div
| Prop | Type | Default |
|---|---|---|
className | string | - |