Accordion

Reveal related sections without leaving the page.

Usage guidance

Give each item a stable value; test controlled expandedValue and onValueChange together.

Version and preflight

This source was verified with React 18.3.1, Motion 11.12.0 and Tailwind CSS 4. Inspect the target React version, stylesheet entry and existing dependencies first. Do not downgrade React automatically or mix different Motion APIs. React 19 projects require separate compatibility validation.

Isolated preview support does not justify overwriting an existing global stylesheet. Merge only required theme tokens and utilities, preserving application styles.

Install component

JGUANG_ORIGIN is a placeholder for a verified JGuang origin serving this resource. Use the JGuang origin currently serving this resource; check its status and version before installation. Review file changes before installation; do not use --overwrite.

npx shadcn@latest add https://jiguang132.com/r/motion-primitives/accordion.json

Direct dependencies: clsx@2.1.1, motion@11.12.0, tailwind-merge@2.6.0. React and ReactDOM are supplied by the host project.

Runnable examples

These identifiers map one-to-one to previews and example bundles. Each example includes its state and required support files. Start with a complete example, then adjust its public parameters.

Basic

npx shadcn@latest add https://jiguang132.com/r/motion-primitives/accordion--accordion-basic.json

import { AccordionBasic } from "@/components/motion-primitives/app/docs/accordion/accordion-basic";

export function Example() { return <AccordionBasic />; }

With icons

npx shadcn@latest add https://jiguang132.com/r/motion-primitives/accordion--accordion-icons.json

import { AccordionIcons } from "@/components/motion-primitives/app/docs/accordion/accordion-icons";

export function Example() { return <AccordionIcons />; }

Custom variants

npx shadcn@latest add https://jiguang132.com/r/motion-primitives/accordion--accordion-variant.json

import { AccordionVariant } from "@/components/motion-primitives/app/docs/accordion/accordion-variant";

export function Example() { return <AccordionVariant />; }

Interaction and accessibility checks

Test focusable controls, Enter/Space, dismissal and focus return. Check overflow and contrast on mobile and both themes. Respect prefers-reduced-motion and provide pause or static alternatives for continuous animation. The platform preview pause control belongs to the preview host; component installation does not add it automatically.

Provenance and local changes

https://github.com/ibelick/motion-primitives/tree/120f64f6ca60348e251f929e9c81f11ccbe45eda

Retain the MIT license; packages containing the scroll-lock helper also include Adobe Apache-2.0 notices. Local adaptations restore dialog focus and replace demo artwork with authored geometric assets. See the bundled LOCAL_CHANGES.md. This is JGuang practical guidance, not a verbatim translation of upstream MDX.