shadcn.io is not affiliated with official shadcn/ui
Accordion examples · Standard
Accordion with Icons and Plus/Minus Toggle for React
An accordion of workspace sections with a category icon before each title and a plus that turns into a minus when the section opens.
Category icons on the left, a plus/minus toggle on the right. This React accordion hides the built-in chevron and draws a plus that fades into a minus when a section opens, while an icon before each title says what kind of content it holds. Use it for workspace and admin panels where the sections differ in kind.
Preview
Installation
FAQ
Where do the category icons come from?
Each item stores FileTextIcon, FolderIcon, SettingsIcon or UsersIcon at size-4, with text-muted-foreground and aria-hidden, in a gap-3 row before the title.
How does the plus turn into a minus?
**:data-[slot=accordion-trigger-icon]:hidden on AccordionTrigger hides the built-in chevron. PlusIcon and MinusIcon share one relative size-4 box, and group-aria-expanded/accordion-trigger fades the plus out and the minus in over duration-200. Both icons are aria-hidden and text-muted-foreground.
Why is the answer indented?
ps-7 on AccordionContent matches the 16px icon plus the 12px gap-3, so the answer lines up under the title.
Why does Documents start open?
defaultValue={["documents"]} opens Documents on first render. The string matches that item's value.
Related
- Accordion with Category IconsAn accordion of workspace sections, each
- Accordion with Plus/Minus ToggleA bordered accordion of billing questions
- Full Featured AccordionAn accordion of workspace sections where
- Multi-Level Accordion with IconsAn accordion of workspace sections with a
- Accordion Form with Icon SectionsA form split into personal, contact and
- Accordion with Subtitle TextA bordered accordion of help topics where