Docs
Alert

Alert

Displays a callout for user attention.

This component uses Radix UI

Alert forms the core primitives for Admonition. Use the Admonition component unless you must deviate from our consistent patterns. Examples where Alert might make sense include:

  • Bespoke icon requirement
  • Highly custom internal contents
Loading...
import { Terminal } from 'lucide-react'
import { Alert_Shadcn_, AlertDescription_Shadcn_, AlertTitle_Shadcn_ } from 'ui'
 
export function AlertDemo() {
  return (
    <Alert_Shadcn_>
      <Terminal size={16} />
      <AlertTitle_Shadcn_>Heads up!</AlertTitle_Shadcn_>
      <AlertDescription_Shadcn_>
        You can also add components to your app using the CLI.
      </AlertDescription_Shadcn_>
    </Alert_Shadcn_>
  )
}

Installation

npx shadcn-ui@latest add alert

Usage

import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
<Alert>
  <Terminal className="h-4 w-4" />
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    You can add components and dependencies to your app using the cli.
  </AlertDescription>
</Alert>
PreviousAccordion
NextAlert Dialog