A styled alert component with variant support (default, info, success, warning, error) and optional action buttons.
import { 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> ); }
Part of coss — browse the full library on 21st.dev.