{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "accordion-13",
  "title": "Filled trigger",
  "description": "Each trigger sits on a muted, rounded background.",
  "dependencies": [],
  "registryDependencies": [
    "accordion"
  ],
  "files": [
    {
      "path": "registry/patterns/accordion/accordion-13.tsx",
      "content": "import {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from '@/components/ui/accordion'\n\nconst items = [\n  {\n    value: 'item-1',\n    title: 'What makes a good filled accordion?',\n    body: 'A solid surface gives each row weight and a clear, tappable target — handy on dense settings pages.',\n  },\n  {\n    value: 'item-2',\n    title: 'When should I use it?',\n    body: 'Reach for filled rows when they need more emphasis than a plain underline divider provides.',\n  },\n  {\n    value: 'item-3',\n    title: 'Does it stay accessible?',\n    body: 'Yes. It is the same component underneath — only the surface styling changes.',\n  },\n]\n\nexport function Accordion13() {\n  return (\n    <Accordion className=\"w-full max-w-md gap-2\">\n      {items.map((item) => (\n        <AccordionItem\n          key={item.value}\n          value={item.value}\n          className=\"bg-muted/50 overflow-hidden rounded-lg border-b-0!\"\n        >\n          <AccordionTrigger className=\"px-4 py-3 hover:no-underline\">\n            {item.title}\n          </AccordionTrigger>\n          <AccordionContent className=\"text-muted-foreground px-4 pt-0\">\n            {item.body}\n          </AccordionContent>\n        </AccordionItem>\n      ))}\n    </Accordion>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/flx/patterns/accordion/accordion-13.tsx"
    }
  ],
  "type": "registry:block"
}