Join our Discord community
Accordion

Card Left Chevron Accordion

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

Powered by

Loading component...

Installation

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

Features

  • Card-style design with left chevron combining bordered containers with navigation-style indicators
  • Left-aligned layout with chevron positioning and content indentation for sidebar-like appearance
  • Spaced layout with gap between accordion items using space-y-2 utility classes
  • Focus management with has-focus-visible selectors for enhanced accessibility features
  • Navigation aesthetics optimized for menu-like interfaces and hierarchical content
  • 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-style navigation with card presentation built with Next.js
  • Settings categories - Configuration sections with navigation appearance using TypeScript
  • Content hierarchies - Organized information with left-aligned indicators for React applications
  • Menu structures - Category-based navigation with card styling using Tailwind CSS

API Reference

Accordion13

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

Accordion13Item

PropTypeDefaultDescription
valuestringrequiredUnique identifier for this accordion item

Accordion13Trigger

PropTypeDefaultDescription
childrenReactNoderequiredContent to display in the trigger button

Accordion13Content

PropTypeDefaultDescription
childrenReactNoderequiredContent to display when expanded

Implementation Notes

  • Uses [&>svg]:-order-1 to position chevron before text content in card layout
  • Content indentation with ps-7 ensures proper visual hierarchy alignment
  • Combines card-style design with left-aligned chevron for navigation aesthetics
  • 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