feat: add new accordion particles

[akash3444]

• Introduced multiple accordion particles: "accordion-with-icon", "accordion-multi-level", "accordion-table", and "accordion-tabs".

Screen.Recording.2025-10-19.at.2.34.56.PM.mov

---

Summary by cubic

Adds four new accordion particles—accordion-with-icon, accordion-multi-level, accordion-table, and accordion-tabs—now available in the UI registry and particles.

• New Features
  • Icon support in accordion triggers.
  • Nested collapsibles inside panels.
  • Table-like grouped rows with border styling.
  • Tab-like cards with spaced items.

[vercel]

@akash3444 is attempting to deploy a commit to the cal Team on Vercel.

A member of the Team first needs to authorize it.

[cubic-dev-ai]

2 issues found across 13 files

Prompt for AI agents (all 2 issues)

Understand the root cause of the following 2 issues and fix them.


<file name="apps/ui/registry/registry-examples.ts">

<violation number="1" location="apps/ui/registry/registry-examples.ts:50">
accordion-multi-level pulls Collapsible components but the registryDependencies only include the accordion package, so installing this example will fail because the collapsible package is missing.</violation>
</file>

<file name="apps/ui/registry/default/examples/accordion-tabs.tsx">

<violation number="1" location="apps/ui/registry/default/examples/accordion-tabs.tsx:10">
Please use the `type=&quot;multiple&quot;` prop instead of `multiple={true}`; the Base UI accordion mirrors the Radix API, so this prop is ignored and the demo still behaves like a single-select accordion.</violation>
</file>

---

Since this is your first cubic review, here's how it works:

• cubic automatically reviews your code and comments on bugs and improvements
• Teach cubic by replying to its comments. cubic learns from your replies and gets better over time
• Ask questions if you need clarification on any suggestion

_{React with 👍 or 👎 to teach cubic. Mention @cubic-dev-ai to give feedback, ask questions, or re-run the review.}

[pasqualevitiello]

Hey @akash3444 , thanks a lot for contributing, we really appreciate it!

I just need to ask you to adjust a few things:

1. We won’t include these components in the documentation, as they belong to the particles collection. For that reason, components should be placed inside the particles folder and named following this convention:
   particle-ac-1.tsx, particle-ac-2.tsx, etc.
   You can read the guidelines here: https://github.com/cosscom/coss/blob/main/apps/ui/CONTRIBUTING.md

2. Please make sure your branch is up to date with main.

3. As for the components themselves, try to keep the style consistent with other coss ui components. For example, the current accordion-tabs.tsx looks visually better with these classnames:

<AccordionItem
  value="item-1"
  className="rounded-xl border last:border-b relative shadow-xs before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:bg-clip-border dark:before:shadow-[0_-1px_--theme(--color-white/8%)]"
/>

4. Also, in accordion-multi-level.tsx, a bg-muted/50 on nested accordion items would likely look better than bg-accent.

[akash3444]

Hey @pasqualevitiello! Thanks a lot for the detailed feedback and for pointing me in the right direction.

I noticed a few components inside the examples folder being used in particles, so I followed that pattern earlier, my bad. I’ll move the components into the particles folder and rename them accordingly.

I’ll also tweak the styles to match the coss UI look and feel as much as possible.

[pasqualevitiello]

no worries, @akash3444!