assistant-ui logo/Docs

Accordion

A vertically stacked set of interactive headings that reveal or hide content sections.

Radix UI Accordion

This is a standalone component that does not depend on the assistant-ui runtime. Use it anywhere in your application.

Installation

npx shadcn@latest add https://r.assistant-ui.com/accordion.json

Usage

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

export function Example() {
  return (
    <Accordion type="single" collapsible>
      <AccordionItem value="item-1">
        <AccordionTrigger>Section 1</AccordionTrigger>
        <AccordionContent>Content for section 1.</AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger>Section 2</AccordionTrigger>
        <AccordionContent>Content for section 2.</AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}

Examples

Variants

Use the variant prop on Accordion to change the visual style. Child components inherit the variant automatically.

Default

Outline

Ghost

// Default - border-bottom separator
<Accordion type="single" collapsible variant="default">
  <AccordionItem value="item-1">
    <AccordionTrigger>...</AccordionTrigger>
    <AccordionContent>...</AccordionContent>
  </AccordionItem>
</Accordion>

// Outline - bordered container
<Accordion type="single" collapsible variant="outline">
  <AccordionItem value="item-1">
    <AccordionTrigger>...</AccordionTrigger>
    <AccordionContent>...</AccordionContent>
  </AccordionItem>
</Accordion>

// Ghost - separated cards
<Accordion type="single" collapsible variant="ghost">
  <AccordionItem value="item-1">
    <AccordionTrigger>...</AccordionTrigger>
    <AccordionContent>...</AccordionContent>
  </AccordionItem>
</Accordion>

Multiple Items Open

Use type="multiple" to allow multiple items to be open simultaneously.

<Accordion type="multiple">
  <AccordionItem value="item-1">
    <AccordionTrigger>First Section</AccordionTrigger>
    <AccordionContent>Content 1</AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Second Section</AccordionTrigger>
    <AccordionContent>Content 2</AccordionContent>
  </AccordionItem>
</Accordion>

With Icons

Add icons or custom elements inside the trigger.

Controlled

Use value and onValueChange for controlled accordion state.

This is the overview section content.

Current value: item-1

FAQ Section

A practical example of using accordion for a FAQ section.

Frequently Asked Questions

API Reference

Composable API

ComponentDescription
AccordionThe root component that manages accordion state and variant.
AccordionItemA single collapsible section container.
AccordionTriggerThe clickable header that toggles content visibility.
AccordionContentThe collapsible content panel.

Accordion

The root component that manages accordion state. Set variant here to style all child components.

AccordionProps
typerequired: "single" | "multiple"

Whether only one or multiple items can be open at once.

collapsible: boolean= false

When type is 'single', allows closing the open item by clicking it again.

defaultValue?: string | string[]

The default open item(s) (uncontrolled).

value?: string | string[]

The controlled open item(s).

onValueChange?: (value: string | string[]) => void

Callback when the open item(s) change.

variant: "default" | "outline" | "ghost"= "default"

The visual style of the accordion. Child components inherit this automatically.

className?: string

Additional CSS classes.

AccordionItem

A single collapsible section container.

AccordionItemProps
valuerequired: string

A unique identifier for this item.

disabled?: boolean

Whether the item is disabled.

className?: string

Additional CSS classes.

AccordionTrigger

The clickable header that toggles content visibility.

AccordionTriggerProps
className?: string

Additional CSS classes.

AccordionContent

The collapsible content panel.

AccordionContentProps
className?: string

Additional CSS classes.

Style Variants (CVA)

ExportDescription
accordionVariantsStyles for the accordion container.
import { accordionVariants } from "@/components/assistant-ui/accordion";

<div className={accordionVariants({ variant: "outline" })}>
  Custom Accordion Container
</div>