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"
import { AlertTriangle, Info } from "lucide-react"
function Alert5() {
return (
<div className="flex flex-col gap-4 max-w-[500px]">
<Alert>
<Info className="size-4" />
<AlertTitle>You have a new invoice due.</AlertTitle>
<AlertDescription>
Do not miss out on the opportunity to pay your invoice. It's due
in 3 days.
</AlertDescription>
<a
href="#"
className="mt-2.5 inline-flex text-sm font-medium underline"
>
Pay Now
</a>
</Alert>
<Alert variant="destructive">
<AlertTriangle className="size-4" />
<AlertTitle>Something went wrong with your submission.</AlertTitle>
<AlertDescription>
Please check your connection and try again. If the problem persists,
contact support.
</AlertDescription>
<a
href="#"
className="mt-2.5 inline-flex text-sm font-medium text-destructive underline"
>
Retry
</a>
</Alert>
</div>
)
}
export { Alert5 }