Accordion

Vertically stacked headings that each reveal a section of content.

You’re billed monthly for each member. Invoices are emailed on the 1st.

You can download past invoices from Billing settings.

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

export default function AccordionBasic() {
  return (
    <Accordion defaultValue={["billing"]} className="max-w-md">
      <AccordionItem value="billing">
        <AccordionTrigger>How does billing work?</AccordionTrigger>
        <AccordionContent>
          <p>You’re billed monthly for each member. Invoices are emailed on the 1st.</p>
          <p>
            You can download past invoices from <a href="#billing-settings">Billing settings</a>.
          </p>
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="members">
        <AccordionTrigger>Can I invite people outside my company?</AccordionTrigger>
        <AccordionContent>
          Yes. Guests can view and comment on the projects you share with them.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="export">
        <AccordionTrigger>How do I export my data?</AccordionTrigger>
        <AccordionContent>
          Open Settings, then Export, and choose CSV or JSON. Large exports are emailed to you.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}

Installation

Add the registryOnce per project
pnpm dlx shadcn@latest registry add @jarvis=https://ui.jarv.is/r/{name}.json
Add accordion
pnpm dlx shadcn@latest add @jarvis/accordion

Usage

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

export function Faq() {
  return (
    <Accordion>
      <AccordionItem value="billing">
        <AccordionTrigger>How does billing work?</AccordionTrigger>
        <AccordionContent>You’re billed monthly for each member.</AccordionContent>
      </AccordionItem>
      <AccordionItem value="export">
        <AccordionTrigger>How do I export my data?</AccordionTrigger>
        <AccordionContent>Open Settings, then Export, and choose CSV or JSON.</AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}

Give each item a value to open it with defaultValue, or control the open items with value and onValueChange.

Composition

Accordion
- AccordionItem
  - AccordionTrigger
  - AccordionContent

Examples

Multiple

Opening one section closes the others unless you set multiple.

Email for mentions and assignments, push for everything else.

Match the system theme, with compact density.

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

export default function AccordionMultiple() {
  return (
    <Accordion multiple defaultValue={["notifications", "appearance"]} className="max-w-md">
      <AccordionItem value="notifications">
        <AccordionTrigger>Notifications</AccordionTrigger>
        <AccordionContent>
          Email for mentions and assignments, push for everything else.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="appearance">
        <AccordionTrigger>Appearance</AccordionTrigger>
        <AccordionContent>Match the system theme, with compact density.</AccordionContent>
      </AccordionItem>
      <AccordionItem value="language">
        <AccordionTrigger>Language</AccordionTrigger>
        <AccordionContent>English (United States).</AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}

Disabled item

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

export default function AccordionDisabled() {
  return (
    <Accordion className="max-w-md">
      <AccordionItem value="plans">
        <AccordionTrigger>Which plan is right for me?</AccordionTrigger>
        <AccordionContent>
          Start on the free plan, and upgrade when you need more members or storage.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="sso" disabled>
        <AccordionTrigger>Do you support single sign-on?</AccordionTrigger>
        <AccordionContent>Single sign-on is available on the Enterprise plan.</AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}

Props

Part	Extends
Accordion	Base UI's Accordion.Root
AccordionItem	Base UI's Accordion.Item
AccordionTrigger	Base UI's Accordion.Trigger
AccordionContent	Base UI's Accordion.Panel

The tables leave out className, style and render. Parts built on Base UI take them as its styling and composition guides describe.

Accordion

Prop	Type	Default
`value` The controlled value of the item(s) that should be expanded. To render an uncontrolled accordion, use the `defaultValue` prop instead.	`AccordionValue<any>`	—
`defaultValue` The uncontrolled value of the item(s) that should be initially expanded. To render a controlled accordion, use the `value` prop instead.	`AccordionValue<any>`	—
`disabled` Whether the component should ignore user interaction.	`boolean`	`false`
`hiddenUntilFound` Allows the browser's built-in page search to find and expand the panel contents. Overrides the `keepMounted` prop and uses `hidden="until-found"` to hide the element without removing it from the DOM.	`boolean`	`false`
`keepMounted` Whether to keep the element in the DOM while the panel is closed. This prop is ignored when `hiddenUntilFound` is used.	`boolean`	`false`
`loopFocus` Deprecated following the APG guidance update to remove roving focus. This prop no longer affects keyboard focus behavior.	`boolean`	—
`onValueChange` Event handler called when an accordion item is expanded or collapsed. Provides the new value as an argument.	`((value: AccordionValue<any>, eventDetails: AccordionRootChangeEventDetails) => void)`	—
`multiple` Whether multiple items can be open at the same time.	`boolean`	`false`
`orientation` Deprecated following the APG guidance update to remove roving focus. This prop no longer affects keyboard focus behavior.	`"horizontal" \| "vertical"`	`'vertical'`

AccordionItem

Prop	Type	Default
`value` A unique value that identifies this accordion item. If no value is provided, a unique ID will be generated automatically. Use when controlling the accordion programmatically, or to set an initial open state.	`any`	—
`onOpenChange` Event handler called when the panel is opened or closed.	`((open: boolean, eventDetails: Accordion.Item.ChangeEventDetails) => void)`	—
`disabled` Whether the component should ignore user interaction.	`boolean`	`false`

AccordionTrigger

Prop	Type	Default
`nativeButton` Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (for example, `<div>`).	`boolean`	`true`

AccordionContent

Prop	Type	Default
`hiddenUntilFound` Allows the browser's built-in page search to find and expand the panel contents. Overrides the `keepMounted` prop and uses `hidden="until-found"` to hide the element without removing it from the DOM.	`boolean`	`false`
`keepMounted` Whether to keep the element in the DOM while the panel is closed. This prop is ignored when `hiddenUntilFound` is used.	`boolean`	`false`