Components
Loading preview...
Displays a callout for user attention.
npx shadcn@latest add https://21st.dev/r/shadcn/alertimport { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
function Alert2() {
return (
<div className="flex flex-col gap-4 max-w-[500px]">
<Alert>
<AlertTitle>You have a new invoice due.</AlertTitle>
<AlertDescription>
This is the alert description that shows some information.
</AlertDescription>
</Alert>
<Alert variant="destructive">
<AlertTitle>Something went wrong with your submission.</AlertTitle>
<AlertDescription>
Please check your connection and try again. If the problem persists,
contact support.
</AlertDescription>
</Alert>
</div>
);
}
export { Alert2 }