{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "accordion-with-icons",
  "type": "registry:component",
  "title": "Accordion With Icons",
  "description": "Accordion With Icons",
  "files": [
    {
      "path": "registry/ui-basic/AccordionWithIcons.tsx",
      "content": "import React from \"react\";\n\nexport default function AccordionWithIcons() {\n\treturn (\n\t\t<>\n\t\t\t{/*<!-- Component: Elevated accordion with icons --> */}\n\t\t\t<section className=\"w-full bg-white divide-y rounded shadow-md divide-slate-200 shadow-slate-200\">\n\t\t\t\t<details className=\"p-4 group\" open>\n\t\t\t\t\t<summary className=\"relative flex cursor-pointer list-none gap-4 pr-8 font-medium text-slate-700 transition-colors duration-300 focus-visible:outline-hidden group-hover:text-slate-900  [&::-webkit-details-marker]:hidden\">\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\tclassName=\"w-6 h-6 shrink-0 stroke-emerald-500 \"\n\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\tstrokeWidth=\"1.5\"\n\t\t\t\t\t\t\taria-labelledby=\"title-ac05 desc-ac05\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<title id=\"title-ac05\">Leading icon</title>\n\t\t\t\t\t\t\t<desc id=\"desc-ac05\">Icon that describes the summary</desc>\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t\t\td=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t\tHow do I use Wind UI components?\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\tclassName=\"absolute right-0 w-4 h-4 transition duration-300 top-1 shrink-0 stroke-slate-700 group-open:rotate-45\"\n\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\tstrokeWidth=\"1.5\"\n\t\t\t\t\t\t\taria-labelledby=\"title-ac06 desc-ac06\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<title id=\"title-ac06\">Open icon</title>\n\t\t\t\t\t\t\t<desc id=\"desc-ac06\">\n\t\t\t\t\t\t\t\ticon that represents the state of the summary\n\t\t\t\t\t\t\t</desc>\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t\t\td=\"M12 4v16m8-8H4\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</summary>\n\t\t\t\t\t<p className=\"mt-4 text-slate-500\">\n\t\t\t\t\t\tAll components can be copied and pasted and easily implemented\n\t\t\t\t\t\tin your tailwind css projects. You can choose which language\n\t\t\t\t\t\tyou want to copy the desired component and just hover and\n\t\t\t\t\t\tclick on the component you need and paste it on your project.\n\t\t\t\t\t</p>\n\t\t\t\t</details>\n\t\t\t\t<details className=\"p-4 group\">\n\t\t\t\t\t<summary className=\"relative flex cursor-pointer list-none gap-4 pr-8 font-medium text-slate-700 transition-colors duration-300 focus-visible:outline-hidden group-hover:text-slate-900  [&::-webkit-details-marker]:hidden\">\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\tclassName=\"w-6 h-6 shrink-0 stroke-emerald-500 \"\n\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\tstrokeWidth=\"1.5\"\n\t\t\t\t\t\t\taria-labelledby=\"title-ac07 desc-ac07\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<title id=\"title-ac07\">Leading icon</title>\n\t\t\t\t\t\t\t<desc id=\"desc-ac07\">Icon that describes the summary</desc>\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t\t\td=\"M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t\tWhat do you mean by accessible components?\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\tclassName=\"absolute right-0 w-4 h-4 transition duration-300 top-1 shrink-0 stroke-slate-700 group-open:rotate-45\"\n\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\tstrokeWidth=\"1.5\"\n\t\t\t\t\t\t\taria-labelledby=\"title-ac08 desc-ac08\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<title id=\"title-ac08\">Open icon</title>\n\t\t\t\t\t\t\t<desc id=\"desc-ac08\">\n\t\t\t\t\t\t\t\ticon that represents the state of the summary\n\t\t\t\t\t\t\t</desc>\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t\t\td=\"M12 4v16m8-8H4\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</summary>\n\t\t\t\t\t<p className=\"mt-4 text-slate-500\">\n\t\t\t\t\t\tAll components come with proper attributes to ensure full\n\t\t\t\t\t\taccessibility with the WAI-ARIA standards. Web accessibility\n\t\t\t\t\t\tmeans that websites, tools, and technologies are designed and\n\t\t\t\t\t\tdeveloped so that people with disabilities can use them.\n\t\t\t\t\t</p>\n\t\t\t\t</details>\n\t\t\t\t<details className=\"p-4 group\">\n\t\t\t\t\t<summary className=\"relative flex cursor-pointer list-none gap-4 pr-8 font-medium text-slate-700 transition-colors duration-300 focus-visible:outline-hidden group-hover:text-slate-900  [&::-webkit-details-marker]:hidden\">\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\tclassName=\"w-6 h-6 shrink-0 stroke-emerald-500 \"\n\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\tstrokeWidth=\"1.5\"\n\t\t\t\t\t\t\taria-labelledby=\"title-ac09 desc-ac09\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<title id=\"title-ac09\">Leading icon</title>\n\t\t\t\t\t\t\t<desc id=\"desc-ac09\">Icon that describes the summary</desc>\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t\t\td=\"M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25m18 0A2.25 2.25 0 0018.75 3H5.25A2.25 2.25 0 003 5.25m18 0V12a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 12V5.25\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t\tWhat do you mean about fully responsive?\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\tclassName=\"absolute right-0 w-4 h-4 transition duration-300 top-1 shrink-0 stroke-slate-700 group-open:rotate-45\"\n\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\tstrokeWidth=\"1.5\"\n\t\t\t\t\t\t\taria-labelledby=\"title-ac10 desc-ac10\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<title id=\"title-ac10\">Open icon</title>\n\t\t\t\t\t\t\t<desc id=\"desc-ac10\">\n\t\t\t\t\t\t\t\ticon that represents the state of the summary\n\t\t\t\t\t\t\t</desc>\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t\t\td=\"M12 4v16m8-8H4\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</summary>\n\t\t\t\t\t<p className=\"mt-4 text-slate-500\">\n\t\t\t\t\t\tEvery component is fully responsive and implemented to look\n\t\t\t\t\t\tgreat at any screen size.\n\t\t\t\t\t</p>\n\t\t\t\t</details>\n\t\t\t\t<details className=\"p-4 group\">\n\t\t\t\t\t<summary className=\"relative flex cursor-pointer list-none gap-4 pr-8 font-medium text-slate-700 transition-colors duration-300 focus-visible:outline-hidden group-hover:text-slate-900  [&::-webkit-details-marker]:hidden\">\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\tclassName=\"w-6 h-6 shrink-0 stroke-emerald-500 \"\n\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\tstrokeWidth=\"1.5\"\n\t\t\t\t\t\t\taria-labelledby=\"title-ac11 desc-ac11\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<title id=\"title-ac11\">Leading icon</title>\n\t\t\t\t\t\t\t<desc id=\"desc-ac11\">Icon that describes the summary</desc>\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t\t\td=\"M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t\tWhich version of TailwindCSS are you using for the components?\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\tclassName=\"absolute right-0 w-4 h-4 transition duration-300 top-1 shrink-0 stroke-slate-700 group-open:rotate-45\"\n\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\tstrokeWidth=\"1.5\"\n\t\t\t\t\t\t\taria-labelledby=\"title-ac12 desc-ac12\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<title id=\"title-ac12\">Open icon</title>\n\t\t\t\t\t\t\t<desc id=\"desc-ac12\">\n\t\t\t\t\t\t\t\ticon that represents the state of the summary\n\t\t\t\t\t\t\t</desc>\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t\t\td=\"M12 4v16m8-8H4\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</summary>\n\t\t\t\t\t<p className=\"mt-4 text-slate-500\">\n\t\t\t\t\t\tOur team has used the currently latest TailwindCSS version.\n\t\t\t\t\t\tThe code is used in its original form without any\n\t\t\t\t\t\tcustomization or third party dependencies.\n\t\t\t\t\t</p>\n\t\t\t\t</details>\n\t\t\t</section>\n\t\t\t{/*<!-- End Elevated accordion with icons --> */}\n\t\t</>\n\t);\n}\n",
      "type": "registry:ui"
    }
  ]
}