NewReUI Pro is now available! Get 20% off with early bird pricing.View pricing
Overview
  • Introduction
  • Get Started
  • License Setup
  • Styling
  • MCP
  • Registry
  • Roadmap
  • Changelog
  • llms.txt
  • v1 Docs
Components
  • Alert
  • Autocomplete
  • Badge
  • Data GridVirtualization and row pinning support added
  • Date Selector
  • File Upload
  • Filters
  • Frame
  • Shadcn Icon Stack
  • Kanban
  • Number Field
  • Phone Input
  • Rating
  • Scrollspy
  • Sortable
  • Stepper
  • Timeline
  • Tree

Application

  • Authentication
  • Card
  • Chart
  • Data Grid
  • Dialog
  • Browse all

eCommerce

  • Shopping Cart
  • Category Card
  • Checkout
  • Comparison
  • Coupon
  • Browse all

Marketing

  • Blog
  • Comparison Table
  • Contact
  • Content Section
  • CTA
  • Browse all

SaaS

  • Analytics
  • Billing
  • Dashboard
  • Integrations
  • Notifications
  • Browse all

Fintech

  • Accounts
  • Transactions
  • Transfer
  • Cards
  • Investments
  • Browse all

Dev Tools

  • API Console
  • CI/CD
  • Code Editor
  • Debug Panel
  • Documentation
  • Browse all

AI & LLM

  • AI Playground
  • AI Settings
  • Chat Interface
  • Embeddings
  • Evaluation
  • Browse all

Data Visualization

  • Charts
  • Dashboards
  • Heatmaps
  • Maps
  • Metrics
  • Browse all

Resources

  • Components
  • Blocks
  • Docs
  • Help & Contact
  • Pricing
  • RoadmapSoon
  • AffiliateSoon

Legal

  • Privacy Policy
  • Terms & Conditions
  • Licensing
  • Cookies

© 2026 ReUI. All rights reserved.

ComponentsBlocksIconsTemplatesDocsPricing
X
LoginGet All-access
2.5k

Shadcn Alert

Next

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

Base UIRadix UI

Installation

pnpm dlx shadcn@latest add @reui/alert

More Shadcn Alert 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

InstallationUsageExamplesWith IconWith Action ButtonsWith Extended MessageWith Title and Action ButtonsWith Description and Action ButtonsInfo AlertSuccess AlertWarning AlertDestructive AlertInvert AlertAPI ReferenceProps

Usage

import {
  Alert,
  AlertAction,
  AlertDescription,
  AlertTitle,
} from "@/components/reui/alert"
<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

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>
  )
}

With Action Buttons

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>
  )
}

With Extended Message

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>
  )
}

With Title and Action Buttons

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>
  )
}

With Description and Action Buttons

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>
  )
}

Info 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>
  )
}

Success 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>
  )
}

Warning 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>
  )
}

Destructive 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>
  )
}

Invert 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>
  )
}

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.

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

Props

PropType
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>
  )
}