Accordion

A vertically stacked set of headings that each reveal a section of content.

Updated 2026-06-04

Single, collapsible

<Accordion type="single" collapsible class="w-full max-w-md">
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>Yes. It follows the WAI-ARIA design pattern and is keyboard-navigable.</AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Is it styled?</AccordionTrigger>
    <AccordionContent>Yes. It ships with styles matching the rest of the kit.</AccordionContent>
  </AccordionItem>
</Accordion>

A vertically stacked set of headings that each reveal a section of content.

Installation

railbase ui add accordion

Note

railbase ui add also copies shared primitives — they ship alongside this component automatically.

Usage

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

<Accordion type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>Yes. It follows the WAI-ARIA pattern.</AccordionContent>
  </AccordionItem>
</Accordion>

Anatomy

Exported parts: Accordion · AccordionItem · AccordionTrigger · AccordionContent