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

2026-09-15 22:44:43 +05:00
commit 1416db152c
5727 changed files with 630238 additions and 0 deletions
--- a/apps/v4/registry/bases/aria/examples/scroll-area-example.tsx
+++ b/apps/v4/registry/bases/aria/examples/scroll-area-example.tsx
@@ -0,0 +1,85 @@
+import * as React from "react"
+import Image from "next/image"
+
+import {
+  Example,
+  ExampleWrapper,
+} from "@/registry/bases/aria/components/example"
+import { ScrollArea } from "@/registry/bases/aria/ui/scroll-area"
+import { Separator } from "@/registry/bases/aria/ui/separator"
+
+const tags = Array.from({ length: 50 }).map(
+  (_, i, a) => `v1.2.0-beta.${a.length - i}`
+)
+
+const works = [
+  {
+    artist: "Ornella Binni",
+    art: "https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80",
+  },
+  {
+    artist: "Tom Byrom",
+    art: "https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80",
+  },
+  {
+    artist: "Vladimir Malyav",
+    art: "https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80",
+  },
+] as const
+
+export default function ScrollAreaExample() {
+  return (
+    <ExampleWrapper>
+      <ScrollAreaVertical />
+      <ScrollAreaHorizontal />
+    </ExampleWrapper>
+  )
+}
+
+function ScrollAreaVertical() {
+  return (
+    <Example title="Vertical">
+      <ScrollArea className="mx-auto h-72 w-48 rounded-md border style-luma:rounded-2xl style-rhea:rounded-2xl">
+        <div className="p-4">
+          <h4 className="mb-4 text-sm leading-none font-medium">Tags</h4>
+          {tags.map((tag) => (
+            <React.Fragment key={tag}>
+              <div className="text-sm">{tag}</div>
+              <Separator className="my-2" />
+            </React.Fragment>
+          ))}
+        </div>
+      </ScrollArea>
+    </Example>
+  )
+}
+
+function ScrollAreaHorizontal() {
+  return (
+    <Example title="Horizontal">
+      <ScrollArea className="mx-auto w-full max-w-96 rounded-md border p-4 style-luma:rounded-2xl style-rhea:rounded-2xl">
+        <div className="flex gap-4">
+          {works.map((artwork) => (
+            <figure key={artwork.artist} className="shrink-0">
+              <div className="overflow-hidden rounded-md">
+                <Image
+                  src={artwork.art}
+                  alt={`Photo by ${artwork.artist}`}
+                  className="aspect-[3/4] h-fit w-fit object-cover"
+                  width={300}
+                  height={400}
+                />
+              </div>
+              <figcaption className="pt-2 text-xs text-muted-foreground">
+                Photo by{" "}
+                <span className="font-semibold text-foreground">
+                  {artwork.artist}
+                </span>
+              </figcaption>
+            </figure>
+          ))}
+        </div>
+      </ScrollArea>
+    </Example>
+  )
+}