Accordion

A basic accordion with single selection mode. Set Type to AccordionType.Single and enable Collapsible to allow the user to close all items. When Collapsible is false, one item always remains open.

Allow multiple items to be open simultaneously by setting Type to AccordionType.Multiple. This mode is useful when users need to compare content across sections or when each section contains independent information that may be needed at the same time.

Use the Class parameter on AccordionItem and AccordionTrigger to apply custom Tailwind CSS classes for project-specific styling. Override border colors, add gradient backgrounds, or change the trigger hover appearance to match your brand design system.

Provide the Icon render fragment on AccordionTrigger to replace the default chevron. The fragment's bool context is the item's open state, so the icon can swap or animate as the item expands. Here a LucideIcon toggles between plus and minus.

A common FAQ accordion pattern using AccordionType.Single with Collapsible enabled. This real-world composition wraps the accordion inside a card-like container with a heading, making it suitable for landing pages, help centres, and documentation sites.

Individual accordion items can be disabled by setting Disabled to true on an AccordionItem. A disabled item cannot be toggled by click or keyboard, and the trigger button receives the HTML disabled attribute for proper assistive technology support.