Pepulux Playbook

Accordion

Expandable content panels. Click a header to reveal its body. Supports single or multi-expand.

import{ Accordion } from "@pepulux/ui"

Default (single expand)

Pepulux Playbook is a component library built for all Pepulux OS products. It's token-driven, multi-brand, and built to last.

Multiple expand + bordered

Separated cards

Props

PropTypeDefaultDescription
items*AccordionItem[]—Array of { id, title, content, disabled? }
defaultExpandedstring[][]IDs of panels open by default
multiplebooleanfalseAllow multiple panels open simultaneously
variant"default" | "bordered" | "separated""default"Visual container style
Application component → Accordionwww.pepulux.com

Notes and documentation

Space for notes, documentation, and best practices for using these components.

Reveal detail on demand

Accordions keep long pages scannable by hiding secondary detail until someone asks for it. Use them for FAQs, settings groups and any list where most people only need one or two answers.

Make the trigger text self-explanatory: users decide whether to open a section from its title alone.

Do

  • Keep titles short and specific
  • Allow only one open item when sections are long

Don't

  • Hide critical information such as errors or required steps

Keyboard and screen readers

Each trigger is a button that toggles its panel, so Enter and Space open and close it. Keep the content after the heading in a logical reading order and avoid nesting accordions more than one level deep.