Component

Accordion

An animated disclosure component for FAQs, settings groups, and collapsible content sections.

Examples

Live previews paired with copyable source.

Default Accordion

A simple disclosure list for compact content.

tsx

<Accordion items={items} />

Card Variant

Use card styling when accordion items need stronger separation.

tsx

<Accordion items={items} variant="card" />

Multiple Open Items

Let readers compare sections without closing the previous one.

tsx

<Accordion items={items} variant="rounded" allowMultiple />

API Reference

Props available on the component.

Prop	Type	Default	Description
items	AccordionItem[]	required	Content entries with title and content fields.
variant	'default' \| 'bordered' \| 'rounded' \| 'minimal' \| 'card'	'default'	Changes the container treatment for each item.
allowMultiple	boolean	false	Allows more than one item to remain open.

Install

bash

pnpm dlx pacmanui add accordion
npx pacmanui add accordion

Basic Usage

tsx

import { Accordion } from '@/components/pacmanui/accordion'

const items = [{ title: 'Question', content: 'Answer' }]

export default function Example() {
  return <Accordion items={items} />
}