From 958425cbbae4dc966213a7e66c307535049ff646 Mon Sep 17 00:00:00 2001
From: akash3444 <akashmoradiya3444@gmail.com>
Date: Sun, 19 Oct 2025 14:47:21 +0530
Subject: [PATCH] feat: add new accordion particles

- Introduced multiple accordion particles: "accordion-with-icon", "accordion-multi-level", "accordion-table", and "accordion-tabs".
---
 apps/ui/public/r/accordion-multi-level.json   |  20 +++
 apps/ui/public/r/accordion-table.json         |  19 +++
 apps/ui/public/r/accordion-tabs.json          |  19 +++
 apps/ui/public/r/accordion-with-icon.json     |  19 +++
 apps/ui/public/r/registry.json                |  69 +++++++++
 apps/ui/registry.json                         |  69 +++++++++
 apps/ui/registry/__index__.tsx                |  72 +++++++++
 .../examples/accordion-multi-level.tsx        | 138 ++++++++++++++++++
 .../default/examples/accordion-table.tsx      |  48 ++++++
 .../default/examples/accordion-tabs.tsx       |  39 +++++
 .../default/examples/accordion-with-icon.tsx  |  63 ++++++++
 apps/ui/registry/default/particles/index.tsx  |  32 ++++
 apps/ui/registry/registry-examples.ts         |  55 +++++++
 13 files changed, 662 insertions(+)
 create mode 100644 apps/ui/public/r/accordion-multi-level.json
 create mode 100644 apps/ui/public/r/accordion-table.json
 create mode 100644 apps/ui/public/r/accordion-tabs.json
 create mode 100644 apps/ui/public/r/accordion-with-icon.json
 create mode 100644 apps/ui/registry/default/examples/accordion-multi-level.tsx
 create mode 100644 apps/ui/registry/default/examples/accordion-table.tsx
 create mode 100644 apps/ui/registry/default/examples/accordion-tabs.tsx
 create mode 100644 apps/ui/registry/default/examples/accordion-with-icon.tsx

