Docs
Alert

Alert

Displays a callout for user attention.

This component uses Radix UI

The primitive component that forms Admonition. Do not use this component unless you are intentionally deviating from our consistent callout pattern.

Loading...
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

Loading...

Destructive

Loading...
PreviousAccordion
NextAlert Dialog