组件
成功！您的更改已保存
这是一个带有图标、标题和描述的提示。
这个提示包含标题和图标，没有描述。
无法处理您的付款。
请验证您的账单信息，然后重试。
- 检查您的银行卡详情
- 确保资金充足
- 验证账单地址
import { AlertCircleIcon, CheckCircle2Icon, PopcornIcon } from "lucide-react"
import {
Alert,
AlertDescription,
AlertTitle,
} from "@/components/ui/alert"
export function AlertDemo() {
return (
<div className="grid w-full max-w-xl items-start gap-4">
<Alert>
<CheckCircle2Icon />
<AlertTitle>Success! Your changes have been saved</AlertTitle>
<AlertDescription>
This is an alert with icon, title and description.
</AlertDescription>
</Alert>
<Alert>
<PopcornIcon />
<AlertTitle>
This Alert has a title and an icon. No description.
</AlertTitle>
</Alert>
<Alert variant="destructive">
<AlertCircleIcon />
<AlertTitle>Unable to process your payment.</AlertTitle>
<AlertDescription>
<p>Please verify your billing information and try again.</p>
<ul className="list-inside list-disc text-sm">
<li>Check your card details</li>
<li>Ensure sufficient funds</li>
<li>Verify billing address</li>
</ul>
</AlertDescription>
</Alert>
</div>
)
}
安装
pnpm dlx shadcn@latest add alert
用法
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>