{
  "name": "masonry-demo",
  "type": "registry:example",
  "registryDependencies": [
    "masonry"
  ],
  "files": [
    {
      "path": "examples/masonry-demo.tsx",
      "type": "registry:example",
      "content": "import * as React from \"react\";\n\nimport { Masonry, MasonryItem } from \"@/registry/bases/radix/ui/masonry\";\nimport { Skeleton } from \"@/registry/bases/radix/ui/skeleton\";\n\nconst items = [\n  {\n    id: \"1\",\n    title: \"The 900\",\n    description: \"The 900 is a trick where you spin 900 degrees in the air.\",\n  },\n  {\n    id: \"2\",\n    title: \"Indy Backflip\",\n    description:\n      \"The Indy Backflip is a trick where you backflip in the air while grabbing the board with your back hand.\",\n  },\n  {\n    id: \"3\",\n    title: \"Pizza Guy\",\n    description:\n      \"The Pizza Guy is a trick where you flip the board like a pizza.\",\n  },\n  {\n    id: \"4\",\n    title: \"Rocket Air\",\n    description:\n      \"The Rocket Air is a trick where you grab the nose of your board and point it straight up to the sky.\",\n  },\n  {\n    id: \"5\",\n    title: \"Kickflip Backflip\",\n    description:\n      \"The Kickflip Backflip is a trick where you perform a kickflip while doing a backflip simultaneously.\",\n  },\n  {\n    id: \"6\",\n    title: \"FS 540\",\n    description:\n      \"The FS 540 is a trick where you spin frontside 540 degrees in the air.\",\n  },\n];\n\nexport default function MasonryDemo() {\n  return (\n    <Masonry\n      columnCount={3}\n      gap={12}\n      fallback={<Skeleton className=\"h-72 w-full\" />}\n    >\n      {items.map((item) => (\n        <MasonryItem key={item.id} asChild>\n          <div className=\"flex flex-col gap-1 rounded-md border bg-card p-4 text-card-foreground shadow-xs\">\n            <div className=\"text-sm leading-tight font-medium sm:text-base\">\n              {item.title}\n            </div>\n            <span className=\"text-sm text-muted-foreground\">\n              {item.description}\n            </span>\n          </div>\n        </MasonryItem>\n      ))}\n    </Masonry>\n  );\n}\n",
      "target": ""
    }
  ]
}