Card Plus Accordion

Collapsible content panels with card-style borders and plus/minus indicators. Perfect for React applications requiring tab-like 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';export type Accordion12Props = React.ComponentProps<typeof Accordion>;export const Accordion12 = ({ className, ...props }: Accordion12Props) => (  <Accordion className={cn('w-full space-y-2', className)} {...props} />);export type Accordion12ItemProps = React.ComponentProps<typeof AccordionItem>;export const Accordion12Item = ({ className, ...props }: Accordion12ItemProps) => (  <AccordionItem     className={cn(      'bg-background has-focus-visible:border-ring has-focus-visible:ring-ring/50 rounded-md border px-4 py-1 outline-none last:border-b has-focus-visible:ring-[3px]',      className    )}     {...props}   />);export type Accordion12HeaderProps = React.ComponentProps<typeof AccordionPrimitive.Header>;export const Accordion12Header = ({ className, ...props }: Accordion12HeaderProps) => (  <AccordionPrimitive.Header className={cn('flex', className)} {...props} />);export interface Accordion12TriggerProps extends React.ComponentProps<typeof AccordionPrimitive.Trigger> {  children: React.ReactNode;}export const Accordion12Trigger = ({ className, children, ...props }: Accordion12TriggerProps) => (  <AccordionPrimitive.Trigger     className={cn(      'focus-visible:ring-0 flex flex-1 items-center justify-between rounded-md py-2 text-left text-[15px] leading-6 font-semibold transition-all outline-none [&>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}  >    {children}    <PlusIcon      size={16}      className="pointer-events-none shrink-0 opacity-60 transition-transform duration-200"      aria-hidden="true"    />  </AccordionPrimitive.Trigger>);export type Accordion12ContentProps = React.ComponentProps<typeof AccordionContent>;export const Accordion12Content = ({ className, ...props }: Accordion12ContentProps) => (  <AccordionContent     className={cn('text-muted-foreground pb-2', className)}     {...props}   />);

Installation

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

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

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

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

Features

Card-style design with plus/minus combining bordered containers with advanced animation sequences
Complex icon animations including rotation, opacity transitions, and path transformations
Spaced layout with gap between accordion items using space-y-2 utility classes
Focus management with has-focus-visible selectors for enhanced accessibility features
Rounded corners with consistent border radius for modern visual appearance
shadcn/ui integration using consistent design tokens and Tailwind CSS styling

Use Cases

This free open source React component works well for:

Interactive FAQs - Question and answer panels with engaging animations built with Next.js
Feature toggles - Configuration sections with plus/minus indicators using TypeScript
Content modules - Information blocks with card styling and animated controls for React applications
Product features - Capability lists with visual feedback using Tailwind CSS

API Reference

Accordion12

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

Accordion12Item

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

Accordion12Header

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

Accordion12Trigger

Prop	Type	Default	Description
`children`	`ReactNode`	required	Content to display in the trigger button

Accordion12Content

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

Implementation Notes

Combines card-style design with complex plus/minus animation sequences
Uses advanced CSS selectors for multi-layer animation effects on plus icon paths
Focus ring disabled on trigger with focus-visible:ring-0 in favor of item-level focus
Implements spaced layout with space-y-2 for visual separation between items
Compatible with shadcn/ui design system and Tailwind CSS utility classes
Maintains plus icon rotation and opacity transitions for expand/collapse states

Card Plus Accordion

Reactaccordion-12

On this page