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 AxylInstallation
File Structure
Usage
Examples
Bordered Container
Separated Cards
Multiple Items
Props
Accordion
| 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 | - |
Built by Axyl. A motion-first component registry for React.
Last updated: 8/23/2026