{
  "name": "checkbox-group-demo",
  "type": "registry:example",
  "dependencies": [
    "@diceui/checkbox-group",
    "lucide-react"
  ],
  "registryDependencies": [
    "checkbox-group"
  ],
  "files": [
    {
      "path": "examples/checkbox-group-demo.tsx",
      "type": "registry:example",
      "content": "import * as CheckboxGroup from \"@diceui/checkbox-group\";\nimport { Check } from \"lucide-react\";\n\nexport default function CheckboxGroupDemo() {\n  return (\n    <CheckboxGroup.CheckboxGroupRoot className=\"peer flex flex-col gap-3.5\">\n      <CheckboxGroup.CheckboxGroupLabel className=\"text-sm leading-none text-zinc-600 peer-disabled:cursor-not-allowed peer-disabled:opacity-70 dark:text-zinc-400\">\n        Select your favorite tricks\n      </CheckboxGroup.CheckboxGroupLabel>\n      <CheckboxGroup.CheckboxGroupList className=\"flex gap-3 data-[orientation=horizontal]:flex-row data-[orientation=vertical]:flex-col\">\n        <label className=\"flex w-fit items-center gap-2 text-sm leading-none text-zinc-900 select-none has-data-disabled:cursor-not-allowed has-data-disabled:opacity-50 has-data-invalid:text-red-500 dark:text-zinc-100 dark:has-data-invalid:text-red-400\">\n          <CheckboxGroup.CheckboxGroupItem\n            value=\"kickflip\"\n            className=\"h-4 w-4 shrink-0 rounded-sm border border-zinc-600 shadow-sm focus-visible:ring-1 focus-visible:ring-zinc-500 focus-visible:outline-hidden data-invalid:border-red-500 dark:border-zinc-400 dark:focus-visible:ring-zinc-400 dark:data-invalid:border-red-400 [&[data-state=checked]:not([data-invalid])]:bg-zinc-900 [&[data-state=checked]:not([data-invalid])]:text-zinc-50 dark:[&[data-state=checked]:not([data-invalid])]:bg-zinc-100 dark:[&[data-state=checked]:not([data-invalid])]:text-zinc-900 [&[data-state=checked][data-invalid]]:bg-red-500 [&[data-state=checked][data-invalid]]:text-white dark:[&[data-state=checked][data-invalid]]:bg-red-400 [&[data-state=unchecked][data-invalid]]:bg-transparent\"\n          >\n            <CheckboxGroup.CheckboxGroupIndicator>\n              <Check className=\"size-3.5\" />\n            </CheckboxGroup.CheckboxGroupIndicator>\n          </CheckboxGroup.CheckboxGroupItem>\n          Kickflip\n        </label>\n        <label className=\"flex w-fit items-center gap-2 text-sm leading-none text-zinc-900 select-none has-data-disabled:cursor-not-allowed has-data-disabled:opacity-50 has-data-invalid:text-red-500 dark:text-zinc-100 dark:has-data-invalid:text-red-400\">\n          <CheckboxGroup.CheckboxGroupItem\n            value=\"heelflip\"\n            className=\"h-4 w-4 shrink-0 rounded-sm border border-zinc-600 shadow-sm focus-visible:ring-1 focus-visible:ring-zinc-500 focus-visible:outline-hidden data-invalid:border-red-500 dark:border-zinc-400 dark:focus-visible:ring-zinc-400 dark:data-invalid:border-red-400 [&[data-state=checked]:not([data-invalid])]:bg-zinc-900 [&[data-state=checked]:not([data-invalid])]:text-zinc-50 dark:[&[data-state=checked]:not([data-invalid])]:bg-zinc-100 dark:[&[data-state=checked]:not([data-invalid])]:text-zinc-900 [&[data-state=checked][data-invalid]]:bg-red-500 [&[data-state=checked][data-invalid]]:text-white dark:[&[data-state=checked][data-invalid]]:bg-red-400 [&[data-state=unchecked][data-invalid]]:bg-transparent\"\n          >\n            <CheckboxGroup.CheckboxGroupIndicator>\n              <Check className=\"size-3.5\" />\n            </CheckboxGroup.CheckboxGroupIndicator>\n          </CheckboxGroup.CheckboxGroupItem>\n          Heelflip\n        </label>\n        <label className=\"flex w-fit items-center gap-2 text-sm leading-none text-zinc-900 select-none has-data-disabled:cursor-not-allowed has-data-disabled:opacity-50 has-data-invalid:text-red-500 dark:text-zinc-100 dark:has-data-invalid:text-red-400\">\n          <CheckboxGroup.CheckboxGroupItem\n            value=\"tre-flip\"\n            className=\"h-4 w-4 shrink-0 rounded-sm border border-zinc-600 shadow-sm focus-visible:ring-1 focus-visible:ring-zinc-500 focus-visible:outline-hidden data-invalid:border-red-500 dark:border-zinc-400 dark:focus-visible:ring-zinc-400 dark:data-invalid:border-red-400 [&[data-state=checked]:not([data-invalid])]:bg-zinc-900 [&[data-state=checked]:not([data-invalid])]:text-zinc-50 dark:[&[data-state=checked]:not([data-invalid])]:bg-zinc-100 dark:[&[data-state=checked]:not([data-invalid])]:text-zinc-900 [&[data-state=checked][data-invalid]]:bg-red-500 [&[data-state=checked][data-invalid]]:text-white dark:[&[data-state=checked][data-invalid]]:bg-red-400 [&[data-state=unchecked][data-invalid]]:bg-transparent\"\n          >\n            <CheckboxGroup.CheckboxGroupIndicator>\n              <Check className=\"size-3.5\" />\n            </CheckboxGroup.CheckboxGroupIndicator>\n          </CheckboxGroup.CheckboxGroupItem>\n          Tre Flip\n        </label>\n        <label className=\"flex w-fit items-center gap-2 text-sm leading-none text-zinc-900 select-none has-data-disabled:cursor-not-allowed has-data-disabled:opacity-50 has-data-invalid:text-red-500 dark:text-zinc-100 dark:has-data-invalid:text-red-400\">\n          <CheckboxGroup.CheckboxGroupItem\n            value=\"540-flip\"\n            className=\"h-4 w-4 shrink-0 rounded-sm border border-zinc-600 shadow-sm focus-visible:ring-1 focus-visible:ring-zinc-500 focus-visible:outline-hidden data-invalid:border-red-500 dark:border-zinc-400 dark:focus-visible:ring-zinc-400 dark:data-invalid:border-red-400 [&[data-state=checked]:not([data-invalid])]:bg-zinc-900 [&[data-state=checked]:not([data-invalid])]:text-zinc-50 dark:[&[data-state=checked]:not([data-invalid])]:bg-zinc-100 dark:[&[data-state=checked]:not([data-invalid])]:text-zinc-900 [&[data-state=checked][data-invalid]]:bg-red-500 [&[data-state=checked][data-invalid]]:text-white dark:[&[data-state=checked][data-invalid]]:bg-red-400 [&[data-state=unchecked][data-invalid]]:bg-transparent\"\n          >\n            <CheckboxGroup.CheckboxGroupIndicator>\n              <Check className=\"size-3.5\" />\n            </CheckboxGroup.CheckboxGroupIndicator>\n          </CheckboxGroup.CheckboxGroupItem>\n          540 Flip\n        </label>\n      </CheckboxGroup.CheckboxGroupList>\n    </CheckboxGroup.CheckboxGroupRoot>\n  );\n}\n",
      "target": ""
    }
  ]
}