About
A keyboard-accessible accordion built on native HTML5 details/summary elements, with single- or multi-expand coordination, focus-visible outlines and reduced-motion support — ported to React from A11YPros' a11y-ui web component (credit: Ryan Mack / a11ypros.com).
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Accessible Accordion to your project and fits it to your theme.
Code
How Accessible Accordion is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import { Accordion, AccordionItem } from "@/components/ui/a11y-accordion";
export default function AccordionSingleItemDemo() {
return (
<div className="w-full max-w-xl mx-auto p-6">
<Accordion>
<AccordionItem id="single" title="Click to expand">
<p>
This is a single accordion item. The Accordion component can contain
one or multiple AccordionItem components.
</p>
</AccordionItem>
</Accordion>
</div>
);
}
More by a11ypros
View all
Accessible Tooltip
1
Accessible Radio Group
A11y Label