snapshot of https://github.com/shadcn-ui/ui.git (main, 2026-09-15; blobs > 131072B omitted)

apps/v4/registry/bases/radix/examples/alert-example.tsx

@@ -0,0 +1,325 @@
+import {
+  Example,
+  ExampleWrapper,
+} from "@/registry/bases/radix/components/example"
+import {
+  Alert,
+  AlertAction,
+  AlertDescription,
+  AlertTitle,
+} from "@/registry/bases/radix/ui/alert"
+import { Badge } from "@/registry/bases/radix/ui/badge"
+import { Button } from "@/registry/bases/radix/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/bases/radix/ui/card"
+import { Field, FieldGroup, FieldLabel } from "@/registry/bases/radix/ui/field"
+import { Input } from "@/registry/bases/radix/ui/input"
+import {
+  Item,
+  ItemContent,
+  ItemDescription,
+  ItemMedia,
+  ItemTitle,
+} from "@/registry/bases/radix/ui/item"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/bases/radix/ui/select"
+import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
+
+export default function AlertExample() {
+  return (
+    <ExampleWrapper className="lg:grid-cols-1">
+      <AlertExample1 />
+      <AlertExample2 />
+      <AlertExample3 />
+      <AlertExample4 />
+      <AlertExample5 />
+    </ExampleWrapper>
+  )
+}
+
+function AlertExample1() {
+  return (
+    <Example title="Basic" className="style-sera:bg-transparent">
+      <div className="mx-auto flex w-full max-w-lg flex-col gap-4">
+        <Alert>
+          <AlertTitle>Success! Your changes have been saved.</AlertTitle>
+        </Alert>
+        <Alert>
+          <AlertTitle>Success! Your changes have been saved.</AlertTitle>
+          <AlertDescription>
+            This is an alert with title and description.
+          </AlertDescription>
+        </Alert>
+        <Alert>
+          <AlertDescription>
+            This one has a description only. No title. No icon.
+          </AlertDescription>
+        </Alert>
+      </div>
+    </Example>
+  )
+}
+
+function AlertExample2() {
+  return (
+    <Example title="With Icons" className="style-sera:bg-transparent">
+      <div className="mx-auto flex w-full max-w-lg flex-col gap-4">
+        <Alert>
+          <IconPlaceholder
+            lucide="CircleAlertIcon"
+            tabler="IconExclamationCircle"
+            hugeicons="AlertCircleIcon"
+            phosphor="WarningCircleIcon"
+            remixicon="RiErrorWarningLine"
+          />
+          <AlertTitle>
+            Let&apos;s try one with icon, title and a <a href="#">link</a>.
+          </AlertTitle>
+        </Alert>
+        <Alert>
+          <IconPlaceholder
+            lucide="CircleAlertIcon"
+            tabler="IconExclamationCircle"
+            hugeicons="AlertCircleIcon"
+            phosphor="WarningCircleIcon"
+            remixicon="RiErrorWarningLine"
+          />
+          <AlertDescription>
+            This one has an icon and a description only. No title.{" "}
+            <a href="#">But it has a link</a> and a <a href="#">second link</a>.
+          </AlertDescription>
+        </Alert>
+
+        <Alert>
+          <IconPlaceholder
+            lucide="CircleAlertIcon"
+            tabler="IconExclamationCircle"
+            hugeicons="AlertCircleIcon"
+            phosphor="WarningCircleIcon"
+            remixicon="RiErrorWarningLine"
+          />
+          <AlertTitle>Success! Your changes have been saved</AlertTitle>
+          <AlertDescription>
+            This is an alert with icon, title and description.
+          </AlertDescription>
+        </Alert>
+        <Alert>
+          <IconPlaceholder
+            lucide="CircleAlertIcon"
+            tabler="IconExclamationCircle"
+            hugeicons="AlertCircleIcon"
+            phosphor="WarningCircleIcon"
+            remixicon="RiErrorWarningLine"
+          />
+          <AlertTitle>
+            This is a very long alert title that demonstrates how the component
+            handles extended text content and potentially wraps across multiple
+            lines
+          </AlertTitle>
+        </Alert>
+        <Alert>
+          <IconPlaceholder
+            lucide="CircleAlertIcon"
+            tabler="IconExclamationCircle"
+            hugeicons="AlertCircleIcon"
+            phosphor="WarningCircleIcon"
+            remixicon="RiErrorWarningLine"
+          />
+          <AlertDescription>
+            This is a very long alert description that demonstrates how the
+            component handles extended text content and potentially wraps across
+            multiple lines
+          </AlertDescription>
+        </Alert>
+        <Alert>
+          <IconPlaceholder
+            lucide="CircleAlertIcon"
+            tabler="IconExclamationCircle"
+            hugeicons="AlertCircleIcon"
+            phosphor="WarningCircleIcon"
+            remixicon="RiErrorWarningLine"
+          />
+          <AlertTitle>
+            This is an extremely long alert title that spans multiple lines to
+            demonstrate how the component handles very lengthy headings while
+            maintaining readability and proper text wrapping behavior
+          </AlertTitle>
+          <AlertDescription>
+            This is an equally long description that contains detailed
+            information about the alert. It shows how the component can
+            accommodate extensive content while preserving proper spacing,
+            alignment, and readability across different screen sizes and
+            viewport widths. This helps ensure the user experience remains
+            consistent regardless of the content length.
+          </AlertDescription>
+        </Alert>
+      </div>
+    </Example>
+  )
+}
+
+function AlertExample3() {
+  return (
+    <Example title="Destructive" className="style-sera:bg-transparent">
+      <div className="mx-auto flex w-full max-w-lg flex-col gap-4">
+        <Alert variant="destructive">
+          <IconPlaceholder
+            lucide="CircleAlertIcon"
+            tabler="IconExclamationCircle"
+            hugeicons="AlertCircleIcon"
+            phosphor="WarningCircleIcon"
+            remixicon="RiErrorWarningLine"
+          />
+          <AlertTitle>Something went wrong!</AlertTitle>
+          <AlertDescription>
+            Your session has expired. Please log in again.
+          </AlertDescription>
+        </Alert>
+        <Alert variant="destructive">
+          <IconPlaceholder
+            lucide="CircleAlertIcon"
+            tabler="IconExclamationCircle"
+            hugeicons="AlertCircleIcon"
+            phosphor="WarningCircleIcon"
+            remixicon="RiErrorWarningLine"
+          />
+          <AlertTitle>Unable to process your payment.</AlertTitle>
+          <AlertDescription>
+            <p>
+              Please verify your <a href="#">billing information</a> and try
+              again.
+            </p>
+            <ul className="list-inside list-disc">
+              <li>Check your card details</li>
+              <li>Ensure sufficient funds</li>
+              <li>Verify billing address</li>
+            </ul>
+          </AlertDescription>
+        </Alert>
+      </div>
+    </Example>
+  )
+}
+
+function AlertExample4() {
+  return (
+    <Example title="With Actions" className="style-sera:bg-transparent">
+      <div className="mx-auto flex w-full max-w-lg flex-col gap-4">
+        <Alert>
+          <IconPlaceholder
+            lucide="CircleAlertIcon"
+            tabler="IconExclamationCircle"
+            hugeicons="AlertCircleIcon"
+            phosphor="WarningCircleIcon"
+            remixicon="RiErrorWarningLine"
+          />
+          <AlertTitle>The selected emails have been marked as spam.</AlertTitle>
+          <AlertAction>
+            <Button size="xs">Undo</Button>
+          </AlertAction>
+        </Alert>
+        <Alert>
+          <IconPlaceholder
+            lucide="CircleAlertIcon"
+            tabler="IconExclamationCircle"
+            hugeicons="AlertCircleIcon"
+            phosphor="WarningCircleIcon"
+            remixicon="RiErrorWarningLine"
+          />
+          <AlertTitle>The selected emails have been marked as spam.</AlertTitle>
+          <AlertDescription>
+            This is a very long alert title that demonstrates how the component
+            handles extended text content.
+          </AlertDescription>
+          <AlertAction>
+            <Badge variant="secondary">Badge</Badge>
+          </AlertAction>
+        </Alert>
+      </div>
+    </Example>
+  )
+}
+
+function AlertExample5() {
+  return (
+    <Example title="Inside Card" className="style-sera:bg-transparent">
+      <Card className="mx-auto w-full max-w-lg">
+        <CardHeader>
+          <CardTitle>Create project</CardTitle>
+          <CardDescription>
+            Fill in the form below to create a new project.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="flex flex-col gap-4 style-sera:gap-8">
+          <Alert>
+            <IconPlaceholder
+              lucide="CircleAlertIcon"
+              tabler="IconExclamationCircle"
+              hugeicons="AlertCircleIcon"
+              phosphor="WarningCircleIcon"
+              remixicon="RiErrorWarningLine"
+            />
+            <AlertTitle>
+              You have reached the limit of 3 free projects.
+            </AlertTitle>
+            <AlertDescription>
+              Upgrade to Pro to create unlimited projects.
+            </AlertDescription>
+          </Alert>
+          <FieldGroup>
+            <Field>
+              <FieldLabel htmlFor="project-name">Name</FieldLabel>
+              <Input id="project-name" placeholder="My project" />
+            </Field>
+            <Field>
+              <FieldLabel htmlFor="project-framework">Framework</FieldLabel>
+              <Select>
+                <SelectTrigger id="project-framework">
+                  <SelectValue placeholder="Select a framework" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectGroup>
+                    <SelectItem value="next">Next.js</SelectItem>
+                    <SelectItem value="remix">Remix</SelectItem>
+                    <SelectItem value="astro">Astro</SelectItem>
+                    <SelectItem value="nuxt">Nuxt</SelectItem>
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+            </Field>
+          </FieldGroup>
+          <Item variant="outline">
+            <ItemMedia variant="image" className="border">
+              <IconPlaceholder
+                lucide="FolderIcon"
+                tabler="IconFolder"
+                hugeicons="Folder01Icon"
+                phosphor="FolderIcon"
+                remixicon="RiFolderLine"
+              />
+            </ItemMedia>
+            <ItemContent>
+              <ItemTitle>Project Alpha</ItemTitle>
+              <ItemDescription>Created 2 days ago</ItemDescription>
+            </ItemContent>
+          </Item>
+        </CardContent>
+        <CardFooter>
+          <Button className="w-full">Create project</Button>
+        </CardFooter>
+      </Card>
+    </Example>
+  )
+}