WAI-ARIA compliant accordion with keyboard navigation.

Features

• ✅ Zero dependencies - Pure React implementation
• ✅ Full accessibility - ARIA labels, keyboard navigation, screen reader support
• ✅ Theme support - Light, dark, and auto modes
• ✅ Reduced motion support - Respects user preferences

Props

items(required)

• Type: AccordionItem[] | string
• Accordion items (array or JSON string)

type

• Type: AccordionType - Default: 'single'
• Allow single or multiple items open

collapsible

• Type: boolean - Default: true
• Can the open item be collapsed (for type='single')

defaultOpen

• Type: string[]
• Default open item IDs

open

• Type: string[]
• Controlled open item IDs

onOpenChange

• Type: (openIds: string[]) => void
• Callback when open items change

persistKey

• Type: string
• Persist open state to localStorage

theme

• Type: 'light' | 'dark' | 'auto' - Default: 'auto'
• Theme mode

radius

• Type: number - Default: 8
• Border radius in pixels

density

• Type: 'comfortable' | 'compact' - Default: 'comfortable'
• Layout density

animate

• Type: boolean - Default: true
• Enable animations

className

• Type: string
• Additional CSS class

a11yLabel

• Type: string
• Accessibility label

Customization

CSS Variables

Override these variables in your Webflow custom code or CSS:

--cc-transition: var(--cc-motion-normal, 250ms); /* Cc Transition */--cc-easing: var(--cc-motion-ease-out, cubic-bezier(0, 0, 0.2, 1)); /* Cc Easing */

Webflow Classes

Target these classes in Webflow Designer for custom styles:

• .cc-accordion
• .cc-accordion__content
• .cc-accordion__header
• .cc-accordion__item
• .cc-accordion__panel
• .cc-accordion__trigger
• .cc-accordion__trigger-icon
• .cc-accordion__trigger-text