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