# Accordion
> Accordion whose pixel plus signs fold into minus signs while the panels open smoothly; one or several items can stay open.
- React: `import { PxAccordion } from "@/components/lumesec/px-accordion"`
- Collection: Pixel UI (https://elements.lumesec.ai/components/pixel-ui)
- Registry item: https://elements.lumesec.ai/r/px-accordion.json
- Page: https://elements.lumesec.ai/components/pixel-ui/accordion



Live preview: https://elements.lumesec.ai/view/px-accordion

Demo source:

```tsx
import { PxAccordion } from "@/components/lumesec/px-accordion";

export default function PxAccordionDemo() {
  return (
    <div className="w-full max-w-[400px] rounded-[14px] border border-border bg-card px-5 py-[18px] shadow-[0_14px_34px_-20px_rgb(0_0_0/0.4)]">
      <PxAccordion
        defaultValue={["What is Ultracode?"]}
        items={[
          {
            title: "What is Ultracode?",
            content: "A Claude Code mode that sends xhigh effort and lets Claude plan multi-agent workflows on its own.",
          },
          { title: "How is usage counted?", content: "Usage resets weekly. Longer reasoning and more agents use more of it." },
          { title: "Can I export my data?", content: "Yes. Settings has an export that includes chats, projects and files." },
        ]}
      />
    </div>
  );
}
```

## Playground

Change a prop and the component re-renders. Props marked remounts set an initial value, so the component starts over.

## Installation

```bash
npx shadcn@latest add @lumesec/px-accordion
```

First time with the @lumesec registry? Register it once, or install by URL:

```bash
npx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json
npx shadcn@latest add https://elements.lumesec.ai/r/px-accordion.json
```

## Usage

React:

```tsx
import { PxAccordion } from "@/components/lumesec/px-accordion";

export function Example() {
  return (
    <PxAccordion
      defaultValue={["What is Ultracode?"]}
      items={[
        { title: "What is Ultracode?", content: "A Claude Code mode that sends xhigh effort." },
        { title: "How is usage counted?", content: "Usage resets weekly." },
      ]}
    />
  );
}
```

## Behaviour

Pixel plus signs fold into minus signs, panels open smoothly and a dotted rail marks the open answer. Add multiple to allow several open at once.

## API reference

### Props

Also accepts every prop of `<div>` (`React.ComponentProps<"div">`), spread onto the root element.

| Prop            | Type                         | Default | Description                                                                                                                                                                     |
| --------------- | ---------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `value`         | `string[]`                   | —       | Controlled list of open items (their `value`, or `title`). Use with `onValueChange`.                                                                                            |
| `defaultValue`  | `string[]`                   | `[]`    | Items open initially when uncontrolled.                                                                                                                                         |
| `items`         | `readonly PxAccordionItem[]` | —       | The sections: `{ value?: string; title: string; summary?: string; content: React.ReactNode }`. `value` defaults to `title`; `summary` adds muted text at the end of the header. |
| `multiple`      | `boolean`                    | `false` | Lets several items stay open; without it, opening one closes the others.                                                                                                        |
| `onValueChange` | `(value: string[]) => void`  | —       | Called with the open items whenever the user opens or closes one.                                                                                                               |

### Ref

`ref` points at the root `HTMLDivElement`.

## Keyboard

| Keys                | Action                                              |
| ------------------- | --------------------------------------------------- |
| Enter / Space       | Open or close the focused item.                     |
| ArrowDown / ArrowUp | Move focus to the next / previous header, wrapping. |

## Accessibility

* Each header is a native button with `aria-expanded` and `aria-controls`, inside an `<h3>`.
* Each panel has `role="region"` and an `aria-label` with the item title.
* Closed panels are `inert`, so their content leaves the tab order and the accessibility tree; the closing animation still plays.
* The plus and minus icon is an `aria-hidden` canvas.
* Reduced motion: panels open and close without the height and fade transitions, and the plus and minus icon switches at once.

## Theming

Styled with Tailwind classes on your shadcn theme tokens, so light and dark follow your theme. The accent comes from `--lumesec`. See [Theming](/docs/theming).

This component reads `--lumesec`, `--foreground`, `--muted-foreground` and `--border`.

## Notes

* Panels stay mounted while closed, so their content keeps its state.