{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "accordion-03",
  "title": "With icons",
  "description": "Leading icon beside each trigger label.",
  "dependencies": [],
  "registryDependencies": [
    "accordion"
  ],
  "files": [
    {
      "path": "registry/patterns/accordion/accordion-03.tsx",
      "content": "import {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from '@/components/ui/accordion'\nimport {\n  CreditCardIcon,\n  LifeBuoyIcon,\n  SettingsIcon,\n  ShieldIcon,\n} from 'lucide-react'\n\nconst sections = [\n  {\n    value: 'account',\n    icon: SettingsIcon,\n    title: 'Account',\n    body: 'Update your name, email, and profile photo from the account settings.',\n  },\n  {\n    value: 'billing',\n    icon: CreditCardIcon,\n    title: 'Billing',\n    body: 'Manage your payment method, view invoices, and change your plan.',\n  },\n  {\n    value: 'security',\n    icon: ShieldIcon,\n    title: 'Security',\n    body: 'Enable two-factor authentication and review active sessions.',\n  },\n  {\n    value: 'support',\n    icon: LifeBuoyIcon,\n    title: 'Support',\n    body: 'Reach our team any time — we typically reply within a few hours.',\n  },\n]\n\nexport function Accordion03() {\n  return (\n    <Accordion className=\"w-full max-w-md\">\n      {sections.map((section) => (\n        <AccordionItem key={section.value} value={section.value}>\n          <AccordionTrigger>\n            <span className=\"flex items-center gap-2.5\">\n              <section.icon className=\"text-muted-foreground size-4\" />\n              {section.title}\n            </span>\n          </AccordionTrigger>\n          <AccordionContent className=\"text-muted-foreground\">\n            {section.body}\n          </AccordionContent>\n        </AccordionItem>\n      ))}\n    </Accordion>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/flx/patterns/accordion/accordion-03.tsx"
    }
  ],
  "type": "registry:block"
}