Alert

Alert is the low-level shadcn primitive that forms the foundation for Admonition. Use Admonition for product callouts unless you need custom composition that the Admonition API does not support.

Examples where Alert may be appropriate include bespoke icons, custom internal layouts, or wrapper components that need direct access to alertVariants.

Compose Alert with Collapsible when a callout needs expandable detail. Use DialogDisclosure for optional details in a dialog.

import { Terminal } from 'lucide-react'
import { Alert, AlertDescription, AlertTitle } from 'ui'
 
export function AlertDemo() {
  return (
    <Alert>
      <Terminal size={16} />
      <AlertTitle>Heads up!</AlertTitle>
      <AlertDescription>You can also add components to your app using the CLI.</AlertDescription>
    </Alert>
  )
}

Usage

import { Alert, AlertDescription, AlertTitle } from 'ui'

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

Variants

Use alertVariants when building shared wrappers around the primitive.

import { alertVariants } from 'ui'