Join our Discord community
Accordion

Left Chevron Accordion

Collapsible content panels with left-aligned chevron indicators. Perfect for React applications requiring navigation-style accordions with Next.js integration and TypeScript support.

Powered by

Loading component...

Installation

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

Features

  • Left-aligned chevron with CSS order manipulation for intuitive navigation feel
  • Indented content with proper spacing alignment using padding-start utilities
  • Single or multiple panel expansion modes with configurable behavior patterns
  • Navigation-style layout optimized for sidebar and menu-like interfaces
  • TypeScript support with complete interface definitions and component exports
  • shadcn/ui integration using consistent design tokens and Tailwind CSS styling

Use Cases

This free open source React component works well for:

  • Navigation menus - Sidebar navigation with expandable sections built with Next.js
  • Category filters - Product or content category organization using TypeScript
  • Menu structures - Hierarchical menu systems with Tailwind CSS styling
  • File explorers - Tree-like file and folder navigation for React applications

API Reference

Accordion03

PropTypeDefaultDescription
type'single' | 'multiple'requiredWhether single or multiple items can be expanded
collapsiblebooleanfalseWhether expanded items can be collapsed
defaultValuestring | string[]undefinedDefault expanded item(s)
valuestring | string[]undefinedControlled expanded item(s)
onValueChange(value: string | string[]) => voidundefinedCallback when expanded items change

Accordion03Item

PropTypeDefaultDescription
valuestringrequiredUnique identifier for this accordion item

Accordion03Trigger

PropTypeDefaultDescription
childrenReactNoderequiredContent to display in the trigger button

Accordion03Content

PropTypeDefaultDescription
childrenReactNoderequiredContent to display when expanded

Implementation Notes

  • Uses [&>svg]:-order-1 to position chevron before text content
  • Content indentation with ps-7 ensures proper visual hierarchy alignment
  • Uses Radix UI Accordion primitive for robust accessibility features
  • Compatible with shadcn/ui design system and Tailwind CSS utility classes
  • All components accept standard React props and className overrides