Card Icon Accordion

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

Radix UI

Loading component...

import {  BellIcon,  LifeBuoyIcon,  Link2Icon,  ShieldCheckIcon,} from "lucide-react";import {  Accordion09,  Accordion09Content,  Accordion09Header,  Accordion09Item,  Accordion09Trigger,} from '@/components/ui/shadcn-io/accordion-09';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">      <Accordion09 type="single" collapsible className="w-full max-w-2xl" defaultValue="3">        {items.map((item) => (          <Accordion09Item value={item.id} key={item.id}>            <Accordion09Header>              <Accordion09Trigger                 icon={item.icon}                title={item.title}                subtitle={item.subtitle}              />            </Accordion09Header>            <Accordion09Content>              {item.content}            </Accordion09Content>          </Accordion09Item>        ))}      </Accordion09>    </div>  );}

'use client';import { ChevronDownIcon } 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 Accordion09Props = React.ComponentProps<typeof Accordion>;export const Accordion09 = ({ className, ...props }: Accordion09Props) => (  <Accordion className={cn('w-full', className)} {...props} />);export type Accordion09ItemProps = React.ComponentProps<typeof AccordionItem>;export const Accordion09Item = ({ className, ...props }: Accordion09ItemProps) => (  <AccordionItem className={cn('py-2', className)} {...props} />);export type Accordion09HeaderProps = React.ComponentProps<typeof AccordionPrimitive.Header>;export const Accordion09Header = ({ className, ...props }: Accordion09HeaderProps) => (  <AccordionPrimitive.Header className={cn('flex', className)} {...props} />);export interface Accordion09TriggerProps {  icon?: LucideIcon;  title: React.ReactNode;  subtitle?: React.ReactNode;  className?: string;}export const Accordion09Trigger = ({ className, icon: Icon, title, subtitle }: Accordion09TriggerProps) => (  <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] [&[data-state=open]>svg]:rotate-180',      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>    <ChevronDownIcon      size={16}      className="pointer-events-none shrink-0 opacity-60 transition-transform duration-200"      aria-hidden="true"    />  </AccordionPrimitive.Trigger>);export type Accordion09ContentProps = React.ComponentProps<typeof AccordionContent>;export const Accordion09Content = ({ className, ...props }: Accordion09ContentProps) => (  <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-09.json

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

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

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

Features

Circular icon containers with bordered styling for enhanced visual prominence and branding
Combined layout elements including icon, title, subtitle, and chevron in a cohesive design
Content indentation alignment with proper spacing using margin and padding utilities
Optional icon rendering with conditional display based on prop availability
Typography hierarchy with distinct font weights and sizing for information structure
shadcn/ui integration using consistent design tokens and Tailwind CSS styling

Use Cases

This free open source React component works well for:

Dashboard sections - Feature panels with branded icons and descriptions built with Next.js
Service categories - Premium service offerings with visual branding using TypeScript
Account settings - User preferences with clear iconography for React applications
Feature showcases - Product capabilities with professional presentation using Tailwind CSS

API Reference

Accordion09

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

Accordion09Item

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

Accordion09Header

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

Accordion09Trigger

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

Accordion09Content

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

Implementation Notes

Icons are rendered in circular containers with size-10 and border styling
Content indentation with ms-3 ps-10 aligns with icon container positioning
Uses flexbox layout with proper gap spacing for icon, text, and chevron alignment
Font weight differentiation: semibold for title, normal for subtitle
Focus ring and keyboard navigation built-in for accessibility compliance
Compatible with shadcn/ui design system and Tailwind CSS utility classes

Card Icon Accordion

Reactaccordion-09

On this page