Alert

Payment successful

Your payment of $29.99 has been processed. A receipt has been sent to your email address.

New feature available

We've added dark mode support. You can enable it in your account settings.

import {
  Alert,
  AlertDescription,
  AlertTitle
} from "uilab-core"

Usage

import {
  Alert,
  AlertDescription,
  AlertTitle
} from "uilab-core"

<Alert>
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    You can add components and dependencies to your app using the cli.
  </AlertDescription>
</Alert>

Examples

Basic

A basic alert with an icon, title and description.

Heads up!

You can add components and dependencies to your app using the cli.

import { Alert, AlertDescription, AlertTitle } from "uilab-core"
import { InfoIcon } from "lucide-react"

export function AlertBasicExample() {
  return (

Destructive

Use variant="destructive" to create a destructive alert.

Payment failed

Your payment could not be processed. Please check your payment method and try again.

import { Alert, AlertDescription, AlertTitle } from "uilab-core"
import { AlertCircleIcon } from "lucide-react"

export function AlertDestructiveExample() {
  return (

Action

Use AlertAction to add a button or other action element to the alert.

Dark mode is now available

Enable it under your profile settings to get started.

import {
  Alert,
  AlertAction,
  AlertDescription,
  AlertTitle,

Custom color

You can customize the alert colors by adding custom classes such as bg-amber-50 dark:bg-amber-950 to the Alert component.

Your subscription will expire in 3 days.

Renew now to avoid service interruption or upgrade to a paid plan to continue using the service.

import { Alert, AlertDescription, AlertTitle } from "uilab-core"
import { AlertTriangleIcon } from "lucide-react"

export function AlertCustomColorsExample() {
  return (

Alert

UsageCopy Anchor Link

ExamplesCopy Anchor Link

BasicCopy Anchor Link

DestructiveCopy Anchor Link

ActionCopy Anchor Link