Multi-level Icon Accordion

Collapsible content panels with nested collapsible sections and icon support at all levels. Perfect for React applications requiring hierarchical content organization with visual indicators and Next.js integration and TypeScript support.

Radix UI

Loading component...

import {  AtSignIcon,  CircleDashedIcon,  CommandIcon,  EclipseIcon,  GaugeIcon,  ZapIcon,} from 'lucide-react';import {  Accordion20,  Accordion20Collapsible,  Accordion20Content,  Accordion20Item,  Accordion20Trigger,} from '@/components/ui/shadcn-io/accordion-20';const items = [  {    id: '1',    title: 'What makes shadcn.io different?',    icon: CommandIcon,    collapsibles: [      {        title: 'What about performance?',        content: 'We optimize every component for maximum performance and minimal bundle size.',        icon: GaugeIcon,      },      {        title: 'How is the documentation?',        content: 'Our documentation is comprehensive and includes live examples for every component.',        icon: CircleDashedIcon,      },    ],  },  {    id: '2',    title: 'How can I customize the components?',    icon: EclipseIcon,    collapsibles: [      {        title: 'Can I use custom themes?',        content: 'Yes, our theming system is fully customizable and supports both light and dark modes.',        icon: GaugeIcon,      },      {        title: 'What about Tailwind support?',        content: 'We have first-class support for Tailwind CSS with custom utility classes.',        icon: CircleDashedIcon,      },    ],  },  {    id: '3',    title: 'Is shadcn.io optimized for performance?',    icon: ZapIcon,    collapsibles: [      {        title: "What's the bundle size impact?",        content: 'Our components are tree-shakeable and typically add minimal overhead to your bundle.',        open: true,        icon: GaugeIcon,      },      {        title: 'How is code splitting handled?',        content: 'We support automatic code splitting for optimal loading performance.',        icon: CircleDashedIcon,      },    ],  },  {    id: '4',    title: 'How accessible are the components?',    icon: AtSignIcon,    collapsibles: [      {        title: 'Which screen readers are supported?',        content: 'We test with NVDA, VoiceOver, and JAWS to ensure broad compatibility.',        icon: GaugeIcon,      },      {        title: 'What about keyboard navigation?',        content: 'Full keyboard navigation support is implemented following WAI-ARIA best practices.',        icon: CircleDashedIcon,      },    ],  },];export default function Component() {  return (    <div className="mx-auto max-w-2xl">      <Accordion20 type="single" collapsible defaultValue="3">        {items.map((item) => (          <Accordion20Item value={item.id} key={item.id}>            <Accordion20Trigger icon={item.icon}>{item.title}</Accordion20Trigger>            <Accordion20Content>              {item.collapsibles.map((collapsible, index) => (                <Accordion20Collapsible                  key={index}                  title={collapsible.title}                  content={collapsible.content}                  open={collapsible.open}                  icon={collapsible.icon}                />              ))}            </Accordion20Content>          </Accordion20Item>        ))}      </Accordion20>    </div>  );}

