Accordion

Accordion whose pixel plus signs fold into minus signs while the panels open smoothly; one or several items can stay open.

View as Markdown

<PxAccordion />· loading

Playground

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

Loading <PxAccordion />

Props

multiplelive

React

<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."
    }
  ]}
/>

Installation

pnpm dlx shadcn@latest add @lumesec/px-accordion

First timeRegister the @lumesec registry once, or install by URL+

Adds @lumesec to your components.json:

pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json

Or skip the setup and install by URL:

npx shadcn@latest add https://elements.lumesec.ai/r/px-accordion.json

Usage

px-accordion-example.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.

valueTypestring[]

Controlled list of open items (their value, or title). Use with onValueChange.

defaultValueTypestring[]Default[]

Items open initially when uncontrolled.

itemsTypereadonly 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.

multipleTypebooleanDefaultfalse

Lets several items stay open; without it, opening one closes the others.

onValueChangeType(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.