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

apps/v4/registry/bases/base/examples/empty-example.tsx

@@ -0,0 +1,263 @@
+import {
+  Example,
+  ExampleWrapper,
+} from "@/registry/bases/base/components/example"
+import { Button } from "@/registry/bases/base/ui/button"
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "@/registry/bases/base/ui/empty"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+} from "@/registry/bases/base/ui/input-group"
+import { Kbd } from "@/registry/bases/base/ui/kbd"
+import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
+
+export default function EmptyExample() {
+  return (
+    <ExampleWrapper>
+      <EmptyBasic />
+      <EmptyWithMutedBackground />
+      <EmptyWithBorder />
+      <EmptyWithIcon />
+      <EmptyWithMutedBackgroundAlt />
+      <EmptyInCard />
+    </ExampleWrapper>
+  )
+}
+
+function EmptyBasic() {
+  return (
+    <Example title="Basic">
+      <Empty>
+        <EmptyHeader>
+          <EmptyTitle>No projects yet</EmptyTitle>
+          <EmptyDescription>
+            You haven&apos;t created any projects yet. Get started by creating
+            your first project.
+          </EmptyDescription>
+        </EmptyHeader>
+        <EmptyContent>
+          <div className="flex gap-2">
+            <Button render={<a href="#" />} nativeButton={false}>
+              Create project
+            </Button>
+            <Button variant="outline">Import project</Button>
+          </div>
+          <Button
+            variant="link"
+            render={<a href="#" />}
+            className="text-muted-foreground"
+            nativeButton={false}
+          >
+            Learn more{" "}
+            <IconPlaceholder
+              lucide="ArrowUpRightIcon"
+              tabler="IconArrowUpRight"
+              hugeicons="ArrowUpRight01Icon"
+              phosphor="ArrowUpRightIcon"
+              remixicon="RiArrowRightUpLine"
+            />
+          </Button>
+        </EmptyContent>
+      </Empty>
+    </Example>
+  )
+}
+
+function EmptyWithMutedBackground() {
+  return (
+    <Example title="With Muted Background">
+      <Empty className="bg-muted">
+        <EmptyHeader>
+          <EmptyTitle>No results found</EmptyTitle>
+          <EmptyDescription>
+            No results found for your search. Try adjusting your search terms.
+          </EmptyDescription>
+        </EmptyHeader>
+        <EmptyContent>
+          <Button>Try again</Button>
+          <Button
+            variant="link"
+            render={<a href="#" />}
+            className="text-muted-foreground"
+            nativeButton={false}
+          >
+            Learn more{" "}
+            <IconPlaceholder
+              lucide="ArrowUpRightIcon"
+              tabler="IconArrowUpRight"
+              hugeicons="ArrowUpRight01Icon"
+              phosphor="ArrowUpRightIcon"
+              remixicon="RiArrowRightUpLine"
+            />
+          </Button>
+        </EmptyContent>
+      </Empty>
+    </Example>
+  )
+}
+
+function EmptyWithBorder() {
+  return (
+    <Example title="With Border">
+      <Empty className="border">
+        <EmptyHeader>
+          <EmptyTitle>404 - Not Found</EmptyTitle>
+          <EmptyDescription>
+            The page you&apos;re looking for doesn&apos;t exist. Try searching
+            for what you need below.
+          </EmptyDescription>
+        </EmptyHeader>
+        <EmptyContent>
+          <InputGroup className="w-3/4">
+            <InputGroupInput placeholder="Try searching for pages..." />
+            <InputGroupAddon>
+              <IconPlaceholder
+                lucide="CircleDashedIcon"
+                tabler="IconCircleDashed"
+                hugeicons="DashedLineCircleIcon"
+                phosphor="CircleDashedIcon"
+                remixicon="RiLoaderLine"
+              />
+            </InputGroupAddon>
+            <InputGroupAddon align="inline-end">
+              <Kbd>/</Kbd>
+            </InputGroupAddon>
+          </InputGroup>
+          <EmptyDescription>
+            Need help? <a href="#">Contact support</a>
+          </EmptyDescription>
+        </EmptyContent>
+      </Empty>
+    </Example>
+  )
+}
+
+function EmptyWithIcon() {
+  return (
+    <Example title="With Icon">
+      <Empty className="border">
+        <EmptyHeader>
+          <EmptyMedia variant="icon">
+            <IconPlaceholder
+              lucide="FolderIcon"
+              tabler="IconFolder"
+              hugeicons="Folder01Icon"
+              phosphor="FolderIcon"
+              remixicon="RiFolderLine"
+            />
+          </EmptyMedia>
+          <EmptyTitle>Nothing to see here</EmptyTitle>
+          <EmptyDescription>
+            No posts have been created yet. Get started by{" "}
+            <a href="#">creating your first post</a>.
+          </EmptyDescription>
+        </EmptyHeader>
+        <EmptyContent>
+          <Button variant="outline">
+            <IconPlaceholder
+              lucide="PlusIcon"
+              tabler="IconPlus"
+              hugeicons="PlusSignIcon"
+              phosphor="PlusIcon"
+              remixicon="RiAddLine"
+              data-icon="inline-start"
+            />
+            New Post
+          </Button>
+        </EmptyContent>
+      </Empty>
+    </Example>
+  )
+}
+
+function EmptyWithMutedBackgroundAlt() {
+  return (
+    <Example title="With Muted Background Alt">
+      <Empty className="bg-muted/50">
+        <EmptyHeader>
+          <EmptyTitle>404 - Not Found</EmptyTitle>
+          <EmptyDescription>
+            The page you&apos;re looking for doesn&apos;t exist. Try searching
+            for what you need below.
+          </EmptyDescription>
+        </EmptyHeader>
+        <EmptyContent>
+          <InputGroup className="w-3/4">
+            <InputGroupInput placeholder="Try searching for pages..." />
+            <InputGroupAddon>
+              <IconPlaceholder
+                lucide="CircleDashedIcon"
+                tabler="IconCircleDashed"
+                hugeicons="DashedLineCircleIcon"
+                phosphor="CircleDashedIcon"
+                remixicon="RiLoaderLine"
+              />
+            </InputGroupAddon>
+            <InputGroupAddon align="inline-end">
+              <Kbd>/</Kbd>
+            </InputGroupAddon>
+          </InputGroup>
+          <EmptyDescription>
+            Need help? <a href="#">Contact support</a>
+          </EmptyDescription>
+        </EmptyContent>
+      </Empty>
+    </Example>
+  )
+}
+
+function EmptyInCard() {
+  return (
+    <Example title="In Card">
+      <Empty>
+        <EmptyHeader>
+          <EmptyMedia variant="icon">
+            <IconPlaceholder
+              lucide="FolderIcon"
+              tabler="IconFolder"
+              hugeicons="Folder01Icon"
+              phosphor="FolderIcon"
+              remixicon="RiFolderLine"
+            />
+          </EmptyMedia>
+          <EmptyTitle>No projects yet</EmptyTitle>
+          <EmptyDescription>
+            You haven&apos;t created any projects yet. Get started by creating
+            your first project.
+          </EmptyDescription>
+        </EmptyHeader>
+        <EmptyContent>
+          <div className="flex gap-2">
+            <Button render={<a href="#" />} nativeButton={false}>
+              Create project
+            </Button>
+            <Button variant="outline">Import project</Button>
+          </div>
+          <Button
+            variant="link"
+            render={<a href="#" />}
+            className="text-muted-foreground"
+            nativeButton={false}
+          >
+            Learn more{" "}
+            <IconPlaceholder
+              lucide="ArrowUpRightIcon"
+              tabler="IconArrowUpRight"
+              hugeicons="ArrowUpRight01Icon"
+              phosphor="ArrowUpRightIcon"
+              remixicon="RiArrowRightUpLine"
+            />
+          </Button>
+        </EmptyContent>
+      </Empty>
+    </Example>
+  )
+}