Components
- Accordion
- Action BarUpdated
- Alert Dialog
- Alert
- Announcement
- Aspect Ratio
- Autocomplete
- Avatar
- BadgeUpdated
- Bottom Navigation
- Breadcrumb
- Button Group
- Button
- CalendarUpdated
- CardUpdated
- Carousel
- Chart
- Checkbox
- Circular Progress
- Circular Slider
- Clipboard
- Collapsible
- Color Picker
- Combobox
- Command
- Context MenuUpdated
- Data List
- Date Picker
- DialogUpdated
- DrawerUpdated
- Editable
- FieldUpdated
- File Upload
- Float
- Floating Panel
- Frame
- Hint
- Hover Card
- Image Cropper
- Input Group
- Input OTP
- Input
- Item
- Kbd
- Link Overlay
- Listbox
- MarqueeUpdated
- Menu
- Native Select
- Number InputUpdated
- 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
- TableUpdated
- Tabs
- Textarea
- TimerUpdated
- ToastUpdated
- Toggle Group
- Toggle Tooltip
- Toggle
- Tooltip
- Tour
- Tree View
Hooks
Alert
Displays an alert for user attention.
Heads up!
You can add icons to alerts to provide visual context and improve user experience.
Installation#
pnpm dlx shadcn@latest add @shark/alert
Anatomy#
Alert ├── Icon ├── AlertTitle ├── AlertDescription └── AlertAction
Usage#
import { Alert, AlertTitle, AlertDescription, AlertAction, } from "@/components/ui/alert";
<Alert> <AlertTitle>Heads up!</AlertTitle> <AlertDescription>You can add icons to alerts.</AlertDescription> <AlertAction> <Button size="xs" variant="ghost">Dismiss</Button> <Button size="xs">Update</Button> </AlertAction> </Alert>
Variants#
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#
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 component.
| Prop | Type | Default |
|---|---|---|
variant | "default" | "info" | "warning" | "success" | "destructive" | "default" |
className | string | - |
asChild | boolean | false |
AlertTitle#
Title text.
| Prop | Type | Default |
|---|---|---|
className | string | - |
asChild | boolean | false |
AlertDescription#
Description text.
| Prop | Type | Default |
|---|---|---|
className | string | - |
asChild | boolean | false |
AlertAction#
Container for action buttons. Automatically positioned to the right on larger screens.
| Prop | Type | Default |
|---|---|---|
className | string | - |
asChild | boolean | false |