Shadcn Alert

Custom Shadcn Alert for React and Tailwind CSS. Displays a callout for user attention, such as a success message, warning, or error.

Base UI Radix UI

Installation


pnpm dlx shadcn@latest add @reui/alert

Usage

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

Shadcn Alert Free Components

Browse 20 production-ready Shadcn Alert components for success, warning, destructive, and inline actions. Alerts use Base UI primitives and composable components, and stay fully compatible with Shadcn Create so radius, color, and typography match your configured theme.

Browse all 20 Shadcn Alert components for copy-ready layouts, dashboards, and forms built with Tailwind CSS in the ReUI library.

Autocomplete

On This Page

Installation Usage 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 Props

import {
  Alert,
  AlertDescription,
  AlertTitle,
} from "@/components/reui/alert"
import { CircleCheckIcon } from 'lucide-react'

export function Pattern() {
  return (
    <Alert>
      <CircleCheckIcon />
      <AlertTitle>Alert!</AlertTitle>
      <AlertDescription>
        This is an alert with icon, title and description.
      </AlertDescription>
    </Alert>
  )
}

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

import { Button } from "@/components/ui/button"
import { ShieldCheckIcon } from 'lucide-react'

export function Pattern() {
  return (
    <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>
  )
}

import {
  Alert,
  AlertDescription,
  AlertTitle,
} from "@/components/reui/alert"
import { CircleAlertIcon } from 'lucide-react'

export function Pattern() {
  return (
    <Alert variant="destructive">
      <CircleAlertIcon />
      <AlertTitle>Payment Failed</AlertTitle>
      <AlertDescription>
        <p>Please check your payment details:</p>
        <ul className="mt-1 list-inside list-disc space-y-0.5 text-sm">
          <li>Card number and expiry</li>
          <li>Billing address</li>
          <li>Available funds</li>
        </ul>
      </AlertDescription>
    </Alert>
  )
}

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

import { Button } from "@/components/ui/button"
import { ShieldCheckIcon } from 'lucide-react'

export function Pattern() {
  return (
    <Alert>
      <ShieldCheckIcon />
      <AlertTitle>Update your password and enable 2FA.</AlertTitle>
      <AlertAction>
        <Button variant="outline" size="xs">
          Dismiss
        </Button>
        <Button size="xs">Update</Button>
      </AlertAction>
    </Alert>
  )
}

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

import { Button } from "@/components/ui/button"
import { ShieldCheckIcon } from 'lucide-react'

export function Pattern() {
  return (
    <Alert>
      <ShieldCheckIcon />
      <AlertDescription>Update your password and enable 2FA.</AlertDescription>
      <AlertAction>
        <Button variant="outline" size="xs">
          Dismiss
        </Button>
        <Button size="xs">Update</Button>
      </AlertAction>
    </Alert>
  )
}

import {
  Alert,
  AlertDescription,
  AlertTitle,
} from "@/components/reui/alert"
import { CircleAlertIcon } from 'lucide-react'

export function Pattern() {
  return (
    <Alert variant="info">
      <CircleAlertIcon />
      <AlertTitle>Info! Something important</AlertTitle>
      <AlertDescription>
        This is an important message. Please read it carefully.
      </AlertDescription>
    </Alert>
  )
}

import {
  Alert,
  AlertDescription,
  AlertTitle,
} from "@/components/reui/alert"
import { CircleCheckIcon } from 'lucide-react'

export function Pattern() {
  return (
    <Alert variant="success">
      <CircleCheckIcon />
      <AlertTitle>Success! All good</AlertTitle>
      <AlertDescription>
        Everything is working as expected. You can continue with your task.
      </AlertDescription>
    </Alert>
  )
}

import {
  Alert,
  AlertDescription,
  AlertTitle,
} from "@/components/reui/alert"
import { AlertTriangleIcon } from 'lucide-react'

export function Pattern() {
  return (
    <Alert variant="warning">
      <AlertTriangleIcon />
      <AlertTitle>Warning! Something is wrong</AlertTitle>
      <AlertDescription>
        Please check your settings. If the problem persists, contact support.
      </AlertDescription>
    </Alert>
  )
}

import {
  Alert,
  AlertDescription,
  AlertTitle,
} from "@/components/reui/alert"
import { CircleAlertIcon } from 'lucide-react'

export function Pattern() {
  return (
    <Alert variant="destructive">
      <CircleAlertIcon />
      <AlertTitle>Error! Something went wrong</AlertTitle>
      <AlertDescription>
        Please try again. If the problem persists, contact support.
      </AlertDescription>
    </Alert>
  )
}

import {
  Alert,
  AlertDescription,
  AlertTitle,
} from "@/components/reui/alert"
import { CircleAlertIcon } from 'lucide-react'

export function Pattern() {
  return (
    <Alert variant="invert">
      <CircleAlertIcon  className="text-success" />
      <AlertTitle>Notification! All good</AlertTitle>
      <AlertDescription>
        This is a notification alert with a title and description.
      </AlertDescription>
    </Alert>
  )
}

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

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

export function Pattern() {
  return (
    <Alert>
      <AlertTitle>Alert!</AlertTitle>
      <AlertDescription>
        This is an alert with a title and description.
      </AlertDescription>
    </Alert>
  )
}