Alert

Usage

import { Alert, AlertDescription, AlertTitle } from '@jamie/ui/alert'
import { InfoIcon } from 'lucide-react'
 
export function AlertDemo() {
  return (
    <Alert className="max-w-lg">
      <InfoIcon />
      <AlertTitle>Transcript ready</AlertTitle>
      <AlertDescription>
        Your meeting transcript for "Q3 Revenue Review" is ready. You can now ask Jamie AI questions
        or share it with your team.
      </AlertDescription>
    </Alert>
  )
}

Destructive

Use the destructive variant to indicate an error or critical warning.

import { Alert, AlertDescription, AlertTitle } from '@jamie/ui/alert'
import { CircleAlertIcon } from 'lucide-react'
 
export function AlertDestructiveDemo() {
  return (
    <Alert variant="destructive" className="max-w-lg">
      <CircleAlertIcon />
      <AlertTitle>Recording failed</AlertTitle>
      <AlertDescription>
        Jamie was unable to record "Weekly Standup". Please check your microphone permissions and
        try again.
      </AlertDescription>
    </Alert>
  )
}

Variants

All available alert variants displayed together for comparison.

import { Alert, AlertDescription, AlertTitle } from '@jamie/ui/alert'
import { CircleAlertIcon, InfoIcon } from 'lucide-react'
 
export function AlertVariantsDemo() {
  return (
    <div className="flex max-w-lg flex-col gap-4">
      <Alert>
        <InfoIcon />
        <AlertTitle>Meeting summary generated</AlertTitle>
        <AlertDescription>
          Jamie has finished summarizing your "Budget Planning" meeting. 3 action items were
          identified.
        </AlertDescription>
      </Alert>
      <Alert variant="destructive">
        <CircleAlertIcon />
        <AlertTitle>Sync error</AlertTitle>
        <AlertDescription>
          Failed to sync meeting notes to your CRM. Please reconnect your Salesforce integration.
        </AlertDescription>
      </Alert>
    </div>
  )
}