Accordion

A vertically stacked set of panels, only one of which can be expanded at a time.

Installation

pnpm add @wandercom/design-system-web

Usage

The Accordion component displays a vertically stacked set of panels, only one of which can be expanded at a time.

import { Accordion } from '@wandercom/design-system-web';

export function Example() {
  return (
    <Accordion
      items={[
        {
          id: '1',
          title: 'What is the capital of Italy?',
          content: 'The capital of Italy is Rome.',
        },
      ]}
    />
  );
}

Preview

Loading example...

Props

items

Array<{ id: string, title: React.ReactNode, content: React.ReactNode }>
Array of accordion items.

slots

{ root?: string, item?: string, trigger?: string, content?: string }
Custom CSS classes for component slots.
Accordion