Alert
Heads up!
A simple alert with an “AlertTitle” and an “AlertDescription”.
---import { Alert, AlertDescription, AlertTitle } from "@/components/starwind/alert";---
<Alert variant="info"> <AlertTitle>Heads up!</AlertTitle> <AlertDescription> A simple alert with an "AlertTitle" and an "AlertDescription". </AlertDescription></Alert>Installation
pnpx starwind@latest add alertnpx starwind@latest add alertyarn dlx starwind@latest add alertUsage
icon
You can add any svg icon inside the <AlertTitle> component and it will be automatically styled.
Danger!
This action is destructive and may have unintended consequences.
---import { Alert, AlertDescription, AlertTitle } from "@/components/starwind/alert";import Flame from "@tabler/icons/outline/flame.svg";---
<Alert variant="error"> <AlertTitle><Flame />Danger!</AlertTitle> <AlertDescription> This action is destructive and may have unintended consequences. </AlertDescription></Alert>variant
variant=“default”
A simple alert with an “AlertTitle” and an “AlertDescription”.
variant=“primary”
A simple alert with an “AlertTitle” and an “AlertDescription”.
variant=“secondary”
A simple alert with an “AlertTitle” and an “AlertDescription”.
variant=“info”
A simple alert with an “AlertTitle” and an “AlertDescription”.
variant=“success”
A simple alert with an “AlertTitle” and an “AlertDescription”.
variant=“warning”
A simple alert with an “AlertTitle” and an “AlertDescription”.
variant=“error”
A simple alert with an “AlertTitle” and an “AlertDescription”.
---import { Alert, AlertDescription, AlertTitle } from "@/components/starwind/alert";---
<Alert variant="default"> <AlertTitle>variant="default"</AlertTitle> <AlertDescription> A simple alert with an "AlertTitle" and an "AlertDescription". </AlertDescription></Alert><Alert variant="primary"> <AlertTitle>variant="primary"</AlertTitle> <AlertDescription> A simple alert with an "AlertTitle" and an "AlertDescription". </AlertDescription></Alert><Alert variant="secondary"> <AlertTitle>variant="secondary"</AlertTitle> <AlertDescription> A simple alert with an "AlertTitle" and an "AlertDescription". </AlertDescription></Alert><Alert variant="info"> <AlertTitle>variant="info"</AlertTitle> <AlertDescription> A simple alert with an "AlertTitle" and an "AlertDescription". </AlertDescription></Alert><Alert variant="success"> <AlertTitle>variant="success"</AlertTitle> <AlertDescription> A simple alert with an "AlertTitle" and an "AlertDescription". </AlertDescription></Alert><Alert variant="warning"> <AlertTitle>variant="warning"</AlertTitle> <AlertDescription> A simple alert with an "AlertTitle" and an "AlertDescription". </AlertDescription></Alert><Alert variant="error"> <AlertTitle>variant="error"</AlertTitle> <AlertDescription> A simple alert with an "AlertTitle" and an "AlertDescription". </AlertDescription></Alert>API Reference
Alert
The root component that serves as a container for alert content. It provides styled notification messages with different visual variants.
variant: Sets the visual style of the alert to match different semantic meanings.
| Prop | Type | Default |
|---|---|---|
variant | "default" | "primary" | "secondary" | "info" | "success" | "warning" | "error" | "default" |
The component accepts all standard HTML attributes for <div> elements.
AlertTitle
A component for rendering the alert title with appropriate styling. When an SVG icon is included as a child, it will be automatically styled to match the alert variant.
The component accepts all standard HTML attributes for <h5> elements.
Tip
Adding an SVG icon inside <AlertTitle> will automatically style it to match the current alert variant.
AlertDescription
A component for rendering the alert description with appropriate styling.
The component accepts all standard HTML attributes for <div> elements.
Changelog
v1.1.0
tailwind-variantsnow implemented. This usestailwind-mergeunder the hood to merge Tailwind classes without style conflicts, allowing you to override any existing classes using the “class” prop.