Accordion

Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add @lumi-ui/accordion
Copy

Basic Usage

Import the Accordion, AccordionItem, AccordionHeader, AccordionTrigger, and AccordionPanel components. Compose them to create a basic accordion.

Variants

Underline (default)

Contained

Outline

Recipes

Default Open Panels

To have an accordion item open by default, assign a unique value to the AccordionItem and pass that value in an array to the defaultValue prop on Accordion component.

To have multiple items open by default, ensure the multiple prop is set to true (which it is by default) and include each item's value in the defaultValue array.

Allowing a Single Open Panel

By default, users can open multiple panels at once. To restrict this so that only one panel can be open at a time, set the multiple prop to false.

Disable Panel

Pass disabled props to AccordionItem to disable a panel.

Anatomy

Copy <Accordion>
  <AccordionItem>
    <AccordionHeader>
      <AccordionTrigger/>
    </AccordionHeader>
    <AccordionPanel/>
  </AccordionItem>
 </Accordion>

Migration from shadcn/ui

Component Naming & Structure

The Accordion component has been updated for better structural clarity and a more intuitive API for controlling behavior.

Key Differences & New Features

Migration Example

Copyimport {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"
 
function Demo() {
  return (
    <Accordion type="single" collapsible>
      <AccordionItem value="item-1">
        <AccordionTrigger>Is it accessible?</AccordionTrigger>
        <AccordionContent>
          Yes. It adheres to the WAI-ARIA design pattern.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}