{
  "name": "listbox-horizontal-demo",
  "type": "registry:example",
  "registryDependencies": [
    "listbox"
  ],
  "files": [
    {
      "path": "examples/listbox-horizontal-demo.tsx",
      "type": "registry:example",
      "content": "import {\n  Listbox,\n  ListboxItem,\n  ListboxItemIndicator,\n} from \"@/registry/bases/radix/ui/listbox\";\n\nconst tricks = [\n  { label: \"Kickflip\", description: \"Flip the board 360° along its long axis\" },\n  {\n    label: \"Heelflip\",\n    description:\n      \"Flip the board 360° along its long axis in the opposite direction of a kickflip\",\n  },\n  {\n    label: \"The 900\",\n    description: \"Legendary 900° aerial rotation pioneered by Tony Hawk\",\n  },\n];\n\nexport default function ListboxHorizontalDemo() {\n  return (\n    <Listbox orientation=\"horizontal\" className=\"flex w-full flex-row gap-4\">\n      {tricks.map((trick) => (\n        <ListboxItem key={trick.label} value={trick.label}>\n          <div className=\"flex flex-col\">\n            <div className=\"flex items-center justify-between\">\n              <div className=\"font-medium\">{trick.label}</div>\n              <ListboxItemIndicator />\n            </div>\n            <div className=\"line-clamp-2 text-sm text-muted-foreground\">\n              {trick.description}\n            </div>\n          </div>\n        </ListboxItem>\n      ))}\n    </Listbox>\n  );\n}\n",
      "target": ""
    }
  ]
}