Skip to content

Accordion

The Accordion component organizes content into collapsible sections. Built on Radix UI Accordion, it supports single or multiple open panels, animated transitions, and full keyboard navigation.

Import

import {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} from '@nim-ui/components';

Basic Usage

Single Accordion

View Code

<Accordion type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>
      Yes. It adheres to the WAI-ARIA Accordion pattern.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Is it styled?</AccordionTrigger>
    <AccordionContent>
      Yes. It comes with default styling using Tailwind CSS.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Multiple Open

Set type="multiple" to allow multiple sections to be open simultaneously.

<Accordion type="multiple" defaultValue={['item-1', 'item-3']}>
  <AccordionItem value="item-1">
    <AccordionTrigger>Section 1</AccordionTrigger>
    <AccordionContent>Content 1</AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Section 2</AccordionTrigger>
    <AccordionContent>Content 2</AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-3">
    <AccordionTrigger>Section 3</AccordionTrigger>
    <AccordionContent>Content 3</AccordionContent>
  </AccordionItem>
</Accordion>

Props

Accordion

Name	Type	Default	Description
`type *`	`'single' \| 'multiple'`	-	Whether one or multiple items can be open at once
`collapsible`	`boolean`	`false`	Allow closing all items (only for type="single")
`defaultValue`	`string \| string[]`	-	Initially open item(s)
`className`	`string`	-	Additional CSS classes

AccordionItem

Name	Type	Default	Description
`value *`	`string`	-	Unique identifier for this item
`disabled`	`boolean`	-	Prevent opening this item

Usage Examples

FAQ Section

const faqs = [
  { q: 'How do I get started?', a: 'Install the package and import components.' },
  { q: 'Is dark mode supported?', a: 'Yes, all components support dark mode.' },
  { q: 'Can I customize styles?', a: 'Yes, use className or Tailwind utilities.' },
];

function FAQ() {
  return (
    <Accordion type="single" collapsible>
      {faqs.map((faq, i) => (
        <AccordionItem key={i} value={`faq-${i}`}>
          <AccordionTrigger>{faq.q}</AccordionTrigger>
          <AccordionContent>{faq.a}</AccordionContent>
        </AccordionItem>
      ))}
    </Accordion>
  );
}

Accessibility

Built on Radix UI Accordion with full accessibility support:

WAI-ARIA Accordion pattern compliance
Keyboard navigation: Arrow keys navigate between triggers, Enter/Space toggles
Focus management: Focus ring visible on trigger elements
Reduced motion: Animations respect prefers-reduced-motion

Keyboard Support

Key	Action
Enter / Space	Toggle the focused section
Arrow Down	Move focus to next trigger
Arrow Up	Move focus to previous trigger
Home	Move focus to first trigger
End	Move focus to last trigger

Tabs — Content organization with tabbed interface
Card — Content container