Standard Accordion with Chevron for React

Use it when the headings explain themselves and the content is a paragraph or two: an FAQ, a settings group, a help section. Reach for icons or subtitles when people need more to go on before they open an item, and for a nested layout when sections hold sub-topics.

One open item is the default. Add multiple to Accordion to let several stay open, and pass every item to open first in the defaultValue array.

Each AccordionItem gets a full border, and -space-y-px on Accordion pulls the items up by one pixel so neighboring borders overlap into a single line. first:rounded-t-lg and last:rounded-b-lg round the outer corners. Change px-4 on the items for more room, or drop the borders for a flat list.

AccordionTrigger draws its own chevron, a down arrow that turns into an up arrow when the item opens. Both icons have data-slot="accordion-trigger-icon", so **:data-[slot=accordion-trigger-icon]:hidden on a trigger hides them and you can put your own icon in the trigger. To change the icon everywhere, edit it in components/ui/accordion.

The height animation lives in AccordionContent in components/ui/accordion, so that's where to change its duration or easing. Users who ask for reduced motion should still get an instant toggle, so keep the animation short.

Yes. Each trigger is a button with aria-expanded and aria-controls, and Enter or Space toggles it. The arrow keys move between triggers, and Home and End jump to the first and last.