{
  "name": "checkbox-group-animated-demo",
  "type": "registry:example",
  "dependencies": [
    "@diceui/checkbox-group"
  ],
  "registryDependencies": [
    "checkbox-group"
  ],
  "files": [
    {
      "path": "examples/checkbox-group-animated-demo.tsx",
      "type": "registry:example",
      "content": "import * as CheckboxGroup from \"@diceui/checkbox-group\";\n\nexport default function CheckboxGroupDemo() {\n  return (\n    <CheckboxGroup.CheckboxGroupRoot className=\"peer flex flex-col gap-3.5\">\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            className=\"animate-stroke-dashoffset size-3.5 [stroke-dasharray:100%_100%] motion-reduce:animate-none\"\n            asChild\n          >\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"28\"\n              height=\"28\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"2\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n            >\n              <path d=\"M4 12 9 17L20 6\" />\n            </svg>\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            className=\"animate-stroke-dashoffset size-3.5 [stroke-dasharray:100%_100%] motion-reduce:animate-none\"\n            asChild\n          >\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"28\"\n              height=\"28\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"2\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n            >\n              <path d=\"M4 12 9 17L20 6\" />\n            </svg>\n          </CheckboxGroup.CheckboxGroupIndicator>\n        </CheckboxGroup.CheckboxGroupItem>\n        Heelflip\n      </label>\n    </CheckboxGroup.CheckboxGroupRoot>\n  );\n}\n",
      "target": ""
    }
  ]
}