Icon Plus Accordion

Collapsible content panels with custom icons and plus/minus indicators. Perfect for React applications requiring feature sections with animated controls and Next.js integration and TypeScript support.

Radix UI

Loading component...

'use client';import { PlusIcon } from 'lucide-react';import * as AccordionPrimitive from '@radix-ui/react-accordion';import {  Accordion,  AccordionContent,  AccordionItem,} from '@/components/ui/accordion';import { cn } from '@/lib/utils';import { LucideIcon } from 'lucide-react';export type Accordion06Props = React.ComponentProps<typeof Accordion>;export const Accordion06 = ({ className, ...props }: Accordion06Props) => (  <Accordion className={cn('w-full', className)} {...props} />);export type Accordion06ItemProps = React.ComponentProps<typeof AccordionItem>;export const Accordion06Item = ({ className, ...props }: Accordion06ItemProps) => (  <AccordionItem className={cn('py-2', className)} {...props} />);export type Accordion06HeaderProps = React.ComponentProps<typeof AccordionPrimitive.Header>;export const Accordion06Header = ({ className, ...props }: Accordion06HeaderProps) => (  <AccordionPrimitive.Header className={cn('flex', className)} {...props} />);export interface Accordion06TriggerProps extends React.ComponentProps<typeof AccordionPrimitive.Trigger> {  icon?: LucideIcon;  children: React.ReactNode;}export const Accordion06Trigger = ({ className, icon: Icon, children, ...props }: Accordion06TriggerProps) => (  <AccordionPrimitive.Trigger     className={cn(      'focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-center justify-between gap-4 rounded-md py-2 text-left text-sm text-[15px] leading-6 font-semibold transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&>svg>path:last-child]:origin-center [&>svg>path:last-child]:transition-all [&>svg>path:last-child]:duration-200 [&[data-state=open]>svg]:rotate-180 [&[data-state=open]>svg>path:last-child]:rotate-90 [&[data-state=open]>svg>path:last-child]:opacity-0',      className    )}     {...props}  >    <span className="flex items-center gap-3">      {Icon && (        <Icon          size={16}          className="shrink-0 opacity-60"          aria-hidden="true"        />      )}      <span>{children}</span>    </span>    <PlusIcon      size={16}      className="pointer-events-none shrink-0 opacity-60 transition-transform duration-200"      aria-hidden="true"    />  </AccordionPrimitive.Trigger>);export type Accordion06ContentProps = React.ComponentProps<typeof AccordionContent>;export const Accordion06Content = ({ className, ...props }: Accordion06ContentProps) => (  <AccordionContent     className={cn('text-muted-foreground ps-7 pb-2', className)}     {...props}   />);

Installation

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

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

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

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

Features

Custom icons with plus/minus combining visual categorization with animated expand indicators
Advanced animation sequences including rotation, opacity transitions, and path transformations
Content indentation alignment with proper spacing using padding-start utilities
TypeScript icon integration with LucideIcon type definitions for type safety
Complex trigger layout with icon, text, and animated plus/minus components
shadcn/ui integration using consistent design tokens and Tailwind CSS styling

Use Cases

This free open source React component works well for:

Product feature lists - Detailed features with icons and expandable descriptions built with Next.js
Service offerings - Categorized services with visual indicators using TypeScript
FAQ sections - Help topics with relevant icons and detailed answers for React applications
Feature comparisons - Product capabilities with visual hierarchy using Tailwind CSS

API Reference

Accordion06

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

Accordion06Item

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

Accordion06Header

Prop	Type	Default	Description
`children`	`ReactNode`	required	Content to wrap in accordion header

Accordion06Trigger

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

Accordion06Content

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

Implementation Notes

Combines custom icon rendering with complex plus/minus animations
Uses advanced CSS selectors for multi-layer animation effects on plus icon paths
Content indentation with ps-7 ensures proper alignment with icon positioning
Icons are conditionally rendered based on prop availability with proper styling
Focus ring and keyboard navigation built-in for accessibility compliance
Compatible with shadcn/ui design system and Tailwind CSS utility classes

Icon Plus Accordion

Reactaccordion-06

On this page