Docs
Alert

Alert

Displays a callout for user attention.

This component uses Radix UI
import { Terminal } from 'lucide-react'
 
import { Alert_Shadcn_, AlertDescription_Shadcn_, AlertTitle_Shadcn_ } from 'ui'
 
export function AlertDemo() {
  return (
    <Alert_Shadcn_>
      <Terminal className="h-4 w-4" />
      <AlertTitle_Shadcn_>Heads up!</AlertTitle_Shadcn_>
      <AlertDescription_Shadcn_>
        You can 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>

Examples

Default

Destructive

PreviousAccordion
NextAlert Dialog