Subtitle Accordion

Collapsible content panels with main titles and descriptive subtitles. Perfect for React applications requiring detailed section headers with Next.js integration and TypeScript support.

Radix UI

Loading component...

import {  Accordion07,  Accordion07Content,  Accordion07Header,  Accordion07Item,  Accordion07Trigger,} from '@/components/ui/shadcn-io/accordion-07';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">      <Accordion07 type="single" collapsible className="w-full max-w-2xl" defaultValue="3">        {items.map((item) => (          <Accordion07Item value={item.id} key={item.id}>            <Accordion07Header>              <Accordion07Trigger                 title={item.title}                subtitle={item.subtitle}              />            </Accordion07Header>            <Accordion07Content>              {item.content}            </Accordion07Content>          </Accordion07Item>        ))}      </Accordion07>    </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';export type Accordion07Props = React.ComponentProps<typeof Accordion>;export const Accordion07 = ({ className, ...props }: Accordion07Props) => (  <Accordion className={cn('w-full', className)} {...props} />);export type Accordion07ItemProps = React.ComponentProps<typeof AccordionItem>;export const Accordion07Item = ({ className, ...props }: Accordion07ItemProps) => (  <AccordionItem className={cn('py-2', className)} {...props} />);export type Accordion07HeaderProps = React.ComponentProps<typeof AccordionPrimitive.Header>;export const Accordion07Header = ({ className, ...props }: Accordion07HeaderProps) => (  <AccordionPrimitive.Header className={cn('flex', className)} {...props} />);export interface Accordion07TriggerProps {  title: React.ReactNode;  subtitle?: React.ReactNode;  className?: string;}export const Accordion07Trigger = ({ className, title, subtitle }: Accordion07TriggerProps) => (  <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 flex-col space-y-1">      <span>{title}</span>      {subtitle && (        <span className="text-sm font-normal">{subtitle}</span>      )}    </span>    <ChevronDownIcon      size={16}      className="pointer-events-none shrink-0 opacity-60 transition-transform duration-200"      aria-hidden="true"    />  </AccordionPrimitive.Trigger>);export type Accordion07ContentProps = React.ComponentProps<typeof AccordionContent>;export const Accordion07Content = ({ className, ...props }: Accordion07ContentProps) => (  <AccordionContent     className={cn('text-muted-foreground pb-2', className)}     {...props}   />);

Installation

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

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

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

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

Features

Title and subtitle layout with flexible content structure for enhanced information hierarchy
Chevron rotation animation providing clear visual feedback for expand/collapse states
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 panels - Configuration sections with detailed descriptions built with Next.js
Help documentation - FAQ sections with summary and explanation text using TypeScript
Feature descriptions - Product capabilities with headlines and details for React applications
Account sections - User settings with clear titles and descriptive text using Tailwind CSS

API Reference

Accordion07

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

Accordion07Item

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

Accordion07Header

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

Accordion07Trigger

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

Accordion07Content

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

Implementation Notes

Uses flexbox column layout with space-y-1 for proper title/subtitle spacing
Subtitle rendering is conditional based on prop availability with proper styling
Chevron icon rotates 180 degrees on expansion with smooth transitions
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 Accordion

Reactaccordion-07

On this page