Layout

Accordion

Sections that open and close in place.

import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@flinbu/seed";

One open at a time

A named design decision, like bg-primary. Components use tokens, never raw values.

import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@flinbu/seed";

<Accordion type="single" collapsible defaultValue="tokens" className="w-full max-w-lg">
  <AccordionItem value="tokens">
    <AccordionTrigger>What is a token?</AccordionTrigger>
    <AccordionContent>A named design decision, like bg-primary. Components use tokens, never raw values.</AccordionContent>
  </AccordionItem>
  <AccordionItem value="modes">
    <AccordionTrigger>How do Light and Dark work?</AccordionTrigger>
    <AccordionContent>Semantic tokens have a value per mode and switch with data-theme.</AccordionContent>
  </AccordionItem>
  <AccordionItem value="brand">
    <AccordionTrigger>Can I use my brand color?</AccordionTrigger>
    <AccordionContent>Yes. npx seed theme builds a full scale and checks every accent against WCAG AA.</AccordionContent>
  </AccordionItem>
</Accordion>

Use it for

FAQs, grouped settings, long specs people scan.

Use something else for

Content everyone needs: show it.

Props

Prop	Type	Default	Description
`type`	`'single''multiple'`	–	One or many open.
`collapsible`	`boolean`	–	single only: the open one can close.
`value / defaultValue`	`stringstring[]`	–	Open sections.
`AccordionTrigger: level`	`23456`	`3`	Heading level.

Accessibility

Built on Radix Accordion: each trigger is a button inside a real heading (level sets it), with aria-expanded and a labelled region.