Siteplane UI
1
ComponentsNavigation

Accordion

Accordion organizes several short, scannable disclosure panels that can open independently or as a controlled group.

Purpose

Accordion organizes several short, scannable disclosure panels. Use it for FAQs, compact settings, or supporting information that does not need to remain visible. Use Collapsible when there is only one panel.

Basic usage

Two-factor authentication and active sessions live here.

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

export function Example() {
  return (
    <Accordion defaultValue={["security"]}>
      <AccordionItem value="security">
        <AccordionTrigger>Security settings</AccordionTrigger>
        <AccordionPanel>Two-factor and session controls.</AccordionPanel>
      </AccordionItem>
    </Accordion>
  );
}

Installation

With the Siteplane registry alias configured, add the component and import the installed source from your app.

CLI

pnpm dlx shadcn@4.16.1 add @siteplane/accordion

Import

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

Need the machine-readable source metadata? View registry JSON.

Usage

Use Accordion for related disclosure panels. Keep the trigger text specific and the panel content concise.

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

export function Example() {
  return (
    <Accordion defaultValue={["security"]}>
      <AccordionItem value="security">
        <AccordionTrigger>Security settings</AccordionTrigger>
        <AccordionPanel>Two-factor and session controls.</AccordionPanel>
      </AccordionItem>
    </Accordion>
  );
}

Examples

Multiple open panels, controlled state and disabled items are props of the same primitive. value and defaultValue always take an array of item values.

Multiple open

Two-factor authentication and active sessions live here.

Invoices, tax IDs and payment methods stay grouped.

<Accordion defaultValue={["security", "billing"]} multiple>
  {items.map((item) => (
    <AccordionItem key={item.id} value={item.id}>
      <AccordionTrigger>{item.title}</AccordionTrigger>
      <AccordionPanel>{item.content}</AccordionPanel>
    </AccordionItem>
  ))}
</Accordion>

Controlled

Open items: none
const [value, setValue] = useState<string[]>([]);

<Accordion onValueChange={setValue} value={value}>
  {items.map((item) => (
    <AccordionItem key={item.id} value={item.id}>
      <AccordionTrigger>{item.title}</AccordionTrigger>
      <AccordionPanel>{item.content}</AccordionPanel>
    </AccordionItem>
  ))}
</Accordion>

<Button onClick={() => setValue(["security", "billing"])} variant="outline">
  Open first two
</Button>
<span>Open items: {value.length > 0 ? value.join(", ") : "none"}</span>

Disabled item

disabled sits on the item. The trigger keeps its layout and shows the not-allowed state.

Plan, tokens and component notes are grouped for quick scanning.

<Accordion defaultValue={["overview"]}>
  <AccordionItem value="overview">
    <AccordionTrigger>Workspace overview</AccordionTrigger>
    <AccordionPanel>Plan, tokens and component notes.</AccordionPanel>
  </AccordionItem>
  <AccordionItem disabled value="archive">
    <AccordionTrigger>Archived settings</AccordionTrigger>
    <AccordionPanel>Disabled while the workspace is archived.</AccordionPanel>
  </AccordionItem>
</Accordion>

API Reference

The reference lists the source-owned exports and props that are easy to miss in visual examples. Inherited Base UI props remain available unless the wrapper narrows them.

  • AccordionItem owns a value and may be disabled independently.
  • defaultValue, value, and onValueChange use arrays, including single-open accordions. Add multiple only when several panels may remain open.
  • AccordionContent is a compatibility alias for AccordionPanel; new code uses AccordionPanel.
  • Keep AccordionTrigger and AccordionPanel inside the matching AccordionItem.

Motion

Component motion uses the shared Siteplane motion contract. See the global motion guide for provider setup, tokens and reduced-motion behavior.

  • AccordionPanel animates height through --accordion-panel-height and the shared expand duration and easing tokens.
  • Chevron rotation, trigger hover and press states, and reduced-motion behavior are built into the primitive. System and provider reduced-motion modes remove transition interpolation. Do not recreate them in feature code.

Accessibility

  • AccordionTrigger renders a button and keeps Base UI keyboard, focus, and expanded-state semantics.
  • Set disabled state on AccordionItem so its trigger, panel, and state remain synchronized.
  • Allow multiple open panels only when comparing their content is useful.
  • Do not hide critical decisions, long forms, or primary workflows in an accordion.

Implementation Guidance

  • Use Accordion for a related group of disclosures and Collapsible for one disclosure.
  • Preserve the primitive indicator, panel, focus, disabled, and motion classes.
  • Use the canonical AccordionPanel name in new code.

Navigation

Local navigation, disclosure and workflow orientation.

Breadcrumb

Breadcrumb shows the current resource within a hierarchy and links back to its parent levels.

On This Page