'use client';import {  Accordion,  AccordionContent,  AccordionItem,  AccordionTrigger,} from '@/components/ui/accordion';import {  Collapsible,  CollapsibleContent,  CollapsibleTrigger,} from '@/components/ui/collapsible';import { cn } from '@/lib/utils';import { ChevronDownIcon, type LucideIcon } from 'lucide-react';export type Accordion20Props = React.ComponentProps<typeof Accordion>;export const Accordion20 = ({ className, ...props }: Accordion20Props) => (  <Accordion className={cn('w-full', className)} {...props} />);export type Accordion20ItemProps = React.ComponentProps<typeof AccordionItem>;export const Accordion20Item = ({ className, ...props }: Accordion20ItemProps) => (  <AccordionItem    className={cn(      'has-focus-visible:border-ring has-focus-visible:ring-ring/50 outline-none has-focus-visible:ring-[3px]',      className,    )}    {...props}  />);export interface Accordion20TriggerProps {  children: React.ReactNode;  icon?: LucideIcon;  className?: string;}export const Accordion20Trigger = ({ children, icon: Icon, className }: Accordion20TriggerProps) => (  <AccordionTrigger    className={cn(      'justify-start gap-3 rounded-md text-[15px] leading-6 outline-none hover:no-underline focus-visible:ring-0 [&>svg]:-order-1',      className,    )}  >    <span className="flex items-center gap-3">      {Icon && <Icon size={16} className="shrink-0 opacity-60" aria-hidden="true" />}      <span>{children}</span>    </span>  </AccordionTrigger>);export type Accordion20ContentProps = React.ComponentProps<typeof AccordionContent>;export const Accordion20Content = ({ className, ...props }: Accordion20ContentProps) => (  <AccordionContent className={cn('p-0', className)} {...props} />);export interface Accordion20CollapsibleProps {  title: string;  content: string;  open?: boolean;  icon: LucideIcon;  className?: string;}export const Accordion20Collapsible = ({  title,  content,  open,  icon: Icon,  className,}: Accordion20CollapsibleProps) => (  <Collapsible className={cn('border-t py-3 ps-6 pe-4', className)} defaultOpen={open}>    <CollapsibleTrigger className="flex gap-2 text-[15px] leading-6 font-semibold [&[data-state=open]>svg]:rotate-180">      <ChevronDownIcon        size={16}        className="mt-1 shrink-0 opacity-60 transition-transform duration-200"        aria-hidden="true"      />      <span className="flex items-center gap-3">        <Icon size={16} className="shrink-0 opacity-60" aria-hidden="true" />        <span>{title}</span>      </span>    </CollapsibleTrigger>    <CollapsibleContent className="text-muted-foreground data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down mt-1 overflow-hidden ps-6 text-sm transition-all">      {content}    </CollapsibleContent>  </Collapsible>);

Installation

npx shadcn@latest add https://www.shadcn.io/registry/accordion-20.json

npx shadcn@latest add https://www.shadcn.io/registry/accordion-20.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/accordion-20.json

bunx shadcn@latest add https://www.shadcn.io/registry/accordion-20.json

Features

Multi-level icon design combining accordion and collapsible components with icon support at all hierarchy levels
Visual branding enhancement with customizable Lucide React icons for both primary and secondary content sections
Enhanced focus management with ring visibility controls optimized for icon-rich nested structure
Flexible icon positioning with proper spacing and opacity for visual hierarchy differentiation
Chevron rotation animations with smooth transitions for both accordion and collapsible states
shadcn/ui integration using consistent design tokens and Tailwind CSS styling

Use Cases

This free open source React component works well for:

Feature showcases - Product capabilities with branded icons and detailed sub-features built with Next.js
Service portfolios - Business offerings with visual indicators and nested service details using TypeScript
Navigation menus - Multi-level menu structures with icon-based categorization for React applications
Dashboard sections - Administrative panels with icon-coded sections and sub-options using Tailwind CSS

API Reference

Accordion20

Prop	Type	Default	Description
`type`	`'single' \| 'multiple'`	required	Whether single or multiple items can be expanded
`collapsible`	`boolean`	`false`	Whether expanded items can be collapsed
`defaultValue`	`string \| string[]`	`undefined`	Default expanded item(s)
`value`	`string \| string[]`	`undefined`	Controlled expanded item(s)
`onValueChange`	`(value: string \| string[]) => void`	`undefined`	Callback when expanded items change

Accordion20Item

Prop	Type	Default	Description
`value`	`string`	required	Unique identifier for this accordion item

Accordion20Trigger

Prop	Type	Default	Description
`children`	`ReactNode`	required	Content to display in the trigger button
`icon`	`LucideIcon`	`undefined`	Optional Lucide React icon to display with title

Accordion20Content

Prop	Type	Default	Description
`children`	`ReactNode`	required	Content to display when expanded

Accordion20Collapsible

Prop	Type	Default	Description
`title`	`string`	required	Title text for the collapsible header
`content`	`string`	required	Content text to display when expanded
`open`	`boolean`	`false`	Whether the collapsible starts open
`icon`	`LucideIcon`	required	Lucide React icon to display with title

Implementation Notes

Combines accordion and collapsible components with comprehensive icon support for visual hierarchy
Icons positioned with proper spacing using flexbox layout and gap-3 for consistent alignment
Optional icon rendering with conditional display based on prop availability for accordion triggers
Required icon support for collapsible sections ensuring visual consistency at secondary level
Zero padding on accordion content (p-0) allows collapsible sections to extend to edges
Compatible with shadcn/ui design system and Tailwind CSS utility classes

Multi-level Icon Accordion

Reactaccordion-20

On this page