> ## Documentation Index
> Fetch the complete documentation index at: https://api.fanvue.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Accordion

> A vertically stacked set of headings that expand to reveal their content, built from Accordion, AccordionItem, AccordionTrigger and AccordionContent.

```tsx theme={null}
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@fanvue/ui";
import type {
  AccordionContentProps,
  AccordionItemProps,
  AccordionProps,
  AccordionTriggerProps,
} from "@fanvue/ui";
```

## Examples

## Default (Single, Collapsible)

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-accordion--default&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="360" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="Accordion — Default (Single, Collapsible)" />
</Frame>

```tsx theme={null}
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@fanvue/ui";

<Accordion type="single" collapsible className="max-w-md">
  <AccordionItem value="item-1">
    <AccordionTrigger>What is your refund policy?</AccordionTrigger>
    <AccordionContent>
      If you are unhappy with your purchase, we will refund you in full within the first 30
      days.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>How do I cancel my subscription?</AccordionTrigger>
    <AccordionContent>
      You can cancel your subscription at any time from your account settings page.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-3">
    <AccordionTrigger>Can I change my plan later?</AccordionTrigger>
    <AccordionContent>
      Yes, you can upgrade or downgrade your plan at any time. Changes take effect immediately.
    </AccordionContent>
  </AccordionItem>
</Accordion>
```

## Controlled Mode

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-accordion--controlled&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="360" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="Accordion — Controlled Mode" />
</Frame>

```tsx theme={null}
import { useState } from "react";
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@fanvue/ui";

function Example() {
  const [value, setValue] = useState("item-1");
  return (
    <div className="max-w-md space-y-4">
      <p className="typography-description-12px-regular text-content-secondary">
        Current value: <strong>{value || "(none)"}</strong>
      </p>
      <Accordion type="single" collapsible value={value} onValueChange={setValue}>
        <AccordionItem value="item-1">
          <AccordionTrigger>Controlled Section 1</AccordionTrigger>
          <AccordionContent>Content for section 1.</AccordionContent>
        </AccordionItem>
        <AccordionItem value="item-2">
          <AccordionTrigger>Controlled Section 2</AccordionTrigger>
          <AccordionContent>Content for section 2.</AccordionContent>
        </AccordionItem>
        <AccordionItem value="item-3">
          <AccordionTrigger>Controlled Section 3</AccordionTrigger>
          <AccordionContent>Content for section 3.</AccordionContent>
        </AccordionItem>
      </Accordion>
    </div>
  );
}
```

## All States (Matrix)

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-accordion--all-states&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="700" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="Accordion — All States (Matrix)" />
</Frame>

```tsx theme={null}
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@fanvue/ui";

<div className="flex flex-col gap-8">
  <div>
    <p className="typography-body-small-14px-semibold mb-4 text-content-tertiary">
      Single, Collapsible
    </p>
    <Accordion type="single" collapsible defaultValue="item-1" className="max-w-sm">
      <AccordionItem value="item-1">
        <AccordionTrigger>Expanded</AccordionTrigger>
        <AccordionContent>Expanded content</AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger>Collapsed</AccordionTrigger>
        <AccordionContent>Collapsed content</AccordionContent>
      </AccordionItem>
    </Accordion>
  </div>
  <div>
    <p className="typography-body-small-14px-semibold mb-4 text-content-tertiary">
      Disabled Item
    </p>
    <Accordion type="single" collapsible className="max-w-sm">
      <AccordionItem value="item-1">
        <AccordionTrigger>Enabled</AccordionTrigger>
        <AccordionContent>Enabled content</AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2" disabled>
        <AccordionTrigger>Disabled</AccordionTrigger>
        <AccordionContent>Disabled content</AccordionContent>
      </AccordionItem>
    </Accordion>
  </div>
  <div>
    <p className="typography-body-small-14px-semibold mb-4 text-content-tertiary">
      Multiple Mode
    </p>
    <Accordion type="multiple" defaultValue={["item-1", "item-2"]} className="max-w-sm">
      <AccordionItem value="item-1">
        <AccordionTrigger>Open 1</AccordionTrigger>
        <AccordionContent>Both items open at once</AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger>Open 2</AccordionTrigger>
        <AccordionContent>Both items open at once</AccordionContent>
      </AccordionItem>
    </Accordion>
  </div>
  <div>
    <p className="typography-body-small-14px-semibold mb-4 text-content-tertiary">
      Root Disabled
    </p>
    <Accordion type="single" collapsible disabled className="max-w-sm">
      <AccordionItem value="item-1">
        <AccordionTrigger>Disabled 1</AccordionTrigger>
        <AccordionContent>Content 1</AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger>Disabled 2</AccordionTrigger>
        <AccordionContent>Content 2</AccordionContent>
      </AccordionItem>
    </Accordion>
  </div>
</div>
```

