Skip to content
New

Accordion

Questions that open their answer in place. Height animates with the village's motion, and not at all under reduced motion.

Yes. It reads only the village tokens, so the same accordion follows Konoha, Kiri or Iwa.

Installation

Terminal
npx rasengan-ui add accordion

Or with the shadcn CLI, from the registry:

Terminal
npx shadcn@latest add https://ui.rasengan.dev/r/base/accordion.json

Usage

app/faq.tsx
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
 
export function Faq() {
  return (
    <Accordion>
      <AccordionItem value="accessible">
        <AccordionTrigger>Is it accessible?</AccordionTrigger>
        <AccordionContent>Yes. Base UI handles the keyboard and the ARIA roles.</AccordionContent>
      </AccordionItem>
      <AccordionItem value="styled">
        <AccordionTrigger>Is it styled?</AccordionTrigger>
        <AccordionContent>It reads only the village tokens.</AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}

Several open

One item is open at a time. Pass multiple to let several stay open; the value is an array either way.

Variants

default splits the items with a rule. outline puts them inside one bordered block; separated makes each item its own card, for a FAQ on a page.

A whole design language, switched at runtime.

A whole design language, switched at runtime.

<Accordion variant="separated">…</Accordion>

Villages

Rules between items in the village's border, headings in its type; Iwa sets the questions in capitals.

Konoha · light

Yes. It reads only the village tokens, so the same accordion follows Konoha, Kiri or Iwa.

Konoha · dark

Yes. It reads only the village tokens, so the same accordion follows Konoha, Kiri or Iwa.

Kiri · light

Yes. It reads only the village tokens, so the same accordion follows Konoha, Kiri or Iwa.

Kiri · dark

Yes. It reads only the village tokens, so the same accordion follows Konoha, Kiri or Iwa.

Iwa · light

Yes. It reads only the village tokens, so the same accordion follows Konoha, Kiri or Iwa.

Iwa · dark

Yes. It reads only the village tokens, so the same accordion follows Konoha, Kiri or Iwa.

Accessibility

  • Each trigger is a button inside a heading, with aria-expanded and aria-controls; each panel is a region named by its trigger.
  • Enter or Space toggles; arrow keys, Home and End move between triggers.

API reference

The parts of Base UI's Accordion, styled:

PartNotes
Accordionvalue, defaultValue, onValueChange, multiple, disabled; variant ("default" | "outline" | "separated") for its items
AccordionItemvalue, disabled
AccordionTriggerthe heading's button, with its chevron
AccordionContentthe panel; keepMounted, hiddenUntilFound