Skip to content
DocsSupportPricing
Roadmap (has updates coming soon)XFigma3.5K
Sign inGet ProGet All-Access
Overview
  • Introduction
  • Get Started
  • License Setup
  • Styling
  • Registry
  • MCP Server
  • Embed
  • Agent Skills
  • llms.txt
  • RTL
  • Changelog
MCP Server
  • Claude
  • CodexCodexCodex
  • Cursor
  • Grok
  • Conductor
  • v0
  • Lovable
  • Replit
  • Bolt
  • OpenCode
  • VS Code
  • GitHub Copilot
  • Kilo Code
  • Zed
  • Antigravity
  • WSWindsurf
  • CLCline
  • Gemini CLI
  • AMAmp
  • JBJetBrains Junie
Components
  • Alert
  • Autocomplete
  • Badge
  • Cascader
  • Code Block
  • Data Grid
  • Date Selector
  • Event Calendar
  • File Upload
  • Filters
  • Frame
  • Gantt
  • Icon Stack
  • Icon Tile
  • Kanban
  • Number Field
  • Phone Input
  • Rating
  • Scrollspy
  • Sortable
  • Stepper
  • Timeline
  • Tree

Application

  • App ShellAdded 10 new app shell blocks
  • Auth
  • Card
  • Chart
  • Dashboard
  • Dialog
  • Empty State
  • Event Calendar
  • Flow
  • Form
  • Gantt
  • Kanban Board
  • List
  • Navbar
  • Onboarding
  • Profile
  • Schedule
  • Settings
  • Sheet
  • Stats
  • Timeline
  • Wizard

Solutions

  • Agents
  • AI Ops
  • Analytics
  • Billing
  • Bookings
  • CRM
  • Files
  • Inventory
  • Users

AI & Agents

  • AI Chat
  • Agent Activity

Templates

  • E-commerce
  • SaaS
  • Dashboard
  • Landing
  • All templates

eCommerce

  • Category Card
  • Checkout
  • Comparison
  • Coupon
  • Filter Sidebar
  • Product Card
  • Product Detail
  • Product Grid
  • Receipt
  • Review
  • Shopping Cart
  • Wishlist
  • Shop Hero

Data Grid

  • BaseAdded a rate card Data Grid block with a price breakdown dialog
  • Columns
  • Drag & Drop
  • Editing
  • Expansion
  • Filtering
  • Grouping
  • Virtualization

Marketing

  • Blog
  • CompareNew Compare category with 3 versus section blocks
  • Contact
  • CTAAdded 11 new CTA blocks
  • FAQ
  • Hero
  • How It WorksNew How It Works category with 5 numbered step blocks
  • PricingNew Pricing category with a 4-tier pricing table block

Resources

  • Components
  • Blocks
  • Icons
  • MCP for Agents
  • Docs
  • Support
  • Pricing
  • Roadmap(has updates coming soon)
  • AffiliateSoon

Legal

  • Privacy Policy
  • Terms & Conditions
  • License
  • Refunds
  • Cookies

© 2026 ReUI. All rights reserved.

3.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
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 follow accessible roles from the Radix stack 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
<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>
  )
}