Skip to content
Cojeev UI

Accordion

Layout

Organizes related sections into expandable panels so readers can open the details they need.

React · copy into your project · light and dark themes

Try it

Loading preview…

Take it with you

Copy the example, API and usage notes for your editor or AI assistant.

Add to your project

Terminal
npx shadcn@latest add https://luv-jeri.github.io/cojeev-ui/r/accordion.json

The command includes the component’s shared dependencies. Your project keeps editable source files.

Using accordion

  • Pair each AccordionTrigger with its AccordionContent inside an AccordionItem.

  • Choose single or multiple expansion through the root type; use controlled values when another control must open a section.

API

Compose the exported parts below. The prop types are read from the React source during the registry build.

Native element or underlying primitive props are inherited where declared, including accessible labels, event handlers and refs.

AccordionProps

Accepts the native or primitive props declared by its exported TypeScript type.

AccordionItemProps

Accepts the native or primitive props declared by its exported TypeScript type.

AccordionTriggerProps

PropTypeRequired
indicatorReact.ReactNodeNo

AccordionContentProps

Accepts the native or primitive props declared by its exported TypeScript type.

AccordionIndicatorProps

Accepts the native or primitive props declared by its exported TypeScript type.

Accessibility

  • Use meaningful trigger text and preserve the supplied trigger and content parts for keyboard navigation and expanded-state relationships.

States and appearance

openresthoverfocusactive

For conditional content, keep a MotionPresence boundary around keyed MotionSurface children. The shared entrance and exit states work with native primitives and respect your motion preference.

Try pointer and keyboard interaction, and switch the appearance control in the navigation to compare light and dark mode. Motion respects reduced motion preferences.