║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Alert description: Notify your users about important events and updates. 📣 lastUpdated: 24 Oct, 2024 links: source: https://github.com/Logging-Stuff/RetroUI/blob/main/components/retroui/Alert.tsx

<ComponentShowcase name="alert-style-default" /> <br /> <br /> <ComponentInstall> <ComponentInstall.Cli npmCommand="npx shadcn@latest add @retroui/alert" /> <ComponentInstall.Manual> #### 1. Install dependencies:

npm install class-variance-authority

<br />

2. Copy the code 👇 into your project:

<ComponentSource name="alert" />

</ComponentInstall.Manual> </ComponentInstall>

<br /> <br />

Examples

Default

<ComponentShowcase name="alert-style-default" /> <br /> <br />

Solid

<ComponentShowcase name="alert-style-solid" /> <br /> <br />

With Icon

<ComponentShowcase name="alert-style-with-icon" /> <br /> <br />

Status

<ComponentShowcase name="alert-style-all-status" />

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║