- Accordion
- Alert Dialog
- Alert
- Aspect Ratio
- Avatar
- Badge
- Breadcrumb
- Button
- Calendar
- Card
- Carousel
- Chart
- Checkbox
- Collapsible
- Combobox
- Command
- Data Table
- Date Picker
- Dialog
- Drawer
- Dropdown Menu
- Input
- Label
- Navigation Menu
- Pagination
- Popover
- Progress
- Radio Group
- Scroll-area
- Select
- Separator
- Sheet
- Sidebar
- Skeleton
- Slider
- Sonner
- Switch
- Table
- Tabs
- Textarea
- Toggle Group
- Toggle
- Tooltip
- Typography
Component alert-default not found in registry.
Component alert-error not found in registry.
Component alert-info not found in registry.
Component alert-success not found in registry.
Component alert-warning not found in registry.
Component alert-size not found in registry.
Component alert-01 not found in registry.
Component alert-02 not found in registry.
Installation
pnpm dlx shadcn@latest add alert
Usage
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"<Alert variant="default | destructive">
<Terminal />
<AlertTitle>Heads up!</AlertTitle>
<AlertDescription>
You can add components and dependencies to your app using the cli.
</AlertDescription>
</Alert>API Reference
Alert
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "destructive" | "success" | "warning" | "info" | "default" | Controls the color scheme and intent of the alert. |
size | "sm" | "md" | "lg" | "md" | Adjusts padding, text size, and icon sizing. |
className | string | — | Additional CSS classes to style the alert. |
...props | React.ComponentProps<"div"> | — | All native div element props. |
AlertTitle
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes for the title. |
...props | React.ComponentProps<"div"> | — | All native div element props. |
AlertDescription
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes for the description. |
...props | React.ComponentProps<"div"> | — | All native div element props. |