diff --git a/apps/ui/public/r/accordion-multi-level.json b/apps/ui/public/r/accordion-multi-level.json
new file mode 100644
index 000000000..aa69491b9
--- /dev/null
+++ b/apps/ui/public/r/accordion-multi-level.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "accordion-multi-level",
+  "type": "registry:example",
+  "description": "Accordion with multiple levels",
+  "registryDependencies": [
+    "https://coss.com/ui/r/accordion.json",
+    "https://coss.com/ui/r/collapsible.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/examples/accordion-multi-level.tsx",
+      "content": "import { ChevronDownIcon } from \"lucide-react\"\n\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/default/ui/accordion\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/default/ui/collapsible\"\n\nconst items = [\n  {\n    id: \"1\",\n    title: \"What makes coss.com ui different?\",\n    collapsibles: [\n      {\n        title: \"What about performance?\",\n        content:\n          \"We optimize every component for maximum performance and minimal bundle size.\",\n      },\n      {\n        title: \"How is the documentation?\",\n        content:\n          \"Our documentation is comprehensive and includes live examples for every component.\",\n      },\n    ],\n  },\n  {\n    id: \"2\",\n    title: \"How can I customize the components?\",\n    collapsibles: [\n      {\n        title: \"Can I use custom themes?\",\n        content:\n          \"Yes, our theming system is fully customizable and supports both light and dark modes.\",\n      },\n      {\n        title: \"What about Tailwind support?\",\n        content:\n          \"We have first-class support for Tailwind CSS with custom utility classes.\",\n      },\n    ],\n  },\n  {\n    id: \"3\",\n    title: \"Is coss.com ui optimized for performance?\",\n    collapsibles: [\n      {\n        title: \"What's the bundle size impact?\",\n        content:\n          \"Our components are tree-shakeable and typically add minimal overhead to your bundle.\",\n        open: true,\n      },\n      {\n        title: \"How is code splitting handled?\",\n        content:\n          \"We support automatic code splitting for optimal loading performance.\",\n      },\n    ],\n  },\n  {\n    id: \"4\",\n    title: \"How accessible are the components?\",\n    collapsibles: [\n      {\n        title: \"Which screen readers are supported?\",\n        content:\n          \"We test with NVDA, VoiceOver, and JAWS to ensure broad compatibility.\",\n      },\n      {\n        title: \"What about keyboard navigation?\",\n        content:\n          \"Full keyboard navigation support is implemented following WAI-ARIA best practices.\",\n      },\n    ],\n  },\n]\n\nexport default function Component() {\n  return (\n    <div className=\"space-y-4\">\n      <h2 className=\"text-xl font-bold\">Multi-level</h2>\n      <Accordion multiple className=\"w-full -space-y-px\" defaultValue={[\"3\"]}>\n        {items.map((item) => (\n          <AccordionItem\n            value={item.id}\n            key={item.id}\n            className=\"relative border bg-background outline-none first:rounded-t-md last:rounded-b-md last:border-b has-focus-visible:z-10 has-focus-visible:border-ring has-focus-visible:ring-[3px] has-focus-visible:ring-ring/50\"\n          >\n            <AccordionTrigger className=\"rounded-md px-4 py-3 text-[15px] leading-6 outline-none hover:no-underline focus-visible:ring-0\">\n              {item.title}\n            </AccordionTrigger>\n            <AccordionContent className=\"p-0\">\n              {item.collapsibles.map((collapsible, index) => (\n                <CollapsibleDemo\n                  key={index}\n                  title={collapsible.title}\n                  content={collapsible.content}\n                  open={collapsible.open}\n                />\n              ))}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  )\n}\n\nfunction CollapsibleDemo({\n  title,\n  content,\n  open,\n}: {\n  title: string\n  content: string\n  open?: boolean\n}) {\n  return (\n    <Collapsible className=\"border-t bg-accent px-4 py-3\" defaultOpen={open}>\n      <CollapsibleTrigger className=\"flex gap-2 text-[15px] leading-6 font-semibold [&[data-panel-open]>svg]:rotate-180\">\n        <ChevronDownIcon\n          size={16}\n          className=\"mt-1 shrink-0 opacity-60 transition-transform duration-200\"\n          aria-hidden=\"true\"\n        />\n        {title}\n      </CollapsibleTrigger>\n      <CollapsibleContent className=\"data-[panel-closed]:animate-collapsible-up data-[panel-open]:animate-collapsible-down mt-1 overflow-hidden ps-6 text-sm text-muted-foreground transition-all\">\n        {content}\n      </CollapsibleContent>\n    </Collapsible>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "categories": [
+    "accordion"
+  ]
+}
\ No newline at end of file
diff --git a/apps/ui/public/r/accordion-table.json b/apps/ui/public/r/accordion-table.json
new file mode 100644
index 000000000..c635e8309
--- /dev/null
+++ b/apps/ui/public/r/accordion-table.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "accordion-table",
+  "type": "registry:example",
+  "description": "Accordion with table like layout",
+  "registryDependencies": [
+    "https://coss.com/ui/r/accordion.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/examples/accordion-table.tsx",
+      "content": "import {\n  Accordion,\n  AccordionItem,\n  AccordionPanel,\n  AccordionTrigger,\n} from \"@/registry/default/ui/accordion\"\n\nexport default function AccordionTableDemo() {\n  return (\n    <Accordion className=\"w-full\" multiple={true}>\n      <AccordionItem\n        value=\"item-1\"\n        className=\"border border-b-0 first:rounded-t-lg last:rounded-b-lg last:border-b\"\n      >\n        <AccordionTrigger className=\"border-none px-4 py-3\">\n          What is Base UI?\n        </AccordionTrigger>\n        <AccordionPanel className=\"px-4\">\n          Base UI is a library of high-quality unstyled React components for\n          design systems and web apps.\n        </AccordionPanel>\n      </AccordionItem>\n      <AccordionItem\n        value=\"item-2\"\n        className=\"border border-b-0 first:rounded-t-lg last:rounded-b-lg last:border-b\"\n      >\n        <AccordionTrigger className=\"border-none px-4 py-3\">\n          How do I get started?\n        </AccordionTrigger>\n        <AccordionPanel className=\"px-4\">\n          Head to the \"Quick start\" guide in the docs. If you've used unstyled\n          libraries before, you'll feel at home.\n        </AccordionPanel>\n      </AccordionItem>\n      <AccordionItem\n        value=\"item-3\"\n        className=\"border border-b-0 first:rounded-t-lg last:rounded-b-lg last:border-b\"\n      >\n        <AccordionTrigger className=\"border-none px-4 py-3\">\n          Can I use it for my project?\n        </AccordionTrigger>\n        <AccordionPanel className=\"px-4\">\n          Of course! Base UI is free and open source.\n        </AccordionPanel>\n      </AccordionItem>\n    </Accordion>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "categories": [
+    "accordion"
+  ]
+}
\ No newline at end of file
diff --git a/apps/ui/public/r/accordion-tabs.json b/apps/ui/public/r/accordion-tabs.json
new file mode 100644
index 000000000..80c336f56
--- /dev/null
+++ b/apps/ui/public/r/accordion-tabs.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "accordion-tabs",
+  "type": "registry:example",
+  "description": "Accordion with tabs like layout",
+  "registryDependencies": [
+    "https://coss.com/ui/r/accordion.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/examples/accordion-tabs.tsx",
+      "content": "import {\n  Accordion,\n  AccordionItem,\n  AccordionPanel,\n  AccordionTrigger,\n} from \"@/registry/default/ui/accordion\"\n\nexport default function AccordionTabsDemo() {\n  return (\n    <Accordion className=\"w-full space-y-2\" multiple={true}>\n      <AccordionItem value=\"item-1\" className=\"rounded-lg border last:border-b\">\n        <AccordionTrigger className=\"border-none px-4 py-3\">\n          What is Base UI?\n        </AccordionTrigger>\n        <AccordionPanel className=\"px-4\">\n          Base UI is a library of high-quality unstyled React components for\n          design systems and web apps.\n        </AccordionPanel>\n      </AccordionItem>\n      <AccordionItem value=\"item-2\" className=\"rounded-lg border last:border-b\">\n        <AccordionTrigger className=\"border-none px-4 py-3\">\n          How do I get started?\n        </AccordionTrigger>\n        <AccordionPanel className=\"px-4\">\n          Head to the \"Quick start\" guide in the docs. If you've used unstyled\n          libraries before, you'll feel at home.\n        </AccordionPanel>\n      </AccordionItem>\n      <AccordionItem value=\"item-3\" className=\"rounded-lg border last:border-b\">\n        <AccordionTrigger className=\"border-none px-4 py-3\">\n          Can I use it for my project?\n        </AccordionTrigger>\n        <AccordionPanel className=\"px-4\">\n          Of course! Base UI is free and open source.\n        </AccordionPanel>\n      </AccordionItem>\n    </Accordion>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "categories": [
+    "accordion"
+  ]
+}
\ No newline at end of file
diff --git a/apps/ui/public/r/accordion-with-icon.json b/apps/ui/public/r/accordion-with-icon.json
new file mode 100644
index 000000000..f84974067
--- /dev/null
+++ b/apps/ui/public/r/accordion-with-icon.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "accordion-with-icon",
+  "type": "registry:example",
+  "description": "Accordion with icon",
+  "registryDependencies": [
+    "https://coss.com/ui/r/accordion.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/examples/accordion-with-icon.tsx",
+      "content": "import { AtSignIcon, CommandIcon, EclipseIcon, ZapIcon } from \"lucide-react\"\n\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/default/ui/accordion\"\n\nconst items = [\n  {\n    id: \"1\",\n    icon: CommandIcon,\n    title: \"What makes coss.com ui different?\",\n    content:\n      \"coss.com ui focuses on developer experience and performance. Built with TypeScript, it offers excellent type safety, follows accessibility standards, and provides comprehensive documentation with regular updates.\",\n  },\n  {\n    id: \"2\",\n    icon: EclipseIcon,\n    title: \"How can I customize the components?\",\n    content:\n      \"Use our CSS variables for global styling, or className and style props for component-specific changes. We support CSS modules, Tailwind, and dark mode out of the box.\",\n  },\n  {\n    id: \"3\",\n    icon: ZapIcon,\n    title: \"Is coss.com ui optimized for performance?\",\n    content:\n      \"Yes, with tree-shaking, code splitting, and minimal runtime overhead. Most components are under 5KB gzipped.\",\n  },\n  {\n    id: \"4\",\n    icon: AtSignIcon,\n    title: \"How accessible are the components?\",\n    content:\n      \"All components follow WAI-ARIA standards, featuring proper ARIA attributes, keyboard navigation, and screen reader support. Regular testing ensures compatibility with NVDA, VoiceOver, and JAWS.\",\n  },\n]\n\nexport default function Component() {\n  return (\n    <Accordion multiple={false} className=\"w-full\" defaultValue={[\"3\"]}>\n      {items.map((item) => (\n        <AccordionItem value={item.id} key={item.id} className=\"py-2\">\n          <AccordionTrigger className=\"py-2 text-[15px] leading-6 hover:no-underline\">\n            <span className=\"flex items-center gap-3\">\n              <item.icon\n                size={16}\n                className=\"shrink-0 opacity-60\"\n                aria-hidden=\"true\"\n              />\n              <span>{item.title}</span>\n            </span>\n          </AccordionTrigger>\n          <AccordionContent className=\"ps-7 pb-2 text-muted-foreground\">\n            {item.content}\n          </AccordionContent>\n        </AccordionItem>\n      ))}\n    </Accordion>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "categories": [
+    "accordion"
+  ]
+}
\ No newline at end of file
diff --git a/apps/ui/public/r/registry.json b/apps/ui/public/r/registry.json
index c372275d2..3928cba72 100644
--- a/apps/ui/public/r/registry.json
+++ b/apps/ui/public/r/registry.json
@@ -693,6 +693,75 @@
         "accordion"
       ]
     },