## Header Variants (Matrix)

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-accordion--header-variants&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="360" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="Accordion — Header Variants (Matrix)" />
</Frame>

```tsx theme={null}
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
  Avatar,
  CrownIcon,
} from "@fanvue/ui";

const avatarSrc = "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=96&h=96&fit=crop";

<Accordion type="multiple" defaultValue={["desc", "icon", "avatar"]} className="max-w-md">
  <AccordionItem value="title">
    <AccordionTrigger>Title only</AccordionTrigger>
    <AccordionContent>The default header with just a title.</AccordionContent>
  </AccordionItem>
  <AccordionItem value="desc">
    <AccordionTrigger description="With a secondary description line.">
      Title + description
    </AccordionTrigger>
    <AccordionContent>Adds context under the title.</AccordionContent>
  </AccordionItem>
  <AccordionItem value="icon">
    <AccordionTrigger leadingIcon={<CrownIcon />} description="With a leading icon.">
      Title + icon
    </AccordionTrigger>
    <AccordionContent>A leading icon identifies the section type.</AccordionContent>
  </AccordionItem>
  <AccordionItem value="avatar">
    <AccordionTrigger
      avatar={<Avatar size={24} src={avatarSrc} alt="Jane Doe" fallback="JD" />}
      description="@jane_doe"
    >
      Title + avatar
    </AccordionTrigger>
    <AccordionContent>An avatar identifies a person or account.</AccordionContent>
  </AccordionItem>
</Accordion>
```

## Props

## Accordion

Root container for an accordion interface. Manages the expand/collapse state and coordinates `AccordionItem`, `AccordionTrigger`, and `AccordionContent`.

Built on Radix UI `Accordion`.

<ParamField path="asChild" type="boolean" />

## AccordionContent

Renders the collapsible content panel for an `AccordionItem`. Animates open and closed.

<ParamField path="asChild" type="boolean" />

<ParamField path="noPadding" type="boolean">
  Remove the default inner padding (`px-3 pb-3`). Useful when you need custom content layout.
</ParamField>

## AccordionItem

A single collapsible section within an `Accordion`. Contains an `AccordionTrigger` and `AccordionContent`.

<ParamField path="asChild" type="boolean" />

## AccordionTrigger

An interactive button that toggles the visibility of its associated `AccordionContent` panel.

<ParamField path="asChild" type="boolean" />

<ParamField path="avatar" type="ReactNode">
  Leading avatar shown before the title, for headers representing a person or account. Pass an `Avatar` sized to `24`.
</ParamField>

<ParamField path="description" type="ReactNode">
  Secondary line rendered under the title, for extra context.
</ParamField>

<ParamField path="icon" type="ReactNode">
  Trailing indicator icon. Defaults to `ChevronDownIcon` (rotates when open). Pass `null` to suppress it.
</ParamField>

<ParamField path="leadingIcon" type="ReactNode">
  Leading icon shown before the title (sized to 16px).
</ParamField>

## Exported types

Also exported from `@fanvue/ui`: `AccordionContentProps`, `AccordionItemProps`, `AccordionProps`, `AccordionTriggerProps`.

***

**Setup:** [Installation](/docs/ui/installation) · [Theming](/docs/ui/theming)