Accordion

Disclosure sections like Finder's Get Info window, with triangles that turn as they open.

@cupertinoui/accordionBase UI Accordion Registry JSON

Kind:: Keynote Presentation
Size:: 2,4 MB on disk
Where:: Macintosh HD › Users › john › Documents

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

// Sections of a Get Info window.
export default function AccordionDemo() {
  return (
    <Accordion defaultValue={["general"]} className="w-full max-w-sm">
      <AccordionItem value="general">
        <AccordionTrigger>General</AccordionTrigger>
        <AccordionContent>
          <dl className="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 text-mac-subheadline">
            <dt className="text-right font-medium text-mac-label-secondary">Kind:</dt>
            <dd className="text-mac-label">Keynote Presentation</dd>
            <dt className="text-right font-medium text-mac-label-secondary">Size:</dt>
            <dd className="text-mac-label">2,4 MB on disk</dd>
            <dt className="text-right font-medium text-mac-label-secondary">Where:</dt>
            <dd className="text-mac-label">Macintosh HD › Users › john › Documents</dd>
          </dl>
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="more">
        <AccordionTrigger>More Info</AccordionTrigger>
        <AccordionContent>Last opened Today at 09:41.</AccordionContent>
      </AccordionItem>
      <AccordionItem value="sharing">
        <AccordionTrigger>Sharing & Permissions</AccordionTrigger>
        <AccordionContent>You can read and write.</AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}

Installation

pnpm dlx shadcn@latest add @cupertinoui/accordion

The first install also adds the macOS theme. See Installation to set up the registry.

Usage

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

<Accordion defaultValue={["general"]}>
  <AccordionItem value="general">
    <AccordionTrigger>General</AccordionTrigger>
    <AccordionContent>…</AccordionContent>
  </AccordionItem>
</Accordion>

API Reference

Every part forwards the props of the underlying Base UI Accordion part. The props below are the ones CupertinoUI adds or changes.

Accordion

Prop	Type	Description
`value / defaultValue`	`string[]`	The open sections.
`multiple`	`boolean` Default: `false`	Lets several sections be open.
`className`	`string`	Extra classes, merged with the component's own.