Components
Loading preview...
A styled alert component with variant support (default, info, success, warning, error) and optional action buttons.
npx shadcn@latest add https://21st.dev/r/coss.com/alertimport { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { AlertCircle } from "lucide-react";
export default function AlertError() {
return (
<div className="flex items-center justify-center w-full min-h-screen bg-background p-8">
<div className="w-full max-w-xl">
<Alert variant="error">
<AlertCircle className="size-4" />
<AlertTitle>Heads up!</AlertTitle>
<AlertDescription>
Your trial ended on Oct 18. Update your billing details to continue.
</AlertDescription>
</Alert>
</div>
</div>
);
}