Accordion

Free · MIT

A list of sections that each open and close to show or hide their content, with one or several open at a time.

Version 5.2.0· other versions

This page is for 5.2.0, the current release. An earlier release’s page is the Markdown that release published, so the docs match the version you have installed (candor-lock.json records it).

Not in the docs of 1.3.0, 1.4.0, 1.5.0, 1.5.1, 1.6.0, 1.7.0, 1.8.0, 1.8.1, 1.9.0, 1.9.1, 2.0.0, 2.1.0 and 2.2.0: the page came later, or had another name then.

Docs pages weren’t kept for 1.0.0, 1.0.1, 1.1.0, 1.1.1, 1.2.0 and 1.2.1: they are kept from 1.3.0 on, and before that only llms.txt was published.

Preview

Install

With the Candor CLI

Open the starter in StackBlitz

Opens the free starter app in StackBlitz, in your browser, on stackblitz.com. Accordion isn’t added for you: run npx candor-ui add accordion in its terminal. The starter’s agent needs an Anthropic API key to chat; without one it shows the components only.

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/accordion

Brings in: motion, tokens, utils · npm: @base-ui/react@^1.9.0, lucide-react@^1.67.0

Usage

TSX · The example above

"use client"

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

export default function Example() {
  // Everything starts closed: the person opens what they want.
  return (
    <Accordion type="single" collapsible className="w-full max-w-md">
      <AccordionItem value="what">
        <AccordionTrigger>What did the agent change?</AccordionTrigger>
        <AccordionContent>Three records in the billing table. The list is in the run's change log.</AccordionContent>
      </AccordionItem>
      <AccordionItem value="undo">
        <AccordionTrigger>Can it be undone?</AccordionTrigger>
        <AccordionContent>Two of the three can. The third sent an email, which can't be recalled.</AccordionContent>
      </AccordionItem>
      <AccordionItem value="who">
        <AccordionTrigger>Who approved it?</AccordionTrigger>
        <AccordionContent>No one yet. The run is waiting for a decision.</AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}

<Accordion>

Prop	Type	Default	Description
className	`string \| undefined`	—	Extra classes for the outer element.

<AccordionItem>

One heading and its panel. Give it a value that is unique in the accordion.

Prop	Type	Default	Description
className	`string \| undefined`	—	Extra classes for the outer element.

Also takes the props of Omit<AccordionPrimitive.Item.Props, "className">.

<AccordionTrigger>

The heading that opens and closes its panel, with a chevron that turns over when open. Its children are the heading's text.

Prop	Type	Default	Description
className	`string \| undefined`	—	Extra classes for the outer element.

Also takes the props of Omit<AccordionPrimitive.Trigger.Props, "className">.

<AccordionContent>

The panel. It opens and closes to the height Base UI measured, so a change is seen settling rather than snapping; data-motion="none" and the OS's reduced-motion setting make it snap.

Prop	Type	Default	Description
className	`string \| undefined`	—	Classes for the panel's content (inside the part that opens and closes).
style	`React.CSSProperties \| undefined`	—	Inline styles, merged over the part's motion chain.
forceMount	`boolean \| undefined`	—	Keeps the panel in the page, hidden, while it is closed. The same as Base UI's `keepMounted`.

Also takes the props of Omit<AccordionPrimitive.Panel.Props, "className" | "style">.

Motion

Moment	Family	What it does
open	reveal, size	The panel grows to its full height when the person opens it and shrinks back when they close it. What the app puts inside it doesn't move. Under reduced motion the panel snaps open or shut.

Set with --cd-motion-accordion-<moment>-* in your brand file; the families are in the design reference.

Terms used here

Calm level: What Candor's motion does for a person whose operating system asks for reduced motion: the highest-precedence setting, above the app's own motion level (none, calm, subtle or expressive) and the brand file. A theme tunes how a change looks, never when it happens, so nothing depends on seeing the motion.

Every term is defined in the glossary (Markdown).