mirror of
https://github.com/hanzoai/shadcn.git
synced 2026-11-03 03:18:52 +00:00
zeekay
16c4453cc1
Squash merge of shadcn-ui/ui main branch into hanzo/ui, bringing in: - [email protected] through [email protected] releases - New apps/v4 directory structure - Registry system improvements and MCP server - Framework support (Vue, Svelte, React Native) - New templates (vite-app, monorepo-next, laravel) - Zod 4 compatibility (scoped override for zod@>4) - Test fixture corrections for alias resolution All 867 merge conflicts resolved preserving Hanzo customizations. 1020/1020 shadcn tests pass.
17 lines
2.1 KiB
JSON
17 lines
2.1 KiB
JSON
{
|
|
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
|
"name": "scroll-area-horizontal-demo",
|
|
"type": "registry:example",
|
|
"author": "shadcn (https://ui.shadcn.com)",
|
|
"registryDependencies": [
|
|
"scroll-area"
|
|
],
|
|
"files": [
|
|
{
|
|
"path": "examples/scroll-area-horizontal-demo.tsx",
|
|
"content": "import * as React from \"react\"\nimport Image from \"next/image\"\n\nimport { ScrollArea, ScrollBar } from \"@/registry/default/ui/scroll-area\"\n\nexport interface Artwork {\n artist: string\n art: string\n}\n\nexport const works: Artwork[] = [\n {\n artist: \"Ornella Binni\",\n art: \"https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80\",\n },\n {\n artist: \"Tom Byrom\",\n art: \"https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80\",\n },\n {\n artist: \"Vladimir Malyavko\",\n art: \"https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80\",\n },\n]\n\nexport default function ScrollAreaHorizontalDemo() {\n return (\n <ScrollArea className=\"w-96 whitespace-nowrap rounded-md border\">\n <div className=\"flex w-max space-x-4 p-4\">\n {works.map((artwork) => (\n <figure key={artwork.artist} className=\"shrink-0\">\n <div className=\"overflow-hidden rounded-md\">\n <Image\n src={artwork.art}\n alt={`Photo by ${artwork.artist}`}\n className=\"aspect-[3/4] h-fit w-fit object-cover\"\n width={300}\n height={400}\n />\n </div>\n <figcaption className=\"pt-2 text-xs text-muted-foreground\">\n Photo by{\" \"}\n <span className=\"font-semibold text-foreground\">\n {artwork.artist}\n </span>\n </figcaption>\n </figure>\n ))}\n </div>\n <ScrollBar orientation=\"horizontal\" />\n </ScrollArea>\n )\n}\n",
|
|
"type": "registry:example",
|
|
"target": ""
|
|
}
|
|
]
|
|
} |