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

apps/v4/registry/bases/aria/examples/skeleton-example.tsx

@@ -0,0 +1,102 @@
+import {
+  Example,
+  ExampleWrapper,
+} from "@/registry/bases/aria/components/example"
+import { Card, CardContent, CardHeader } from "@/registry/bases/aria/ui/card"
+import { Skeleton } from "@/registry/bases/aria/ui/skeleton"
+
+export default function SkeletonExample() {
+  return (
+    <ExampleWrapper>
+      <SkeletonAvatar />
+      <SkeletonCard />
+      <SkeletonText />
+      <SkeletonForm />
+      <SkeletonTable />
+    </ExampleWrapper>
+  )
+}
+
+function SkeletonAvatar() {
+  return (
+    <Example title="Avatar">
+      <div className="flex w-full items-center gap-4">
+        <Skeleton className="size-10 shrink-0 rounded-full" />
+        <div className="grid gap-2">
+          <Skeleton className="h-4 w-[150px]" />
+          <Skeleton className="h-4 w-[100px]" />
+        </div>
+      </div>
+    </Example>
+  )
+}
+
+function SkeletonCard() {
+  return (
+    <Example title="Card">
+      <Card className="w-full">
+        <CardHeader>
+          <Skeleton className="h-4 w-2/3" />
+          <Skeleton className="h-4 w-1/2" />
+        </CardHeader>
+        <CardContent>
+          <Skeleton className="aspect-square w-full" />
+        </CardContent>
+      </Card>
+    </Example>
+  )
+}
+
+function SkeletonText() {
+  return (
+    <Example title="Text">
+      <div className="flex w-full flex-col gap-2">
+        <Skeleton className="h-4 w-full" />
+        <Skeleton className="h-4 w-full" />
+        <Skeleton className="h-4 w-3/4" />
+      </div>
+    </Example>
+  )
+}
+
+function SkeletonForm() {
+  return (
+    <Example title="Form">
+      <div className="flex w-full flex-col gap-7">
+        <div className="flex flex-col gap-3">
+          <Skeleton className="h-4 w-20" />
+          <Skeleton className="h-10 w-full" />
+        </div>
+        <div className="flex flex-col gap-3">
+          <Skeleton className="h-4 w-24" />
+          <Skeleton className="h-10 w-full" />
+        </div>
+        <Skeleton className="h-9 w-24" />
+      </div>
+    </Example>
+  )
+}
+
+function SkeletonTable() {
+  return (
+    <Example title="Table">
+      <div className="flex w-full flex-col gap-2">
+        <div className="flex gap-4">
+          <Skeleton className="h-4 flex-1" />
+          <Skeleton className="h-4 w-24" />
+          <Skeleton className="h-4 w-20" />
+        </div>
+        <div className="flex gap-4">
+          <Skeleton className="h-4 flex-1" />
+          <Skeleton className="h-4 w-24" />
+          <Skeleton className="h-4 w-20" />
+        </div>
+        <div className="flex gap-4">
+          <Skeleton className="h-4 flex-1" />
+          <Skeleton className="h-4 w-24" />
+          <Skeleton className="h-4 w-20" />
+        </div>
+      </div>
+    </Example>
+  )
+}