Accordion

Preview

Default Accordion

What is this component?

A fully accessible accordion component built with WCAG 2.1 AA compliance in mind.

How does keyboard navigation work?

Use Arrow Up/Down to navigate between headers, Home/End to jump to first/last, and Enter/Space to toggle sections.

Can I customize the styling?

Yes! The component supports multiple variants, sizes, and can be styled with Tailwind classes.

Separated Cards

🚀 Performance

Lightweight and fast with minimal JavaScript overhead.

• Zero runtime dependencies
• Optimized animations
• Efficient event handling

♿ Accessibility

Full WCAG 2.1 AA compliance with proper ARIA attributes.

• Screen reader support
• Keyboard navigation
• Focus management

🎨 Customization

Multiple variants and complete Tailwind integration.

• Three visual variants
• Multiple size options
• Custom styling support

Minimal Style

Getting Started

Install the component using: npx ui-gen add accordion

Basic Usage

Import and use with your items array. See examples below.

Advanced Features

Supports allowMultiple, collapsible behavior, and disabled states.

Code

---
const items = [
  {
    title: 'Section 1',
    content: '<p>Content for Section 1...</p>',
    open: true
  },
  {
    title: 'Section 2',
    content: '<p>Content for Section 2...</p>'
  }
]
---

<!-- Default accordion -->
<Accordion items={items} />

<!-- Separated cards variant -->
<Accordion
  items={items}
  variant="separated"
  allowMultiple={true}
/>

<!-- Minimal variant -->
<Accordion
  items={items}
  variant="minimal"
  size="sm"
/>

Install

npx ui-gen add accordion

---

Properties

items

type: AccordionItem[]

required: true

Array of accordion items. Each item should have:

• title (string) - The header text
• content (string) - HTML content (can include markup)
• open (boolean, optional) - Whether the item starts expanded
• disabled (boolean, optional) - Whether the item is disabled

variant

type: string

options: default, separated, minimal

default: default

• default - Single bordered container with internal dividers
• separated - Individual cards with spacing between them
• minimal - Clean style with minimal borders

size

type: string

options: sm, md, lg

default: md

Controls the text size and padding of the accordion.

allowMultiple

type: boolean

default: false

When true, multiple sections can be expanded simultaneously. When false, expanding one section closes others.

collapsible

type: boolean

default: true

When false, at least one section must always remain open (requires at least one item to start with open: true).

Accessibility Features

This Accordion component is fully WCAG 2.1 AA compliant:

⌨️ Keyboard Navigation

• Arrow Up/Down - Navigate between accordion headers
• Home/End - Jump to first/last header
• Enter/Space - Toggle the focused section
• Tab - Move focus to the next focusable element

🎯 ARIA Support

• aria-expanded indicates whether each section is open/closed
• aria-controls links headers to their content regions
• role="region" on content areas for screen reader navigation
• aria-labelledby connects content to headers

📱 Screen Reader Support

• Semantic HTML structure with proper heading levels
• Descriptive button labels
• Content regions are properly announced
• State changes are communicated

🎨 Visual Accessibility

• High contrast focus indicators
• Clear visual hierarchy
• Consistent spacing and typography
• Smooth animations that respect prefers-reduced-motion

Examples

Basic Accordion

---
const items = [
  { title: 'Question 1', content: '<p>Answer to question 1</p>' },
  { title: 'Question 2', content: '<p>Answer to question 2</p>', open: true }
]
---
<Accordion items={items} />

Multiple Sections Open

<Accordion
  items={items}
  allowMultiple={true}
  variant="separated"
/>

Minimal FAQ Style

<Accordion
  items={faqItems}
  variant="minimal"
  size="sm"
  collapsible={false}
/>