GitHub

Accordion

A set of collapsible panels with headings.

DocsAPI Reference

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt, repellendus?

Installation

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

Basic Usage

import {
  Accordion,
  AccordionItem,
  AccordionPanel,
  AccordionSummary,
} from "@/components/ui/accordion";
export function AccordionDemo() {
  return (
    <Accordion defaultValue={["item-1"]} className="w-full max-w-md">
      <AccordionItem value="item-1">
        <AccordionSummary>What is Lumi UI?</AccordionSummary>
        <AccordionPanel>
          Lumi UI is an open-source component library designed for building
          beautiful and accessible user interfaces with React.
        </AccordionPanel>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionSummary>Can I customize the components?</AccordionSummary>
        <AccordionPanel>
          Absolutely. Components are built with Tailwind CSS and CVA, making
          them easy to style and extend to match your brand.
        </AccordionPanel>
      </AccordionItem>
    </Accordion>
  );
}

Anatomy

<Accordion>
  <AccordionItem>
    <AccordionSummary/>
    <AccordionPanel/>
  </AccordionItem>
</Accordion>

Cookbook

Custom Trigger with icon

Custom Trigger without icon

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 and include each item's value in the defaultValue array.

Open multiple panels

Set up the accordion to allow multiple panels to be open at the same time using the multiple prop.

Disable Panel

Pass disabled props to AccordionItem to disable a panel.

Usage with Motion

Base UI spreads its className (including transition styles) onto your custom component via the render prop. This causes both CSS and JS animations to run simultaneously, resulting in janky behavior.

Yes. It adheres to the WAI-ARIA design pattern.

Yes. It comes with default styles that matches the other components' aesthetic.

Yes. It's animated by default, but you can disable it if you prefer.

API Reference

ComponentDescription
AccordionGroups all parts of the accordion. Renders a <div> element.
AccordionItemGroups an accordion header with the corresponding panel. Renders a <div> element.
AccordionHeaderA heading that labels the corresponding panel. Renders an <h3> element.
AccordionTriggerA button that opens and closes the corresponding panel. Renders a <button> element.
AccordionPanelA collapsible panel with the accordion item contents. Renders a <div> element.
AccordionSummaryStyled container that wraps the AccordionHeader and AccordionTrigger.

AccordionPanel

PropTypeDefaultDescription
animation"css" | "none""css"Controls default animation of the accordion panel.

Migration Guide

Props changes

ComponentBase UI PropRadix UI Prop
Accordionmultiple (default: false)"single" or "multiple"
Accordion-collapsible
AccordionItemdefaultValue (any [])defaultValue (string)

Component Naming & Structure

Similar AccordionTrigger in shadcn, AccordionSummary explicitly wraps AccordionTrigger and AccordionHeader.

AccordionContent is renamed to AccordionPanel.

Migration Example

demo-accordion.tsx
import {
  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>
  );
}