Accordion

Usage

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from '@epilot/spark-ui/accordion'

<Accordion>
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>
      Yes. It adheres to the WAI-ARIA design pattern.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Examples

Variants

Container chrome is set with the variant prop (default soft). All variants use neutral chrome and scale with the spacing / scaling knobs.

Multiple open at once

Pass multiple to allow several panels to be open simultaneously.

API Reference

This component is built on top of Base UI Accordion. See the Base UI documentation for the full API reference.

Components

• Accordion: Root container; single-open and collapsible by default, pass multiple to keep several panels open (value/defaultValue are arrays). Also accepts a variant.
• AccordionItem: Individual collapsible section. Requires a value.
• AccordionTrigger: Clickable header that toggles the section (min 44px touch target).
• AccordionContent: Wraps the body content of a section.

Spark additions

• ghost: no border/fill, just the trigger and spacing.
• soft: separate soft-tinted rounded cards, with a small gap between stacked items.
• surface: items glued into one bordered panel with an opaque fill.
• outline: the same glued bordered panel, but no fill.
• The trigger has a min 44px touch target and no text underline; padding scales with the spacing / scaling knobs.