Skip to main content

Accordion

The Accordion component is a flexible, responsive container for multiple ExpandableSection components, supporting single or multiple open sections, custom toggle icons, default open state, and fully customizable styling.

import { Accordion } from "tawuniya";

👉 View in Storybook

PropTypeDefaultDescription
itemsExpandableSectionItemType[]—Array of sections to display inside the accordion. Each item includes icon, title, description, content, and optionally additional.
toggleIconReact.ReactNode | string (optional)—Icon or ReactNode for the toggle button of each section.
singlebooleanfalseIf true, only one section can be open at a time (single-expand mode).
defaultOpennumber | number[] (optional)—Default open section(s). Number for single mode, array of numbers for multi mode.
classNamesPartial<{ wrapperClassName, itemClassName, titleClassName, descriptionClassName, iconClassName, toggleIconClassName }>—Custom class names for styling the wrapper, sections, icons, titles, descriptions, and toggle buttons.

Basic Accordion (multi-expand)​

<Accordion
  items={[
    {
      icon: "network",
      title: "Geographical Extension",
      description:
        "Extend your coverage to include Bahrain, GCC area and other countries",
      additional: <div>Extra info</div>,
      content: <div>Content of Geographical Extension</div>,
    },
    {
      icon: <Icon name="user" />,
      title: "Welcome, Abdullah Ali",
      content: <div>Content of Welcome Section</div>,
    },
  ]}
/>

Single-Expand Accordion​

<Accordion
  items={[
    { icon: "network", title: "Item 1", content: <div>Content 1</div> },
    { icon: "user", title: "Item 2", content: <div>Content 2</div> },
  ]}
  single
  defaultOpen={1}
/>

Accordion with Custom Toggle Icon​

<Accordion
  items={[
    { icon: "network", title: "Item 1", content: <div>Content 1</div> },
    { icon: "user", title: "Item 2", content: <div>Content 2</div> },
  ]}
  toggleIcon="arrow-top-b&w"
/>

Accordion with Custom Class Names​

<Accordion
  items={[
    { icon: "network", title: "Item 1", content: <div>Content 1</div> },
    { icon: "user", title: "Item 2", content: <div>Content 2</div> },
  ]}
  classNames={{
    wrapperClassName: "bg-gray-50 p-4 rounded-lg",
    itemClassName: "bg-white border border-gray-200 rounded-lg p-4",
    titleClassName: "text-blue-700 font-semibold",
    descriptionClassName: "text-gray-500",
    iconClassName: "text-blue-500",
    toggleIconClassName: "text-blue-800",
  }}
/>

Accordion with All Items Open by Default​

<Accordion
  items={[
    { icon: "network", title: "Item 1", content: <div>Content 1</div> },
    { icon: "user", title: "Item 2", content: <div>Content 2</div> },
  ]}
  defaultOpen={[1, 2]}
/>

Features​

  • Single & Multi Expand Modes: Can operate in single-expand (only one open at a time) or multi-expand (multiple sections can be open) mode.

  • Controlled & Uncontrolled Behavior: Uses internal state by default but allows external control through props if needed.

  • Customizable Icons: Supports both string icon names or ReactNode components for section icons and toggle buttons.

  • Additional Content Support: Sections can display extra content next to the title, such as buttons, labels, or info elements.

  • Responsive Layout: Adjusts layout for mobile screens, handling additional content placement automatically.

  • Full Styling Customization: classNames prop allows fine-grained control over the wrapper, items, titles, descriptions, icons, and toggle buttons.