Nusa UINusa UI

Alert

Previous: AccordionNext: Alert Dialog

Displays a callout for user attention.

registry/examples/alert-demo.tsx
import { Terminal } from "lucide-react"

import { Alert, AlertDescription, AlertTitle } from "@/registry/ui/alert"

Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://nusa-ui.vercel.app/r/alert.json

Usage

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
<Alert>
  <Terminal className="size-4" />
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    You can add components to your app using the CLI.
  </AlertDescription>
</Alert>

Examples

Destructive

registry/examples/alert-destructive.tsx
import { AlertCircle } from "lucide-react"

import { Alert, AlertDescription, AlertTitle } from "@/registry/ui/alert"

API Reference

Alert

ComponentDescription
AlertThe root component
AlertTitleThe alert title
AlertDescriptionThe alert description

Alert Props

PropTypeDefaultDescription
variant"default" | "destructive""default"The alert style variant
AccordionAlert Dialog

On this page

InstallationUsageExamplesDestructiveAPI ReferenceAlertAlert Props