# Accordion

A disclosure whose opened/closed state is a pure function of the timeline.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).

## Installation

<TabsTrigger value="cli">Command</TabsTrigger>
<TabsTrigger value="manual">Manual</TabsTrigger>

```bash
npx shadcn@latest add @framecn/accordion
```

<Step>Copy and paste the following code into your project.</Step>

<Step>Update the import paths to match your project setup.</Step>

## Usage

```tsx
import { Accordion } from "@/components/ui/accordion";
```

```tsx
<Accordion />
```

## Smooth transitions

The docs preview animates open → close via `useAccordionTransition`. In your composition, drive the same hook and pass `style`:

```tsx
import { Accordion } from "@/components/framecn/accordion";
import { useAccordionTransition } from "@/components/framecn/use-accordion-transition";

const style = useAccordionTransition([
  { at: 18, state: "opened", duration: 16 },
  { at: 78, state: "closed", duration: 12 },
]);

<Accordion style={style} />;
```

## API Reference

### Accordion

| Prop            | Type                    | Default                             |
| --------------- | ----------------------- | ----------------------------------- |
| `state`         | `"opened" \| "closed"`  | `"closed"`                          |
| `style`         | `AccordionStyle`        | `-` (takes precedence over `state`) |
| `title`         | `string`                | `"Is it accessible?"`               |
| `content`       | `string`                | WAI-ARIA default copy               |
| `contentHeight` | `number`                | `64`                                |
| `variant`       | `"default" \| "ghost"`  | `"default"`                         |
| `theme`         | `Partial<FramecnTheme>` | `-`                                 |