Accordion Component

A flexible and accessible accordion component with multiple variants and animations.

Installation

pnpm → pnpm dlx pacmanui add accordion
npm  → npx pacmanui add accordion

API Reference

PROPTYPEDEFAULTDESCRIPTION
itemsAccordionItem[]requiredArray of items to display in the accordion. Each item should have title and content properties.
variantstring'default'Visual style variant: 'default', 'bordered', 'rounded', 'minimal', 'card'
allowMultiplebooleanfalseAllow multiple accordion items to be open at once

Examples

Basic Accordion

A simple accordion with default styling

'use client'

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

const items = [
  {
    title: "What is PacmanUI?",
    content: "PacmanUI is a modern, accessible React component library..."
  },
  // ... more items
]

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

Variants

Accordions with different visual styles

bordered

rounded

minimal

card

'use client'

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

export default function VariantsExample() {
  const variants = ['bordered', 'rounded', 'minimal', 'card'] as const
  
  return (
    <div className="space-y-8">
      {variants.map((variant) => (
        <div key={variant} className="space-y-2">
          <h3 className="text-sm font-medium capitalize">{variant}</h3>
          <Accordion items={items} variant={variant} />
        </div>
      ))}
    </div>
  )
}

Multiple Selection

An accordion that allows multiple items to be open simultaneously

'use client'

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

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