{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-accordion-3","type":"registry:block","title":"Accordion with borders and rounded corners","description":"Accordion with borders and rounded corners","dependencies":[],"registryDependencies":["accordion"],"files":[{"path":"c-accordion-3.tsx","type":"registry:block","content":"import {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\n\nconst items = [\n  {\n    value: \"billing\",\n    trigger: \"How does billing work?\",\n    content:\n      \"We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members. There are no hidden fees or setup costs.\",\n  },\n  {\n    value: \"security\",\n    trigger: \"Is my data secure?\",\n    content:\n      \"Yes. We use end-to-end encryption, SOC 2 Type II compliance, and regular third-party security audits. All data is encrypted at rest and in transit using industry-standard protocols. We also offer optional two-factor authentication and single sign-on for enterprise customers.\",\n  },\n  {\n    value: \"integration\",\n    trigger: \"What integrations do you support?\",\n    content: (\n      <>\n        <p>\n          We integrate with 500+ popular tools including Slack, Zapier,\n          Salesforce, HubSpot, and more. You can also build custom integrations\n          using our REST API and webhooks.{\" \"}\n        </p>\n        <p>\n          Our API documentation includes code examples in 10+ programming\n          languages.\n        </p>\n      </>\n    ),\n  },\n]\n\nexport function Pattern() {\n  return (\n    <div className=\"mx-auto mb-auto w-full max-w-lg\">\n      <Accordion\n        multiple={false}\n        defaultValue={[\"billing\"]}\n        className=\"space-y-2 border-0\"\n      >\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            className=\"border-border rounded-lg border px-3 not-last:border-b\"\n          >\n            <AccordionTrigger className=\"items-center py-3 font-medium hover:no-underline\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"text-muted-foreground pt-0 pb-4\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  )\n}","target":"components/examples/c-accordion-3.tsx"}],"meta":{"order":3,"label":"Bordered Rounded"}}