+    {
+      "name": "accordion-with-icon",
+      "description": "Accordion with icon",
+      "type": "registry:example",
+      "registryDependencies": [
+        "https://coss.com/ui/r/accordion.json"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/accordion-with-icon.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "categories": [
+        "accordion"
+      ]
+    },
+    {
+      "name": "accordion-multi-level",
+      "description": "Accordion with multiple levels",
+      "type": "registry:example",
+      "registryDependencies": [
+        "https://coss.com/ui/r/accordion.json",
+        "https://coss.com/ui/r/collapsible.json"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/accordion-multi-level.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "categories": [
+        "accordion"
+      ]
+    },
+    {
+      "name": "accordion-table",
+      "description": "Accordion with table like layout",
+      "type": "registry:example",
+      "registryDependencies": [
+        "https://coss.com/ui/r/accordion.json"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/accordion-table.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "categories": [
+        "accordion"
+      ]
+    },
+    {
+      "name": "accordion-tabs",
+      "description": "Accordion with tabs like layout",
+      "type": "registry:example",
+      "registryDependencies": [
+        "https://coss.com/ui/r/accordion.json"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/accordion-tabs.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "categories": [
+        "accordion"
+      ]
+    },
     {
       "name": "accordion-single",
       "description": "Accordion with one panel open",
diff --git a/apps/ui/registry.json b/apps/ui/registry.json
index c372275d2..3928cba72 100644
--- a/apps/ui/registry.json
+++ b/apps/ui/registry.json
@@ -693,6 +693,75 @@
         "accordion"
       ]
     },
+    {
+      "name": "accordion-with-icon",
+      "description": "Accordion with icon",
+      "type": "registry:example",
+      "registryDependencies": [
+        "https://coss.com/ui/r/accordion.json"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/accordion-with-icon.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "categories": [
+        "accordion"
+      ]
+    },
+    {
+      "name": "accordion-multi-level",
+      "description": "Accordion with multiple levels",
+      "type": "registry:example",
+      "registryDependencies": [
+        "https://coss.com/ui/r/accordion.json",
+        "https://coss.com/ui/r/collapsible.json"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/accordion-multi-level.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "categories": [
+        "accordion"
+      ]
+    },
+    {
+      "name": "accordion-table",
+      "description": "Accordion with table like layout",
+      "type": "registry:example",
+      "registryDependencies": [
+        "https://coss.com/ui/r/accordion.json"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/accordion-table.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "categories": [
+        "accordion"
+      ]
+    },
+    {
+      "name": "accordion-tabs",
+      "description": "Accordion with tabs like layout",
+      "type": "registry:example",
+      "registryDependencies": [
+        "https://coss.com/ui/r/accordion.json"
+      ],
+      "files": [
+        {
+          "path": "registry/default/examples/accordion-tabs.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "categories": [
+        "accordion"
+      ]
+    },
     {
       "name": "accordion-single",
       "description": "Accordion with one panel open",
diff --git a/apps/ui/registry/__index__.tsx b/apps/ui/registry/__index__.tsx
index b8d18eee6..762e50f0e 100644
--- a/apps/ui/registry/__index__.tsx
+++ b/apps/ui/registry/__index__.tsx
@@ -834,6 +834,78 @@ export const Index: Record<string, any> = {
     categories: ["accordion"],
     meta: undefined,
   },
+  "accordion-with-icon": {
+    name: "accordion-with-icon",
+    description: "Accordion with icon",
+    type: "registry:example",
+    registryDependencies: ["https://coss.com/ui/r/accordion.json"],
+    files: [{
+      path: "registry/default/examples/accordion-with-icon.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/default/examples/accordion-with-icon.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["accordion"],
+    meta: undefined,
+  },
+  "accordion-multi-level": {
+    name: "accordion-multi-level",
+    description: "Accordion with multiple levels",
+    type: "registry:example",
+    registryDependencies: ["https://coss.com/ui/r/accordion.json","https://coss.com/ui/r/collapsible.json"],
+    files: [{
+      path: "registry/default/examples/accordion-multi-level.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/default/examples/accordion-multi-level.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["accordion"],
+    meta: undefined,
+  },
+  "accordion-table": {
+    name: "accordion-table",
+    description: "Accordion with table like layout",
+    type: "registry:example",
+    registryDependencies: ["https://coss.com/ui/r/accordion.json"],
+    files: [{
+      path: "registry/default/examples/accordion-table.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/default/examples/accordion-table.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["accordion"],
+    meta: undefined,
+  },
+  "accordion-tabs": {
+    name: "accordion-tabs",
+    description: "Accordion with tabs like layout",
+    type: "registry:example",
+    registryDependencies: ["https://coss.com/ui/r/accordion.json"],
+    files: [{
+      path: "registry/default/examples/accordion-tabs.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/default/examples/accordion-tabs.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["accordion"],
+    meta: undefined,
+  },
   "accordion-single": {
     name: "accordion-single",
     description: "Accordion with one panel open",
diff --git a/apps/ui/registry/default/examples/accordion-multi-level.tsx b/apps/ui/registry/default/examples/accordion-multi-level.tsx
new file mode 100644
index 000000000..b1182d837
--- /dev/null
+++ b/apps/ui/registry/default/examples/accordion-multi-level.tsx
@@ -0,0 +1,138 @@
+import { ChevronDownIcon } from "lucide-react"
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/registry/default/ui/accordion"
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/registry/default/ui/collapsible"
+
+const items = [
+  {
+    id: "1",
+    title: "What makes coss.com ui different?",
+    collapsibles: [
+      {
+        title: "What about performance?",
+        content:
+          "We optimize every component for maximum performance and minimal bundle size.",
+      },
+      {
+        title: "How is the documentation?",
+        content:
+          "Our documentation is comprehensive and includes live examples for every component.",
+      },
+    ],
+  },
+  {
+    id: "2",
+    title: "How can I customize the components?",
+    collapsibles: [
+      {
+        title: "Can I use custom themes?",
+        content:
+          "Yes, our theming system is fully customizable and supports both light and dark modes.",
+      },
+      {
+        title: "What about Tailwind support?",
+        content:
+          "We have first-class support for Tailwind CSS with custom utility classes.",
+      },
+    ],
+  },
+  {
+    id: "3",
+    title: "Is coss.com ui optimized for performance?",
+    collapsibles: [
+      {
+        title: "What's the bundle size impact?",
+        content:
+          "Our components are tree-shakeable and typically add minimal overhead to your bundle.",
+        open: true,
+      },
+      {
+        title: "How is code splitting handled?",
+        content:
+          "We support automatic code splitting for optimal loading performance.",
+      },
+    ],
+  },
+  {
+    id: "4",
+    title: "How accessible are the components?",
+    collapsibles: [
+      {
+        title: "Which screen readers are supported?",
+        content:
+          "We test with NVDA, VoiceOver, and JAWS to ensure broad compatibility.",
+      },
+      {
+        title: "What about keyboard navigation?",
+        content:
+          "Full keyboard navigation support is implemented following WAI-ARIA best practices.",
+      },
+    ],
+  },
+]
+
+export default function Component() {
+  return (
+    <div className="space-y-4">
+      <h2 className="text-xl font-bold">Multi-level</h2>
+      <Accordion multiple className="w-full -space-y-px" defaultValue={["3"]}>
+        {items.map((item) => (
+          <AccordionItem
+            value={item.id}
+            key={item.id}
+            className="relative border bg-background outline-none first:rounded-t-md last:rounded-b-md last:border-b has-focus-visible:z-10 has-focus-visible:border-ring has-focus-visible:ring-[3px] has-focus-visible:ring-ring/50"
+          >
+            <AccordionTrigger className="rounded-md px-4 py-3 text-[15px] leading-6 outline-none hover:no-underline focus-visible:ring-0">
+              {item.title}
+            </AccordionTrigger>
+            <AccordionContent className="p-0">
+              {item.collapsibles.map((collapsible, index) => (
+                <CollapsibleDemo
+                  key={index}
+                  title={collapsible.title}
+                  content={collapsible.content}
+                  open={collapsible.open}
+                />
+              ))}
+            </AccordionContent>
+          </AccordionItem>
+        ))}
+      </Accordion>
+    </div>
+  )
+}
+
+function CollapsibleDemo({
+  title,
+  content,
+  open,
+}: {
+  title: string
+  content: string
+  open?: boolean
+}) {
+  return (
+    <Collapsible className="border-t bg-accent px-4 py-3" defaultOpen={open}>
+      <CollapsibleTrigger className="flex gap-2 text-[15px] leading-6 font-semibold [&[data-panel-open]>svg]:rotate-180">
+        <ChevronDownIcon
+          size={16}
+          className="mt-1 shrink-0 opacity-60 transition-transform duration-200"
+          aria-hidden="true"
+        />
+        {title}
+      </CollapsibleTrigger>
+      <CollapsibleContent className="data-[panel-closed]:animate-collapsible-up data-[panel-open]:animate-collapsible-down mt-1 overflow-hidden ps-6 text-sm text-muted-foreground transition-all">
+        {content}
+      </CollapsibleContent>
+    </Collapsible>
+  )
+}
diff --git a/apps/ui/registry/default/examples/accordion-table.tsx b/apps/ui/registry/default/examples/accordion-table.tsx
new file mode 100644
index 000000000..ca95ff5ea
--- /dev/null
+++ b/apps/ui/registry/default/examples/accordion-table.tsx
@@ -0,0 +1,48 @@
+import {
+  Accordion,
+  AccordionItem,
+  AccordionPanel,
+  AccordionTrigger,
+} from "@/registry/default/ui/accordion"
+
+export default function AccordionTableDemo() {
+  return (
+    <Accordion className="w-full" multiple={true}>
+      <AccordionItem
+        value="item-1"
+        className="border border-b-0 first:rounded-t-lg last:rounded-b-lg last:border-b"
+      >
+        <AccordionTrigger className="border-none px-4 py-3">
+          What is Base UI?
+        </AccordionTrigger>
+        <AccordionPanel className="px-4">
+          Base UI is a library of high-quality unstyled React components for
+          design systems and web apps.
+        </AccordionPanel>
+      </AccordionItem>
+      <AccordionItem
+        value="item-2"
+        className="border border-b-0 first:rounded-t-lg last:rounded-b-lg last:border-b"
+      >
+        <AccordionTrigger className="border-none px-4 py-3">
+          How do I get started?
+        </AccordionTrigger>
+        <AccordionPanel className="px-4">
+          Head to the "Quick start" guide in the docs. If you've used unstyled
+          libraries before, you'll feel at home.
+        </AccordionPanel>
+      </AccordionItem>
+      <AccordionItem
+        value="item-3"
+        className="border border-b-0 first:rounded-t-lg last:rounded-b-lg last:border-b"
+      >
+        <AccordionTrigger className="border-none px-4 py-3">
+          Can I use it for my project?
+        </AccordionTrigger>
+        <AccordionPanel className="px-4">
+          Of course! Base UI is free and open source.
+        </AccordionPanel>
+      </AccordionItem>
+    </Accordion>
+  )
+}
diff --git a/apps/ui/registry/default/examples/accordion-tabs.tsx b/apps/ui/registry/default/examples/accordion-tabs.tsx
new file mode 100644
index 000000000..1a4b0602d
--- /dev/null
+++ b/apps/ui/registry/default/examples/accordion-tabs.tsx
@@ -0,0 +1,39 @@
+import {
+  Accordion,
+  AccordionItem,
+  AccordionPanel,
+  AccordionTrigger,
+} from "@/registry/default/ui/accordion"
+
+export default function AccordionTabsDemo() {
+  return (
+    <Accordion className="w-full space-y-2" multiple={true}>
+      <AccordionItem value="item-1" className="rounded-lg border last:border-b">
+        <AccordionTrigger className="border-none px-4 py-3">
+          What is Base UI?
+        </AccordionTrigger>
+        <AccordionPanel className="px-4">
+          Base UI is a library of high-quality unstyled React components for
+          design systems and web apps.
+        </AccordionPanel>
+      </AccordionItem>
+      <AccordionItem value="item-2" className="rounded-lg border last:border-b">
+        <AccordionTrigger className="border-none px-4 py-3">
+          How do I get started?
+        </AccordionTrigger>
+        <AccordionPanel className="px-4">
+          Head to the "Quick start" guide in the docs. If you've used unstyled
+          libraries before, you'll feel at home.
+        </AccordionPanel>
+      </AccordionItem>
+      <AccordionItem value="item-3" className="rounded-lg border last:border-b">
+        <AccordionTrigger className="border-none px-4 py-3">
+          Can I use it for my project?
+        </AccordionTrigger>
+        <AccordionPanel className="px-4">
+          Of course! Base UI is free and open source.
+        </AccordionPanel>
+      </AccordionItem>
+    </Accordion>
+  )
+}
diff --git a/apps/ui/registry/default/examples/accordion-with-icon.tsx b/apps/ui/registry/default/examples/accordion-with-icon.tsx
new file mode 100644
index 000000000..909d57f0a
--- /dev/null
+++ b/apps/ui/registry/default/examples/accordion-with-icon.tsx
@@ -0,0 +1,63 @@
+import { AtSignIcon, CommandIcon, EclipseIcon, ZapIcon } from "lucide-react"
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/registry/default/ui/accordion"
+
+const items = [
+  {
+    id: "1",
+    icon: CommandIcon,
+    title: "What makes coss.com ui different?",
+    content:
+      "coss.com ui focuses on developer experience and performance. Built with TypeScript, it offers excellent type safety, follows accessibility standards, and provides comprehensive documentation with regular updates.",
+  },
+  {
+    id: "2",
+    icon: EclipseIcon,
+    title: "How can I customize the components?",
+    content:
+      "Use our CSS variables for global styling, or className and style props for component-specific changes. We support CSS modules, Tailwind, and dark mode out of the box.",
+  },
+  {
+    id: "3",
+    icon: ZapIcon,
+    title: "Is coss.com ui optimized for performance?",
+    content:
+      "Yes, with tree-shaking, code splitting, and minimal runtime overhead. Most components are under 5KB gzipped.",
+  },
+  {
+    id: "4",
+    icon: AtSignIcon,
+    title: "How accessible are the components?",
+    content:
+      "All components follow WAI-ARIA standards, featuring proper ARIA attributes, keyboard navigation, and screen reader support. Regular testing ensures compatibility with NVDA, VoiceOver, and JAWS.",
+  },
+]
+
+export default function Component() {
+  return (
+    <Accordion multiple={false} className="w-full" defaultValue={["3"]}>
+      {items.map((item) => (
+        <AccordionItem value={item.id} key={item.id} className="py-2">
+          <AccordionTrigger className="py-2 text-[15px] leading-6 hover:no-underline">
+            <span className="flex items-center gap-3">
+              <item.icon
+                size={16}
+                className="shrink-0 opacity-60"
+                aria-hidden="true"
+              />
+              <span>{item.title}</span>
+            </span>
+          </AccordionTrigger>
+          <AccordionContent className="ps-7 pb-2 text-muted-foreground">
+            {item.content}
+          </AccordionContent>
+        </AccordionItem>
+      ))}
+    </Accordion>
+  )
+}
diff --git a/apps/ui/registry/default/particles/index.tsx b/apps/ui/registry/default/particles/index.tsx
index cfa5a24b3..84c2c0cd7 100644
--- a/apps/ui/registry/default/particles/index.tsx
+++ b/apps/ui/registry/default/particles/index.tsx
@@ -2,8 +2,12 @@ import * as React from "react"
 
 import AccordionControlled from "@/registry/default/examples/accordion-controlled"
 import AccordionDemo from "@/registry/default/examples/accordion-demo"
+import AccordionMultiLevel from "@/registry/default/examples/accordion-multi-level"
 import AccordionMultiple from "@/registry/default/examples/accordion-multiple"
 import AccordionSingle from "@/registry/default/examples/accordion-single"
+import AccordionTable from "@/registry/default/examples/accordion-table"
+import AccordionTabs from "@/registry/default/examples/accordion-tabs"
+import AccordionWithIcon from "@/registry/default/examples/accordion-with-icon"
 import AlertDemo from "@/registry/default/examples/alert-demo"
 import AlertDialogDemo from "@/registry/default/examples/alert-dialog-demo"
 import AlertError from "@/registry/default/examples/alert-error"
@@ -1143,6 +1147,34 @@ export const particles: ParticleItem[] = [
     className:
       "**:data-[slot=particle-wrapper]:w-full sm:**:data-[slot=particle-wrapper]:max-w-[80%]",
   },
+  {
+    id: "accordion-tabs",
+    component: AccordionTabs,
+    category: ["accordion"],
+    className:
+      "**:data-[slot=particle-wrapper]:w-full sm:**:data-[slot=particle-wrapper]:max-w-[80%]",
+  },
+  {
+    id: "accordion-table",
+    component: AccordionTable,
+    category: ["accordion"],
+    className:
+      "**:data-[slot=particle-wrapper]:w-full sm:**:data-[slot=particle-wrapper]:max-w-[80%]",
+  },
+  {
+    id: "accordion-with-icon",
+    component: AccordionWithIcon,
+    category: ["accordion"],
+    className:
+      "**:data-[slot=particle-wrapper]:w-full sm:**:data-[slot=particle-wrapper]:max-w-[80%]",
+  },
+  {
+    id: "accordion-multi-level",
+    component: AccordionMultiLevel,
+    category: ["accordion"],
+    className:
+      "**:data-[slot=particle-wrapper]:w-full sm:**:data-[slot=particle-wrapper]:max-w-[80%]",
+  },
   {
     id: "tooltip-demo",
     component: TooltipDemo,
diff --git a/apps/ui/registry/registry-examples.ts b/apps/ui/registry/registry-examples.ts
index 0521d1c5a..cc0a6d0fe 100644
--- a/apps/ui/registry/registry-examples.ts
+++ b/apps/ui/registry/registry-examples.ts
@@ -43,6 +43,61 @@ export const examples: Registry["items"] = [
     ],
     categories: ["accordion"],
   },
+  {
+    name: "accordion-with-icon",
+    description: "Accordion with icon",
+    type: "registry:example",
+    registryDependencies: ["https://coss.com/ui/r/accordion.json"],
+    files: [
+      {
+        path: "examples/accordion-with-icon.tsx",
+        type: "registry:example",
+      },
+    ],
+    categories: ["accordion"],
+  },
+  {
+    name: "accordion-multi-level",
+    description: "Accordion with multiple levels",
+    type: "registry:example",
+    registryDependencies: [
+      "https://coss.com/ui/r/accordion.json",
+      "https://coss.com/ui/r/collapsible.json",
+    ],
+    files: [
+      {
+        path: "examples/accordion-multi-level.tsx",
+        type: "registry:example",
+      },
+    ],
+    categories: ["accordion"],
+  },
+  {
+    name: "accordion-table",
+    description: "Accordion with table like layout",
+    type: "registry:example",
+    registryDependencies: ["https://coss.com/ui/r/accordion.json"],
+    files: [
+      {
+        path: "examples/accordion-table.tsx",
+        type: "registry:example",
+      },
+    ],
+    categories: ["accordion"],
+  },
+  {
+    name: "accordion-tabs",
+    description: "Accordion with tabs like layout",
+    type: "registry:example",
+    registryDependencies: ["https://coss.com/ui/r/accordion.json"],
+    files: [
+      {
+        path: "examples/accordion-tabs.tsx",
+        type: "registry:example",
+      },
+    ],
+    categories: ["accordion"],
+  },
   {
     name: "accordion-single",
     description: "Accordion with one panel open",