Subtitle Plus Accordion

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

Radix UI

Loading component...

import {  Accordion08,  Accordion08Content,  Accordion08Header,  Accordion08Item,  Accordion08Trigger,} from '@/components/ui/shadcn-io/accordion-08';const items = [  {    id: "1",    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",    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",    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",    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">      <Accordion08 type="single" collapsible className="w-full max-w-2xl" defaultValue="3">        {items.map((item) => (          <Accordion08Item value={item.id} key={item.id}>            <Accordion08Header>              <Accordion08Trigger                 title={item.title}                subtitle={item.subtitle}              />            </Accordion08Header>            <Accordion08Content>              {item.content}            </Accordion08Content>          </Accordion08Item>        ))}      </Accordion08>    </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';export type Accordion08Props = React.ComponentProps<typeof Accordion>;export const Accordion08 = ({ className, ...props }: Accordion08Props) => (  <Accordion className={cn('w-full', className)} {...props} />);export type Accordion08ItemProps = React.ComponentProps<typeof AccordionItem>;export const Accordion08Item = ({ className, ...props }: Accordion08ItemProps) => (  <AccordionItem className={cn('py-2', className)} {...props} />);export type Accordion08HeaderProps = React.ComponentProps<typeof AccordionPrimitive.Header>;export const Accordion08Header = ({ className, ...props }: Accordion08HeaderProps) => (  <AccordionPrimitive.Header className={cn('flex', className)} {...props} />);export interface Accordion08TriggerProps {  title: React.ReactNode;  subtitle?: React.ReactNode;  className?: string;}export const Accordion08Trigger = ({ className, title, subtitle }: Accordion08TriggerProps) => (  <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 flex-col space-y-1">      <span>{title}</span>      {subtitle && (        <span className="text-sm font-normal">{subtitle}</span>      )}    </span>    <PlusIcon      size={16}      className="pointer-events-none shrink-0 opacity-60 transition-transform duration-200"      aria-hidden="true"    />  </AccordionPrimitive.Trigger>);export type Accordion08ContentProps = React.ComponentProps<typeof AccordionContent>;export const Accordion08Content = ({ className, ...props }: Accordion08ContentProps) => (  <AccordionContent     className={cn('text-muted-foreground pb-2', className)}     {...props}   />);

Installation

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

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

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

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

Features

Title and subtitle with plus/minus combining content hierarchy with advanced animation sequences
Complex icon animations including rotation, opacity transitions, and path transformations
Vertical text stacking with proper spacing using flexbox column layout
Optional subtitle rendering with conditional display based on prop availability
Typography differentiation with distinct font weights for title and subtitle elements
shadcn/ui integration using consistent design tokens and Tailwind CSS styling

Use Cases

This free open source React component works well for:

Settings interfaces - Configuration panels with detailed descriptions built with Next.js
Account management - User settings with clear titles and explanatory text using TypeScript
Support sections - Help topics with headlines and summary descriptions for React applications
Feature documentation - Product capabilities with visual hierarchy using Tailwind CSS

API Reference

Accordion08

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

Accordion08Item

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

Accordion08Header

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

Accordion08Trigger

Prop	Type	Default	Description
`title`	`ReactNode`	required	Main title text to display in the trigger
`subtitle`	`ReactNode`	`undefined`	Optional subtitle text to display below title

Accordion08Content

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

Implementation Notes

Combines title/subtitle layout with complex plus/minus animation sequences
Uses advanced CSS selectors for multi-layer animation effects on plus icon paths
Flexbox column layout with space-y-1 for proper title/subtitle spacing
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

Subtitle Plus Accordion

Reactaccordion-08

On this page