Table Plus Accordion

Collapsible content panels with table-style borders and animated plus/minus indicators. Perfect for React applications requiring tabular data with seamless row connections and Next.js integration and TypeScript support.

Radix UI

Loading component...

'use client';import {  Accordion,  AccordionContent,  AccordionItem,} from '@/components/ui/accordion';import { cn } from '@/lib/utils';import * as AccordionPrimitive from '@radix-ui/react-accordion';import { PlusIcon } from 'lucide-react';export type Accordion16Props = React.ComponentProps<typeof Accordion>;export const Accordion16 = ({ className, ...props }: Accordion16Props) => (  <Accordion className={cn('w-full -space-y-px', className)} {...props} />);export type Accordion16ItemProps = React.ComponentProps<typeof AccordionItem>;export const Accordion16Item = ({ className, ...props }: Accordion16ItemProps) => (  <AccordionItem    className={cn(      'bg-background has-focus-visible:border-ring has-focus-visible:ring-ring/50 relative border px-4 py-1 outline-none first:rounded-t-md last:rounded-b-md last:border-b has-focus-visible:z-10 has-focus-visible:ring-[3px]',      className,    )}    {...props}  />);export interface Accordion16TriggerProps {  children: React.ReactNode;  className?: string;}export const Accordion16Trigger = ({ children, className }: Accordion16TriggerProps) => (  <AccordionPrimitive.Header className="flex">    <AccordionPrimitive.Trigger      className={cn(        'flex flex-1 items-center justify-between 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',        className,      )}    >      {children}      <PlusIcon        size={16}        className="pointer-events-none shrink-0 opacity-60 transition-transform duration-200"        aria-hidden="true"      />    </AccordionPrimitive.Trigger>  </AccordionPrimitive.Header>);export type Accordion16ContentProps = React.ComponentProps<typeof AccordionContent>;export const Accordion16Content = ({ className, ...props }: Accordion16ContentProps) => (  <AccordionContent className={cn('text-muted-foreground pb-2', className)} {...props} />);

Installation

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

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

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

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

Features

Table-style plus/minus design combining connected borders with advanced animation sequences
Complex icon animations including rotation, opacity transitions, and path transformations on plus icon
Negative spacing layout with -space-y-px creating seamless table-like row connections
Enhanced focus management with z-index layering and ring visibility controls
Precise typography with specific font size, weight, and line height for tabular presentation
shadcn/ui integration using consistent design tokens and Tailwind CSS styling

Use Cases

This free open source React component works well for:

Data tables with expandable rows - Detailed information panels with table presentation built with Next.js
Feature comparison tables - Product specifications with plus/minus controls using TypeScript
Settings configuration - Tabular options with animated indicators for React applications
FAQ databases - Question lists with seamless table organization using Tailwind CSS

API Reference

Accordion16

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

Accordion16Item

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

Accordion16Trigger

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

Accordion16Content

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

Implementation Notes

Combines table-style design with complex plus/minus animation using Radix UI primitives
Uses -space-y-px for negative spacing creating seamless table-like row connections
Advanced CSS selectors for multi-layer animation effects on plus icon rotation and path opacity
Focus states managed with has-focus-visible:z-10 ensuring proper layering in table layout
Custom trigger implementation with Radix Primitive components for enhanced control
Compatible with shadcn/ui design system and Tailwind CSS utility classes

Table Plus Accordion

Reactaccordion-16

On this page