Skip to content
Byos
ComponentsDocs
XFigma3.4k
Overview
  • Introduction
  • Get Started
  • Styling
  • Registry
  • Roadmap
Components
  • Alert
  • Autocomplete
  • Badge
  • Cascader
  • Code Block
  • Data GridVirtualization and row pinning support added
  • Date Selector
  • Event Calendar
  • File Upload
  • Filters
  • Frame
  • Gantt
  • Icon Stack
  • Icon Tile
  • Kanban
  • Number Field
  • Phone Input
  • Rating
  • Scrollspy
  • Sortable
  • Stepper
  • Timeline
  • Tree

Product

  • Components
  • Docs

Community

  • GitHub
  • X / Twitter
  • Figma

© 2026 Byos. Released under the MIT License.

3.4k

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 @byosui/alert

Usage

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

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

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.

<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/byosui/alert"

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

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

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