caliper uidocs
DemoSign inGet Pro

Accordion

Free

A stack of headings that each reveal their content, one open at a time.

Installs components/ui/accordion.tsxDepends on lucide-reactMotion none in component source
pnpm dlx shadcn@latest add https://caliperui.site/r/accordion.json

The booking flow and the room pages.

Source and examples live in the shared drive.

Mara reviews copy; Noor reviews the build.

When to use #

Use it for

  • FAQs and handoff notes where people scan headings first.
  • Long content that is read selectively.

Skip it when

  • Everything should be visible at once; use sections.
  • A single disclosure; use a collapsible.

Installation #

terminal
pnpm dlx shadcn@latest add https://caliperui.site/r/accordion.json

Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above.

example.tsx
import { useState } from "react"
import { Accordion } from "@/components/ui/accordion"

export function HandoffAccordion() {
  const [open, setOpen] = useState<string | null>("scope");
  return (
    <div className="w-full max-w-md">
      <Accordion
        value={open}
        onValueChange={setOpen}
        items={[
          { id: "scope", title: "What is in scope", content: "The booking flow and the room pages." },
          { id: "files", title: "Where the files are", content: "Source and examples live in the shared drive." },
          { id: "owner", title: "Who to ask", content: "Mara reviews copy; Noor reviews the build." },
        ]}
      />
    </div>
  );
}

API reference #

Accordion

component
PropTypeDefault
items *readonly AccordionItem[]—
valuestring | null—
defaultValuestring | nullnull
onValueChange((value: string | null) => void)—
classNamestring—

Accessibility #

It exposes region semantics, with aria-expanded, aria-controls, aria-hidden and aria-labelledby kept in step with state.

No custom key handling; Tab and the native activation keys do the work.

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.