# Accordion

> A stack of headed sections where one or several open at a time, with a collapse that animates without measuring, arrow-key navigation between headers and labelled regions for assistive tech.

- Package: `fancy-ui-react` (React 18/19 + Tailwind CSS v4)
- Category: Navigation
- Tags: accordion, disclosure, faq, collapse, compound, navigation
- Dependencies: collapsible
- Types: `AccordionProps`, `AccordionItemProps`, `AccordionTriggerProps`, `AccordionContentProps`, `AccordionOrientation`, `AccordionType`, `AccordionValue`, `AccordionContext`, `AccordionItemContext`
- Docs: https://fancy-ui.rama.app/docs/components/accordion
- Source: https://github.com/RamaHerbin/fancy-ui/tree/main/react/src/components/accordion

## Import

```tsx
import { Accordion } from 'fancy-ui-react';
```

Setup (once per project): `npm install fancy-ui-react`, then put these lines in your main CSS file (the stylesheet import goes right after `@import "tailwindcss";`):

```css
@import "tailwindcss";
@import "fancy-ui-react/tailwind.css";
```

and import the component styles once in the app entry: `import "fancy-ui-react/styles.css";`. Full guide: https://fancy-ui.rama.app/llms.txt

The names below are the ones to write in React; when one differs from the Svelte name, the Svelte name follows in parentheses. `class` becomes `className`, a callback takes the name the React port declares (`onclick` becomes `onClick`), snippets become `ReactNode` props (render functions when they take arguments) and the default snippet is `children`. Divergences: https://github.com/RamaHerbin/fancy-ui/tree/main/react#divergences-from-the-svelte-api

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `type` | `"single" \| "multiple"` | `"single"` | "single" keeps one item open at a time, "multiple" lets any number be open. |
| `value` | `string \| string[]` | — | The open item, bindable. A string for type="single" ("" when none is open), a string array for type="multiple". |
| `onValueChange` | `(value: string \| string[]) => void` | — | Called with the new value each time an item toggles. |
| `collapsible` | `boolean` | `false` | With type="single", lets the open item be closed again. Without it one item stays open once opened. |
| `disabled` | `boolean` | `false` | Disables every item. |
| `orientation` | `"horizontal" \| "vertical"` | `"vertical"` | The axis the items stack on, and which arrow-key pair moves focus. |
| `className` (Svelte `class`) | `string` | — | Additional CSS classes, merged onto the root. |
| `ref` | `HTMLDivElement \| null` | `null` | Bindable reference to the root element. |
| `AccordionItem.value` (required) | `string` | — | This item's value: what the accordion's value holds while it is open. |
| `AccordionItem.disabled` | `boolean` | `false` | Disables just this item; its trigger is skipped by the arrow keys. |
| `AccordionItem.className` (Svelte `AccordionItem.class`) | `string` | — | Additional CSS classes, merged onto the item. |
| `AccordionItem.ref` | `HTMLDivElement \| null` | `null` | Bindable reference to the item element. |
| `AccordionTrigger.headingLevel` | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `3` | The level of the heading that wraps the trigger button. |
| `AccordionTrigger.disabled` | `boolean` | `false` | Disables just this trigger, on top of its item and the accordion. |
| `AccordionTrigger.className` (Svelte `AccordionTrigger.class`) | `string` | — | Additional CSS classes, merged onto the trigger button. |
| `AccordionTrigger.ref` | `HTMLButtonElement \| null` | `null` | Bindable reference to the trigger's button element. |
| `AccordionContent.forceMount` | `boolean` | `true` | Keeps the children mounted while the item is closed. Pass false to unmount them once the collapse has finished. |
| `AccordionContent.className` (Svelte `AccordionContent.class`) | `string` | — | Additional CSS classes, merged onto the inner body so padding collapses with the panel. |
| `AccordionContent.ref` | `HTMLDivElement \| null` | `null` | Bindable reference to the region element that animates. |

## Node props

| Prop | Description |
| --- | --- |
| `children` | The AccordionItems. |
| `AccordionItem.children` | An AccordionTrigger and an AccordionContent. |
| `AccordionTrigger.children` | The trigger's label. |
| `AccordionContent.children` | The item's content. |

## Example

```tsx
import { useState } from "react";
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "fancy-ui-react";

export function AccordionExample() {
	const [value, setValue] = useState<string | string[]>("shipping");

	return (
		<Accordion
			type="single"
			collapsible
			value={value}
			onValueChange={setValue}
			className="w-full max-w-md"
		>
			<AccordionItem value="shipping">
				<AccordionTrigger>How long does shipping take?</AccordionTrigger>
				<AccordionContent>Orders leave the warehouse within two working days.</AccordionContent>
			</AccordionItem>
			<AccordionItem value="returns">
				<AccordionTrigger>Can I return an item?</AccordionTrigger>
				<AccordionContent>
					Yes, within 30 days, as long as it is unused and in its original packaging.
				</AccordionContent>
			</AccordionItem>
			<AccordionItem value="support">
				<AccordionTrigger>How do I reach support?</AccordionTrigger>
				<AccordionContent>
					Write to us any time and we reply within one working day.
				</AccordionContent>
			</AccordionItem>
		</Accordion>
	);
}
```