Accordion

An animated accordion component built on Base UI with Motion spring physics, height collapse mask gradient, blur transitions, and gliding layoutId focus ring.

Tweak Props

variant

multiple

false

showFocusRing

true

disableAnimation

false

accordion.tsx

Loading code…

Default animated Base UI accordion with Motion spring transitions and glowing focus ring.

Installation

Install the following dependencies:

Install the following registry dependencies:

Copy and paste the following code into your project:

components/sora-ui/base/accordion.tsx

Loading code…

Update the import paths to match your project setup.

File Structure

accordion.tsx

use-controlled-state.tsx

Usage

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/sora-ui/base/accordion";

export default function Page() {
  return (
    <Accordion defaultValue={["item-1"]}>
      <AccordionItem value="item-1">
        <AccordionTrigger>Is it accessible?</AccordionTrigger>
        <AccordionContent>
          Yes. It adheres to the WAI-ARIA design pattern using Base UI primitives.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger>Is it animated?</AccordionTrigger>
        <AccordionContent>
          Yes! It features Motion spring physics, mask gradient height collapse,
          blur transitions, and gliding focus rings.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}

Examples

Bordered Container

accordion-bordered.tsx

Loading code…

Accordion in a bordered container with refined surface styling.

Separated Cards

accordion-separated.tsx

Loading code…

Accordion with individual card-style separated items.

Multiple Items

accordion-multiple.tsx

Loading code…

Accordion allowing multiple panels to expand simultaneously.

Props

Prop	Type	Default
`value?`	`string \| number \| (string \| number)[]`	-
`defaultValue?`	`string \| number \| (string \| number)[]`	`[]`
`multiple?`	`boolean`	`false`
`variant?`	`"default" \| "bordered" \| "separated" \| "ghost"`	`"default"`
`showFocusRing?`	`boolean`	`true`
`focusRingClassName?`	`string`	-
`focusRingLayoutId?`	`string`	-
`disableAnimation?`	`boolean`	`false`
`transition?`	`Transition`	`{ type: "spring", bounce: 0.2, visualDuration: 0.4 }`
`onValueChange?`	`(value: (string \| number)[]) => void`	-

AccordionItem

Prop	Type	Default
`value?`	`string \| number`	-
`disabled?`	`boolean`	`false`
`className?`	`string`	-

AccordionTrigger

Prop	Type	Default
`hideChevron?`	`boolean`	`false`
`chevron?`	`ReactNode`	-
`chevronClassName?`	`string`	-
`showFocusRing?`	`boolean`	-
`focusRingClassName?`	`string`	-

AccordionContent

Prop	Type	Default
`innerClassName?`	`string`	-
`className?`	`string`	-

Installation

Install the following dependencies:

Install the following registry dependencies:

Copy and paste the following code into your project:

components/sora-ui/base/accordion.tsx

Loading code…

Update the import paths to match your project setup.

File Structure

accordion.tsx

use-controlled-state.tsx

Usage

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/sora-ui/base/accordion";

export default function Page() {
  return (
    <Accordion defaultValue={["item-1"]}>
      <AccordionItem value="item-1">
        <AccordionTrigger>Is it accessible?</AccordionTrigger>
        <AccordionContent>
          Yes. It adheres to the WAI-ARIA design pattern using Base UI primitives.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger>Is it animated?</AccordionTrigger>
        <AccordionContent>
          Yes! It features Motion spring physics, mask gradient height collapse,
          blur transitions, and gliding focus rings.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}

Examples

Motion+ is a one-time fee, lifetime access membership that unlocks the source code for all Motion examples, early access features, premium components, and an exclusive Discord community.

accordion-bordered.tsx

Loading code…

Accordion in a bordered container with refined surface styling.

Yes. All components are fully compatible with Next.js 15+, React 19, and Server Components.

accordion-separated.tsx

Loading code…

Accordion with individual card-style separated items.

With the multiple prop enabled, multiple accordion panels can remain open simultaneously without collapsing others.

Each panel independently runs its height expand/collapse and blur transition using Motion spring physics.

accordion-multiple.tsx

Loading code…

Accordion allowing multiple panels to expand simultaneously.

Props

Prop	Type	Default
`value?`	`string \| number \| (string \| number)[]`	-
`defaultValue?`	`string \| number \| (string \| number)[]`	`[]`
`multiple?`	`boolean`	`false`
`variant?`	`"default" \| "bordered" \| "separated" \| "ghost"`	`"default"`
`showFocusRing?`	`boolean`	`true`
`focusRingClassName?`	`string`	-
`focusRingLayoutId?`	`string`	-
`disableAnimation?`	`boolean`	`false`
`transition?`	`Transition`	`{ type: "spring", bounce: 0.2, visualDuration: 0.4 }`
`onValueChange?`	`(value: (string \| number)[]) => void`	-

Prop	Type	Default
`value?`	`string \| number`	-
`disabled?`	`boolean`	`false`
`className?`	`string`	-

Prop	Type	Default
`hideChevron?`	`boolean`	`false`
`chevron?`	`ReactNode`	-
`chevronClassName?`	`string`	-
`showFocusRing?`	`boolean`	-
`focusRingClassName?`	`string`	-

Prop	Type	Default
`innerClassName?`	`string`	-
`className?`	`string`	-

Accordion · Base UI

Installation

Install the following dependencies:

Install the following registry dependencies:

Copy and paste the following code into your project:

Update the import paths to match your project setup.

File Structure

Usage

Examples

Bordered Container

Separated Cards

Multiple Items

Props

Accordion

AccordionItem

AccordionTrigger

AccordionContent

On this page

Accordion · Base UI

Installation

Install the following dependencies:

Install the following registry dependencies:

Copy and paste the following code into your project:

Update the import paths to match your project setup.

File Structure

Usage

Examples

Bordered Container

Separated Cards

Multiple Items

Props

Accordion

AccordionItem

AccordionTrigger

AccordionContent

On this page

Accordion · Base UI

Install the following dependencies:

Install the following registry dependencies:

Copy and paste the following code into your project:

Update the import paths to match your project setup.

File Structure

On this page

Accordion · Base UI

What is Sora UI?

How does the Motion animation logic work?

Can I customize the styling and variants?

Install the following dependencies:

Install the following registry dependencies:

Copy and paste the following code into your project:

Update the import paths to match your project setup.

File Structure

What is Motion+?

What does "lifetime access" mean?

How does the team package work?

Can I use this in Next.js App Router?

How does accessibility work?

Is reduced motion supported?

Multiple Items Expansion

Independent Animations

Gliding Focus Ring

On this page

What is Sora UI?

How does the Motion animation logic work?

Can I customize the styling and variants?

What is Motion+?

What does "lifetime access" mean?

How does the team package work?

Can I use this in Next.js App Router?

How does accessibility work?

Is reduced motion supported?

Multiple Items Expansion

Independent Animations

Gliding Focus Ring