Table Left Plus Accordion

Collapsible content panels with table-style borders and left-aligned plus/minus indicators. Perfect for React applications requiring tabular navigation with animated controls 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 Accordion18Props = React.ComponentProps<typeof Accordion>;export const Accordion18 = ({ className, ...props }: Accordion18Props) => (  <Accordion className={cn('w-full -space-y-px', className)} {...props} />);export type Accordion18ItemProps = React.ComponentProps<typeof AccordionItem>;export const Accordion18Item = ({ className, ...props }: Accordion18ItemProps) => (  <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 Accordion18TriggerProps {  children: React.ReactNode;  className?: string;}export const Accordion18Trigger = ({ children, className }: Accordion18TriggerProps) => (  <AccordionPrimitive.Header className="flex">    <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]:-order-1 [&>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 Accordion18ContentProps = React.ComponentProps<typeof AccordionContent>;export const Accordion18Content = ({ className, ...props }: Accordion18ContentProps) => (  <AccordionContent className={cn('text-muted-foreground ps-7 pb-2', className)} {...props} />);

Installation

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

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

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

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

Features

Table-style left plus/minus design combining connected borders with navigation-style animated indicators
Complex animation sequences including rotation, opacity transitions, and path transformations on left-positioned plus icon
Negative spacing layout with -space-y-px creating seamless table-like row connections
Content indentation alignment with proper spacing using padding-start utilities
Navigation aesthetics optimized for sidebar-like interfaces with plus/minus controls in table format
shadcn/ui integration using consistent design tokens and Tailwind CSS styling

Use Cases

This free open source React component works well for:

Interactive navigation tables - Menu structures with engaging plus/minus animations built with Next.js
Data hierarchies - Organized information with left-aligned controls in table format using TypeScript
Settings panels - Configuration sections with navigation appearance in tabular layout for React applications
Menu structures - Category-based navigation with animated indicators in table organization using Tailwind CSS

API Reference

Accordion18

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

Accordion18Item

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

Accordion18Trigger

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

Accordion18Content

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

Implementation Notes

Combines table-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 with left placement
Content indentation with ps-7 ensures proper alignment with left-positioned icon in table layout
Uses -space-y-px for negative spacing creating seamless table-like row connections
Focus states managed with has-focus-visible:z-10 ensuring proper layering in table presentation
Compatible with shadcn/ui design system and Tailwind CSS utility classes

Table Left Plus Accordion

Reactaccordion-18

On this page