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
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
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 |
Accordion03Item
Prop | Type | Default | Description |
---|---|---|---|
value | string | required | Unique identifier for this accordion item |
Accordion03Trigger
Prop | Type | Default | Description |
---|---|---|---|
children | ReactNode | required | Content to display in the trigger button |
Accordion03Content
Prop | Type | Default | Description |
---|---|---|---|
children | ReactNode | required | Content 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
Plus Accordion
Collapsible content panels with plus/minus indicators. Perfect for React applications requiring expandable sections with Next.js integration and TypeScript support.
Left Plus Accordion
Collapsible content panels with left-aligned plus/minus indicators. Perfect for React applications requiring navigation-style expandable sections with Next.js integration and TypeScript support.