Card Left Plus Accordion

Collapsible content panels with card-style borders and left-aligned plus/minus indicators. Perfect for React applications requiring navigation-style tab 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 Accordion14Props = React.ComponentProps<typeof Accordion>;export const Accordion14 = ({ className, ...props }: Accordion14Props) => (  <Accordion className={cn('w-full space-y-2', className)} {...props} />);export type Accordion14ItemProps = React.ComponentProps<typeof AccordionItem>;export const Accordion14Item = ({ className, ...props }: Accordion14ItemProps) => (  <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 Accordion14HeaderProps = React.ComponentProps<typeof AccordionPrimitive.Header>;export const Accordion14Header = ({ className, ...props }: Accordion14HeaderProps) => (  <AccordionPrimitive.Header className={cn('flex', className)} {...props} />);export interface Accordion14TriggerProps extends React.ComponentProps<typeof AccordionPrimitive.Trigger> {  children: React.ReactNode;}export const Accordion14Trigger = ({ className, children, ...props }: Accordion14TriggerProps) => (  <AccordionPrimitive.Trigger     className={cn(      'flex flex-1 items-center gap-4 rounded-md py-2 text-left text-sm text-[15px] leading-6 font-semibold transition-all outline-none focus-visible:ring-0 [&>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 [&>svg]:-order-1',      className    )}     {...props}  >    <PlusIcon      size={16}      className="pointer-events-none shrink-0 opacity-60 transition-transform duration-200"      aria-hidden="true"    />    {children}  </AccordionPrimitive.Trigger>);export type Accordion14ContentProps = React.ComponentProps<typeof AccordionContent>;export const Accordion14Content = ({ className, ...props }: Accordion14ContentProps) => (  <AccordionContent     className={cn('text-muted-foreground ps-7 pb-2', className)}     {...props}   />);

Installation

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

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

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

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

Features

Card-style design with left plus/minus combining bordered containers with navigation-style animated indicators
Complex animation sequences including rotation, opacity transitions, and path transformations on left-positioned icon
Spaced layout with gap between accordion items using space-y-2 utility classes
Content indentation alignment with proper spacing using padding-start utilities
Navigation aesthetics optimized for sidebar-like interfaces with plus/minus controls
shadcn/ui integration using consistent design tokens and Tailwind CSS styling

Use Cases

This free open source React component works well for:

Interactive navigation - Sidebar menus with engaging plus/minus animations built with Next.js
Content hierarchies - Organized information with left-aligned controls using TypeScript
Settings panels - Configuration sections with navigation appearance for React applications
Menu structures - Category-based navigation with animated indicators using Tailwind CSS

API Reference

Accordion14

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

Accordion14Item

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

Accordion14Header

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

Accordion14Trigger

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

Accordion14Content

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

Implementation Notes

Combines card-style design with left-aligned plus/minus using [&>svg]:-order-1 positioning
Uses advanced CSS selectors for multi-layer animation effects on plus icon paths
Content indentation with ps-7 ensures proper alignment with left-positioned icon
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

Card Left Plus Accordion

Reactaccordion-14

On this page