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

---

title: Alert description: A component for displaying important messages to users.

<ComponentPreview name="alert-demo" />

Installation

<InstallationTabs> <InstallationTabsList> <InstallationTabsTrigger value="cli">CLI</InstallationTabsTrigger> <InstallationTabsTrigger value="manual">Manual</InstallationTabsTrigger> </InstallationTabsList> <InstallationTabsContent value="cli"> <CodeBlockTabs> <CodeBlockTabsList> <CodeBlockTabsTrigger value="npm">npm</CodeBlockTabsTrigger> <CodeBlockTabsTrigger value="pnpm">pnpm</CodeBlockTabsTrigger> </CodeBlockTabsList> <CodeBlockTab value="npm">

npx shadcn@latest add @roiui/alert

npx shadcn@latest add @roiui/alert-tailwind

</CodeBlockTab> <CodeBlockTab value="pnpm">

pnpm dlx shadcn@latest add @roiui/alert

pnpm dlx shadcn@latest add @roiui/alert-tailwind

</CodeBlockTab> </CodeBlockTabs> </InstallationTabsContent> <InstallationTabsContent value="manual" data-manual="true">

Copy and paste the following files:

<ComponentSource name="alert" />

</InstallationTabsContent> </InstallationTabs>

Anatomy

<CodeBlock filename="anatomy" language="tsx" code={<Alert> <AlertTitle /> <AlertDescription /> </Alert> } />

Examples

Destructive

<ComponentPreview name="alert-destructive" />

Warning

<ComponentPreview name="alert-warning" />

Success

<ComponentPreview name="alert-success" />

Info

<ComponentPreview name="alert-info" />

Props

Alert

<PropTable data={[ { prop: "variant", type: '"default" | "destructive" | "warning" | "success" | "info"', default: '"default"', description: "The visual style variant of the alert", }, { prop: "size", type: '"default" | "sm"', default: '"default"', description: "The size of the alert", }, { prop: "className", type: "string", description: "Additional CSS classes to apply to the alert", }, { prop: "children", type: "ReactNode", description: "The content to display inside the alert", }, ]} />

Title

<PropTable data={[ { prop: "className", type: "string", description: "Additional CSS classes to apply to the alert title", }, { prop: "children", type: "ReactNode", description: "The title content", }, ]} />

Description

<PropTable data={[ { prop: "className", type: "string", description: "Additional CSS classes to apply to the alert description", }, { prop: "children", type: "ReactNode", description: "The description content", }, ]} />

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