Alert - Reui — ContextQMD

Installation

<CodeTabs> <TabsList> <TabsTrigger value="cli">CLI</TabsTrigger> <TabsTrigger value="manual">Manual</TabsTrigger> </TabsList> <TabsContent value="cli">

bash

npx shadcn@latest add @reui/alert

</TabsContent> <TabsContent value="manual"> <Steps> <Step>

Import the following variables into your CSS file

css

@theme inline {
  --color-destructive-foreground: var(--destructive-foreground);
  --color-info: var(--info);
  --color-info-foreground: var(--info-foreground);
  --color-success: var(--success);
  --color-success-foreground: var(--success-foreground);
  --color-warning: var(--warning);
  --color-warning-foreground: var(--warning-foreground);
  --color-invert: var(--invert);
  --color-invert-foreground: var(--invert-foreground);
}

:root {
  --destructive-foreground: var(--color-red-800);
  --success: var(--color-emerald-500);
  --success-foreground: var(--color-emerald-900);
  --info: var(--color-violet-500);
  --info-foreground: var(--color-violet-900);
  --warning: var(--color-yellow-500);
  --warning-foreground: var(--color-yellow-900);
  --invert: var(--color-zinc-900);
  --invert-foreground: var(--color-zinc-50);
}

.dark {
  --destructive-foreground: var(--color-red-600);
  --success: var(--color-emerald-500);
  --success-foreground: var(--color-emerald-600);
  --info: var(--color-violet-500);
  --info-foreground: var(--color-violet-600);
  --warning: var(--color-yellow-500);
  --warning-foreground: var(--color-yellow-600);
  --invert: var(--color-zinc-700);
  --invert-foreground: var(--color-zinc-50);
}

</Step>

<Step>Copy and paste the following code into your project.</Step>

</Steps> </TabsContent> </CodeTabs>

Usage

tsx

import {
  Alert,
  AlertAction,
  AlertDescription,
  AlertTitle,
} from "@/components/reui/alert"

tsx

<Alert>
  <ShieldCheckIcon />
  <AlertTitle>Security Update</AlertTitle>
  <AlertDescription>Update your password and enable 2FA.</AlertDescription>
  <AlertAction>
    <Button variant="outline" size="xs">
      Dismiss
    </Button>
    <Button size="xs">Update</Button>
  </AlertAction>
</Alert>

Examples

With Icon

With Action Buttons

With Extended Message

With Title and Action Buttons

With Description and Action Buttons

Info Alert

Success Alert

Warning Alert

Destructive Alert

Invert Alert

API Reference

This component follows the same API design as the Alert Component from shadcn/ui. The key difference is that it uses extended color tokens such as --success, --info, --warning and --invert for alert variants instead of utility classes.

This approach enables consistent, reusable state variants across the project without relying on custom Tailwind color utilities.

tsx

<Alert variant="success">
  <AlertTitle>Success</AlertTitle>
  <AlertDescription>This is a success alert</AlertDescription>
</Alert>

Props

Prop	Type
`variant`	`"default" \| "destructive" \| "info" \| "success" \| "warning" \| "invert"`