Overlays

Accordion

Stacked sections that expand and collapse. Built on native <details>/<summary>: keyboard, screen readers, find-in-page and printing work without JavaScript, and the component ships no client code.

Is it accessible?

Yes. Every effect also runs on keyboard focus.

Can I change the accent?

Set data-accent on any element.

Does it support RTL?

Yes, with logical properties.

demos/accordion.tsx

import { Accordion, AccordionItem } from "pixelbits/accordion";

export default function Demo() {
  return (
    <Accordion className="w-full max-w-md">
      <AccordionItem title="Is it accessible?" defaultOpen>
        Yes. Every effect also runs on keyboard focus.
      </AccordionItem>
      <AccordionItem title="Can I change the accent?">
        Set data-accent on any element.
      </AccordionItem>
      <AccordionItem title="Does it support RTL?">
        Yes, with logical properties.
      </AccordionItem>
    </Accordion>
  );
}

Installation

npm: import

import { Accordion, AccordionItem } from "pixelbits/accordion";

shadcn: copy the source

npx shadcn add https://pixelbits.ali-moradi-develop.com/r/accordion.json

API

<Accordion>

Example

<Accordion>
  <AccordionItem title="Is it accessible?" defaultOpen>Yes…</AccordionItem>
  <AccordionItem title="Does it support RTL?">Yes…</AccordionItem>
</Accordion>

Prop	Type	Default	Description
type	"single" \| "multiple"	"single"	`"single"`: opening one item closes the others (native exclusive `<details name>`). `"multiple"`: items open independently.
children*	ReactNode	—	`AccordionItem`s.

Also accepts every prop of HTMLAttributes<HTMLDivElement>.

<AccordionItem>

One section of an Accordion. Opening animates the height smoothly where the browser supports ::details-content (Chrome, Edge, Safari 18.4+) and opens at once elsewhere; the marker fills with the accent in pixel steps.

Prop	Type	Default	Description
title*	ReactNode	—	The always-visible heading that toggles the item.
defaultOpen	boolean	false	Open on first render.
children*	ReactNode	—	The content shown when open.

Also accepts every prop of Omit<DetailsHTMLAttributes<HTMLDetailsElement>, "title">.