Home

Accordion

A stack of headings that each open their panel below, one at a time unless `multiple` is set.

ui.accordioncomponents/ui/accordion.tsx

Use case

For the AI

Use it for content a person scans by heading and opens only where needed: the answers on a client portal's help page, the terms of a maintenance plan, the optional sections of a long settings page. Opening one item closes the others by default; `multiple` lets several stay open. `defaultValue` takes an array of the values open at first.

Use it when

  • A list of questions and answers
  • Several sections of reading where most people need one
  • Long optional detail that would bury the page shown whole

Use something else when

  • One block of extra content behind one trigger: Collapsible
  • Sections a person switches between in the same place: Tabs
  • Content every person must see

Examples

Daily backups, monthly updates, a bug fixed in two business days and up to two hours of small changes a month.

Code

Import

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

Usage

<div className="w-full max-w-md rounded-[20px] bg-background px-5 shadow-(--shadow-rest)">
  <Accordion defaultValue={["included"]}>
    <AccordionItem value="included">
      <AccordionTrigger>What is included in maintenance?</AccordionTrigger>
      <AccordionPanel>Daily backups, monthly updates and up to two hours of small changes a month.</AccordionPanel>
    </AccordionItem>
    <AccordionItem value="faults">
      <AccordionTrigger>When is a critical fault answered?</AccordionTrigger>
      <AccordionPanel>Within two business hours, and worked on the same day.</AccordionPanel>
    </AccordionItem>
  </Accordion>
</div>

Rules

  • Each `AccordionItem` has a unique `value`, and `defaultValue` is an array of those values.
  • The trigger is the heading's words (a question or a section's name) and draws its own chevron; never add another.
  • Items are divided by the hairline `AccordionItem` draws, none under the last.
  • The panel's height animates on its own; put the content straight in `AccordionPanel`.
  • The panel opens and shuts on the glide in --dur-glide, from its top: never a fixed height.