Accordion

Collapsible content sections for organizing information in a space-efficient way with proper accessibility support.

Import

import { Accordion } from '@akitectio/aki-ui'

Basic Usage

Aki UI is a modern React component library built with TypeScript and Tailwind CSS. It provides a comprehensive set of accessible components for building user interfaces.

You can install Aki UI using npm or yarn:

npm install @akitectio/aki-ui

Aki UI supports all modern browsers including Chrome, Firefox, Safari, and Edge. It also works on mobile browsers and provides responsive design out of the box.

<Accordion>
  <Accordion.Item id="item1">
    <Accordion.Header>
      What is Aki UI?
    </Accordion.Header>
    <Accordion.Body>
      <p>Aki UI is a modern React component library...</p>
    </Accordion.Body>
  </Accordion.Item>
  <Accordion.Item id="item2">
    <Accordion.Header>
      How to install?
    </Accordion.Header>
    <Accordion.Body>
      <p>You can install Aki UI using npm or yarn...</p>
    </Accordion.Body>
  </Accordion.Item>
</Accordion>

Multiple Open Items

Set allowMultiple to allow multiple accordion items to be open simultaneously.

Build modern user interfaces with React, Vue, or Angular using Aki UI components.

Create robust APIs and server-side applications with Node.js, Python, or other technologies.

<Accordion allowMultiple>
  <Accordion.Item id="frontend">
    <Accordion.Header>
      Frontend Development
    </Accordion.Header>
    <Accordion.Body>
      <p>Build modern user interfaces...</p>
    </Accordion.Body>
  </Accordion.Item>
  <Accordion.Item id="backend">
    <Accordion.Header>
      Backend Development
    </Accordion.Header>
    <Accordion.Body>
      <p>Create robust APIs...</p>
    </Accordion.Body>
  </Accordion.Item>
</Accordion>

Flush Style

Use the flush prop to remove borders and rounded corners.

Access advanced components, priority support, and exclusive templates.

Get help through documentation, community forums, or direct support channels.

<Accordion flush>
  <Accordion.Item id="premium">
    <Accordion.Header>Premium Features</Accordion.Header>
    <Accordion.Body>
      <p>Access advanced components...</p>
    </Accordion.Body>
  </Accordion.Item>
</Accordion>

API Reference

Accordion Props

Prop	Type	Default	Description
allowMultiple	boolean	false	Allow multiple items to be open at once
defaultExpandedItems	string[]	[]	Default open items
flush	boolean	false	Remove borders and rounded corners
alwaysOpen	boolean	false	Always keep at least one item expanded

Accordion.Item Props

Prop	Type	Required	Description
id	string	Yes	Unique identifier for the item
disabled	boolean	No	Disable the accordion item

Accessibility

• Keyboard Navigation: Use Enter/Space to toggle items, Arrow keys to navigate
• ARIA Support: Proper ARIA attributes for screen readers
• Focus Management: Clear focus indicators and logical tab order
• Screen Reader: Announces expanded/collapsed state changes