AlertDemo() — ui Function Reference

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

Function tsx DocumentationAtlas SearchAPI

Entity Profile

DocumentationAtlas→ SearchAPI→ AlertDemo() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

apps/v4/examples/radix/alert-demo.tsx lines 4–25

export default function AlertDemo() {
  return (
    <div className="grid w-full max-w-md items-start gap-4">
      <Alert>
        <CheckCircle2Icon />
        <AlertTitle>Payment successful</AlertTitle>
        <AlertDescription>
          Your payment of $29.99 has been processed. A receipt has been sent to
          your email address.
        </AlertDescription>
      </Alert>
      <Alert>
        <InfoIcon />
        <AlertTitle>New feature available</AlertTitle>
        <AlertDescription>
          We&apos;ve added dark mode support. You can enable it in your account
          settings.
        </AlertDescription>
      </Alert>
    </div>
  )
}