AlertDemo() — ui Function Reference

Architecture documentation for the AlertDemo() function in alert-demo.tsx from the ui codebase.

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ AlertDemo() — ui Function Reference

Dependency Diagram

graph TD
  1c9e0b5b_f5bf_61e0_e919_f5673e165d1e["AlertDemo()"]
  755d651b_40c5_f9f1_dc31_05752383bc22["alert-demo.tsx"]
  1c9e0b5b_f5bf_61e0_e919_f5673e165d1e -->|defined in| 755d651b_40c5_f9f1_dc31_05752383bc22
  style 1c9e0b5b_f5bf_61e0_e919_f5673e165d1e fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/new-york-v4/examples/alert-demo.tsx lines 9–39

export default function AlertDemo() {
  return (
    <div className="grid w-full max-w-xl items-start gap-4">
      <Alert>
        <CheckCircle2Icon />
        <AlertTitle>Success! Your changes have been saved</AlertTitle>
        <AlertDescription>
          This is an alert with icon, title and description.
        </AlertDescription>
      </Alert>
      <Alert>
        <PopcornIcon />
        <AlertTitle>
          This Alert has a title and an icon. No description.
        </AlertTitle>
      </Alert>
      <Alert variant="destructive">
        <AlertCircleIcon />
        <AlertTitle>Unable to process your payment.</AlertTitle>
        <AlertDescription>
          <p>Please verify your billing information and try again.</p>
          <ul className="list-inside list-disc text-sm">
            <li>Check your card details</li>
            <li>Ensure sufficient funds</li>
            <li>Verify billing address</li>
          </ul>
        </AlertDescription>
      </Alert>
    </div>
  )
}