Card Plus Accordion

Collapsible content panels with circular icon containers, main titles, descriptive subtitles, and plus/minus indicators. Perfect for React applications requiring premium section headers with animated controls and Next.js integration and TypeScript support.

Radix UI

Loading component...

import {  BellIcon,  LifeBuoyIcon,  Link2Icon,  ShieldCheckIcon,} from "lucide-react";import {  Accordion10,  Accordion10Content,  Accordion10Header,  Accordion10Item,  Accordion10Trigger,} from '@/components/ui/shadcn-io/accordion-10';const items = [  {    id: "1",    icon: Link2Icon,    title: "Connected accounts",    subtitle: "Manage your linked social and work accounts",    content:      "Connect your accounts from Google, GitHub, or Microsoft to enable single sign-on and streamline your workflow. Connected accounts can be used for quick login and importing your preferences across platforms. You can revoke access to any connected account at any time.",  },  {    id: "2",    icon: BellIcon,    title: "Notifications",    subtitle: "Customize your notification preferences",    content:      "Choose which updates you want to receive. You can get notifications for: security alerts, billing updates, newsletter and product announcements, usage reports, and scheduled maintenance. Notifications can be delivered via email, SMS, or push notifications on your devices.",  },  {    id: "3",    icon: ShieldCheckIcon,    title: "2-step verification",    subtitle: "Add an extra layer of security to your account",    content:      "Protect your account with two-factor authentication. You can use authenticator apps like Google Authenticator or Authy, receive SMS codes, or use security keys like YubiKey. We recommend using an authenticator app for the most secure experience.",  },  {    id: "4",    icon: LifeBuoyIcon,    title: "Contact support",    subtitle: "We're here to help 24/7",    content:      "Our support team is available around the clock to assist you. For billing inquiries, technical issues, or general questions, you can reach us through live chat, email at [email protected], or schedule a call with our technical team. Premium support is available for enterprise customers.",  },];export default function Component() {  return (    <div className="flex justify-center">      <Accordion10 type="single" collapsible className="w-full max-w-2xl" defaultValue="3">        {items.map((item) => (          <Accordion10Item value={item.id} key={item.id}>            <Accordion10Header>              <Accordion10Trigger                 icon={item.icon}                title={item.title}                subtitle={item.subtitle}              />            </Accordion10Header>            <Accordion10Content>              {item.content}            </Accordion10Content>          </Accordion10Item>        ))}      </Accordion10>    </div>  );}

'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 Accordion10Props = React.ComponentProps<typeof Accordion>;export const Accordion10 = ({ className, ...props }: Accordion10Props) => (  <Accordion className={cn('w-full', className)} {...props} />);export type Accordion10ItemProps = React.ComponentProps<typeof AccordionItem>;export const Accordion10Item = ({ className, ...props }: Accordion10ItemProps) => (  <AccordionItem className={cn('py-2', className)} {...props} />);export type Accordion10HeaderProps = React.ComponentProps<typeof AccordionPrimitive.Header>;export const Accordion10Header = ({ className, ...props }: Accordion10HeaderProps) => (  <AccordionPrimitive.Header className={cn('flex', className)} {...props} />);export interface Accordion10TriggerProps {  icon?: LucideIcon;  title: React.ReactNode;  subtitle?: React.ReactNode;  className?: string;}export const Accordion10Trigger = ({ className, icon: Icon, title, subtitle }: Accordion10TriggerProps) => (  <AccordionPrimitive.Trigger     className={cn(      'focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-center justify-between rounded-md py-2 text-left text-[15px] leading-6 font-semibold transition-all outline-none focus-visible:ring-[3px] [&>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    )}  >    <span className="flex items-center gap-3">      {Icon && (        <span          className="flex size-10 shrink-0 items-center justify-center rounded-full border"          aria-hidden="true"        >          <Icon size={16} className="opacity-60" />        </span>      )}      <span className="flex flex-col space-y-1">        <span>{title}</span>        {subtitle && (          <span className="text-sm font-normal">{subtitle}</span>        )}      </span>    </span>    <PlusIcon      size={16}      className="pointer-events-none shrink-0 opacity-60 transition-transform duration-200"      aria-hidden="true"    />  </AccordionPrimitive.Trigger>);export type Accordion10ContentProps = React.ComponentProps<typeof AccordionContent>;export const Accordion10Content = ({ className, ...props }: Accordion10ContentProps) => (  <AccordionContent     className={cn('text-muted-foreground ms-3 ps-10 pb-2', className)}     {...props}   />);

Installation

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

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

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

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

Features

Circular icon containers with plus/minus combining visual branding with advanced animation sequences
Complex animation layers including rotation, opacity transitions, and path transformations on plus icon
Content indentation alignment with proper spacing using margin and padding utilities
Premium visual design with bordered icon containers and professional typography hierarchy
Optional icon rendering with conditional display based on prop availability
shadcn/ui integration using consistent design tokens and Tailwind CSS styling

Use Cases

This free open source React component works well for:

Premium dashboards - Feature panels with branded icons and animated controls built with Next.js
Enterprise settings - Configuration sections with professional presentation using TypeScript
Product showcases - Feature descriptions with visual hierarchy for React applications
Service portfolios - Business offerings with clear branding using Tailwind CSS

API Reference

Accordion10

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

Accordion10Item

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

Accordion10Header

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

Accordion10Trigger

Prop	Type	Default	Description
`icon`	`LucideIcon`	`undefined`	Optional Lucide React icon component to display in circular container
`title`	`ReactNode`	required	Main title text to display in the trigger
`subtitle`	`ReactNode`	`undefined`	Optional subtitle text to display below title

Accordion10Content

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

Implementation Notes

Combines circular icon containers with complex plus/minus animation sequences
Uses advanced CSS selectors for multi-layer animation effects on plus icon paths
Content indentation with ms-3 ps-10 ensures proper alignment with icon positioning
Icons are rendered in circular containers with size-10 and border styling
Focus ring and keyboard navigation built-in for accessibility compliance
Compatible with shadcn/ui design system and Tailwind CSS utility classes

Card Plus Accordion

Reactaccordion-10

On this page