Sora UI has moved to ui.soralabs.studio.Learn more
Sora UI

Accordion

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

Made by Axyl

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

Loading...

Installation

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 1:1 Motion spring physics, mask gradient height collapse,
          blur transitions, and gliding focus rings.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}

Examples

Bordered Container

Accordion in a bordered container with refined surface styling.

Loading...

Separated Cards

Accordion with individual card-style separated items.

Loading...

Multiple Items

Accordion allowing multiple panels to expand simultaneously.

Loading...

Props

Accordion

PropTypeDefault
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

PropTypeDefault
value?
string | number
-
disabled?
boolean
false
className?
string
-

AccordionTrigger

PropTypeDefault
hideChevron?
boolean
false
chevron?
ReactNode
-
chevronClassName?
string
-
showFocusRing?
boolean
-
focusRingClassName?
string
-

AccordionContent

PropTypeDefault
innerClassName?
string
-
className?
string
-

Built by Axyl. A motion-first component registry for React.

Last updated: 8/23/2026