{
  "name": "masonry-linear-demo",
  "type": "registry:example",
  "registryDependencies": [
    "masonry",
    "skeleton"
  ],
  "files": [
    {
      "path": "examples/masonry-linear-demo.tsx",
      "type": "registry:example",
      "content": "import { Masonry, MasonryItem } from \"@/registry/bases/radix/ui/masonry\";\nimport { Skeleton } from \"@/registry/bases/radix/ui/skeleton\";\n\nconst items = [\n  {\n    id: \"1\",\n    number: 1,\n    aspectRatio: \"1/1\",\n  },\n  {\n    id: \"2\",\n    number: 2,\n    aspectRatio: \"4/3\",\n  },\n  {\n    id: \"3\",\n    number: 3,\n    aspectRatio: \"3/4\",\n  },\n  {\n    id: \"4\",\n    number: 4,\n    aspectRatio: \"3/2\",\n  },\n  {\n    id: \"5\",\n    number: 5,\n    aspectRatio: \"1/1\",\n  },\n  {\n    id: \"6\",\n    number: 6,\n    aspectRatio: \"1/1\",\n  },\n];\n\nexport default function MasonryLinearDemo() {\n  return (\n    <Masonry\n      gap={10}\n      columnWidth={140}\n      linear\n      fallback={<Skeleton className=\"h-72 w-full\" />}\n    >\n      {items.map((item) => (\n        <MasonryItem\n          key={item.id}\n          className=\"flex items-center justify-center rounded-lg border bg-card text-card-foreground shadow-xs\"\n          style={{ aspectRatio: item.aspectRatio }}\n        >\n          <span className=\"text-2xl font-medium\">{item.number}</span>\n        </MasonryItem>\n      ))}\n    </Masonry>\n  );\n}\n",
      "target": ""
    }
  ]
}