Components
- Accordion
- Alert
- Alert Dialog
- Aspect Ratio
- Avatar
- Badge
- Breadcrumb
- Button
- Button Group
- Calendar
- Card
- Carousel
- Chart
- Checkbox
- Collapsible
- Combobox
- Command
- Context Menu
- Data Table
- Date Picker
- Dialog
- Drawer
- Dropdown Menu
- Empty
- Field
- Hover Card
- Input
- Input Group
- Input OTP
- Item
- Kbd
- Label
- Menubar
- Native Select
- Navigation Menu
- Pagination
- Popover
- Progress
- Radio Group
- Resizable
- Scroll Area
- Select
- Separator
- Sheet
- Sidebar
- Skeleton
- Slider
- Sonner
- Spinner
- Switch
- Table
- Tabs
- Textarea
- Toggle
- Toggle Group
- Tooltip
- Typography
Payment successful
Your payment of $29.99 has been processed. A receipt has been sent to your email address.
New feature available
We've added dark mode support. You can enable it in your account settings.
import { CheckCircle2Icon, InfoIcon } from "lucide-react";
import {
Alert,
AlertDescription,
AlertTitle,Installation
$ pnpm dlx shadcn@latest add https://shadcn-cssinjs.com/r/alert.json
Usage
import {
Alert,
AlertDescription,
AlertTitle,
} from "@/components/ui/alert/alert";<Alert>
<TerminalIcon />
<AlertTitle>Heads up!</AlertTitle>
<AlertDescription>
You can add components to your app using the CLI.
</AlertDescription>
</Alert>Composition
Use the following composition to build an Alert:
Alert
├── AlertTitle
└── AlertDescriptionExamples
Basic
A simple alert with an icon, title, and description.
Account updated successfully
Your profile information has been saved. Changes will be reflected immediately.
import { CheckCircle2Icon } from "lucide-react";
import {
Alert,
AlertDescription,
AlertTitle,Destructive
Use the destructive variant to indicate an error or a destructive action.
Unable to process your payment.
Please verify your billing information and try again.
import { AlertCircleIcon } from "lucide-react";
import {
Alert,
AlertDescription,
AlertTitle,Action
Add an action to the AlertDescription to let the user respond.
A new version is available.
Update now to get the latest components.
import { RocketIcon } from "lucide-react";
import {
Alert,
AlertDescription,
AlertTitle,Custom Colors
Use utility classes to apply custom colors to the alert.
Your subscription will expire in 3 days.
Renew now to avoid service interruption or upgrade to a paid plan to continue using the service.
import { TriangleAlertIcon } from "lucide-react";
import {
Alert,
AlertDescription,
AlertTitle,RTL
To enable right-to-left support, see the RTL guide.
تم الدفع بنجاح
تمت معالجة دفعتك البالغة 29.99 دولارًا. تم إرسال إيصال إلى عنوان بريدك الإلكتروني.
ميزة جديدة متاحة
لقد أضفنا دعم الوضع الداكن. يمكنك تفعيله في إعدادات حسابك.
"use client";
import { CheckCircle2Icon, InfoIcon } from "lucide-react";
import * as React from "react";
import { useTranslation } from "@/components/language-selector";API Reference
Alert
The Alert component displays a callout for user attention.
| Prop | Type | Default |
|---|---|---|
variant | "default" | "destructive" | "default" |
AlertTitle
The AlertTitle component displays the title of the alert.
| Prop | Type | Default |
|---|---|---|
className | string | - |
AlertDescription
The AlertDescription component displays the description or content of the alert.
| Prop | Type | Default |
|---|---|---|
className | string | - |