Components

Accordion

A stack of disclosure rows whose panels ease open to their natural height and back to zero, the chevron rotating with the state.

Three shared springs keep every panel, hover, and reveal moving as one body.

Install

Copies the component source — plus its small internal deps — into your project. You own the code from the first minute.

terminal

npx lumora-ui@latest add accordion

Import

Using the workspace package instead? Deep imports keep cold starts lean; the barrel is fully tree-shakable either way.

app/page.tsx

import { Accordion, AccordionItem } from "@lumora/ui/components/accordion";
// or from the barrel:
import { Accordion, AccordionItem } from "@lumora/ui";

Props worth knowing

type switches between a single open panel and several at once; defaultValue picks the row(s) open on mount. Compose rows with AccordionItem, each carrying a unique value and a title node. Props extend the natural HTML element, so className, event handlers, and aria attributes pass straight through.