Accordion

Installation#

# One-time setup (tokens + lib helpers)
npx koalaui-cli@latest init

# Add this component (its dependencies come along)
npx koalaui-cli@latest add accordion

Usage#

import {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} from "@/components/ui/accordion"

export function Example() {
  return (
    <Accordion type="single" collapsible>
      <AccordionItem value="item-1">
        <AccordionTrigger>Section title</AccordionTrigger>
        <AccordionContent>Section body.</AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}

Variants#

Three levels of chrome along one axis. minimal is a flush list of rows split by hairlines; card wraps the set in a single bordered box with dividers; separated gives every item its own. None of them paints a fill: they take the ground they sit on, so on a muted band the rows read as the band.

Off that axis sits pill, the one variant where a closed row does not span the list: each question hugs its own text as a chip, and the open one floods to full width and squares off into a filled card. It is a control, not a container, so it does paint a fill: the same ink tint a Tabs segment uses, which reads one step off whatever ground it lands on. Built for a short list beside something else, a photograph or a product shot, where a ragged column of labels beats a stack of full-width rules.

board takes separated's outline and lays it out as a grid: closed questions read as a wall you scan rather than a list you go down, and the one you open spans every column, so its answer gets a full measure instead of a third of one. The root is the grid, so its column count comes from a className like lg:grid-cols-3.

Single vs. multiple#

Radix drives expansion. type="single" keeps one row open at a time. Add collapsible to allow closing the open row. type="multiple" lets several stay open at once.

Density#

Like Card and Dialog, Accordion honors Koala's density axis. comfortable is the spacious marketing default; compact tightens row height and inset for dense application UI. Set it per-instance or once via a DensityProvider.

Icon position#

iconPosition controls where the caret sits. trailing (the default) pins it to the right edge of the row; leading moves it ahead of the label for a help-center / knowledge-base look. The caret still flips on open and keeps its ARIA wiring either way.

Marker#

marker picks the disclosure mark. caret (the default) is a chevron that flips a full 180°; plus is the FAQ / help-centre mark, a plus that turns 45° into a cross. It is the same glyph and the same turn GalleryAccordion uses, so the library has one disclosure mark rather than two idioms for the same gesture. Both ride the shared caret-turn beat, so glyph and height tween move together, and both stay neutral in every state: the motion is the feedback, not a color change.

Size#

size is the type scale, orthogonal to density (which only moves spacing). md (the default) leaves the row to density; lg is the landing-page FAQ, where each question reads as a heading: an 18px semibold question on a taller row, a 16px answer and a 20px mark. Faqs sets it for every list inside with its own size.

FAQ#