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.

Use Collapsible Alert when a callout also needs expandable detail. Use Collapsible only for generic disclosure behaviour that is not itself an alert.

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/src/components/shadcn/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>

Variants

Use alertVariants when building shared wrappers around the primitive.

import { alertVariants } from 'ui/src/components/shadcn/ui/alert'