{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "demo-components-headless-accordion",
  "title": "Accordion Demo",
  "description": "Demo showing a accordion.",
  "registryDependencies": [
    "@animate-ui/components-headless-accordion"
  ],
  "files": [
    {
      "path": "registry/demo/components/headless/accordion/index.tsx",
      "content": "import {\n  Accordion,\n  AccordionItem,\n  AccordionButton,\n  AccordionPanel,\n} from '@/components/animate-ui/components/headless/accordion';\n\nconst ITEMS = [\n  {\n    title: 'What is Animate UI?',\n    content:\n      'Animate UI is an open-source distribution of React components built with TypeScript, Tailwind CSS, and Motion.',\n  },\n  {\n    title: 'How is it different from other libraries?',\n    content:\n      'Instead of installing via NPM, you copy and paste the components directly. This gives you full control to modify or customize them as needed.',\n  },\n  {\n    title: 'Is Animate UI free to use?',\n    content:\n      'Absolutely! Animate UI is fully open-source. You can use, modify, and adapt it to fit your needs.',\n  },\n];\n\ntype HeadlessAccordionDemoProps = {\n  keepRendered?: boolean;\n  showArrow?: boolean;\n};\n\nexport const HeadlessAccordionDemo = ({\n  keepRendered = false,\n  showArrow = true,\n}: HeadlessAccordionDemoProps) => {\n  return (\n    <Accordion className=\"max-w-[400px] w-full\">\n      {ITEMS.map((item, index) => (\n        <AccordionItem key={index}>\n          <AccordionButton showArrow={showArrow}>{item.title}</AccordionButton>\n          <AccordionPanel keepRendered={keepRendered}>\n            {item.content}\n          </AccordionPanel>\n        </AccordionItem>\n      ))}\n    </Accordion>\n  );\n};\n",
      "type": "registry:ui",
      "target": "components/animate-ui/demo/components/headless/accordion.tsx"
    }
  ],
  "meta": {
    "demoProps": {
      "AccordionButton": {
        "showArrow": {
          "value": true
        }
      },
      "AccordionPanel": {
        "keepRendered": {
          "value": false
        }
      }
    }
  },
  "type": "registry:ui"
}