Accordion

Collapsible content sections with expand/collapse animation.

Examples

Basic

Single-open accordion with three items.

With Long Content

Accordion with richer content in panels.

In Card

Accordion inside a card container.

FAQ

Bordered Items

Accordion with bordered item containers.

Disabled State

Accordion with reduced opacity to indicate disabled state.

Installation

pnpm add @rokle/components @rokle/tokens

Installs with the default Rokle brand. Generate a custom brand on rokle.app to use your own colours and personality.

Usage

import { Accordion } from "@rokle/components";

import { Accordion } from "@rokle/components";

export function Example() {
  return (
    <Accordion
      items={[
        { value: "1", trigger: "Is it accessible?", content: "Yes. All components follow WAI-ARIA guidelines." },
        { value: "2", trigger: "Is it styled?", content: "Yes. It uses Rokle design tokens for consistent styling." },
        { value: "3", trigger: "Is it animated?", content: "Yes. Animations respond to the Feel personality dimension." },
      ]}
    />
  );
}

Source

The implementation source for this component. Copy it into your project and customise.

API Reference

Prop	Type	Default	Description
items	AccordionItem[]	-	Array of accordion items with value, trigger, and content.
className	string	-	Additional CSS classes.

Previous← Toggle NextAvatar →