Liquid Stretch

Smooth liquid motion accordion with natural spring animations.

accordionliquidmotionspring

Props

Customize the component with these props

PropertyTypeDefaultDescription
items
AccordionItem[][{id: '1', label: 'Module 1', content: '...'}, ...]Array of accordion items with id, label, and optional content.
backgroundColor
stringtransparentBackground color of the component (hex, rgb, or hsl).
containerBgColor
string#ffffffBackground color of the container (hex, rgb, or hsl).
containerShadowColor
stringrgba(0,0,0,0.1)Shadow color of the container (hex, rgb, or hsl).
itemBgColor
string#f4f4f5Background color of accordion items (hex, rgb, or hsl).
itemTextColor
string#18181bText color of item labels (hex, rgb, or hsl).
contentTextColor
string#71717aText color of item content (hex, rgb, or hsl).
iconColor
string#18181bColor of the chevron icon (hex, rgb, or hsl).
defaultActive
number | null0Index of the initially active item (null for none).
borderRadius
string1remBorder radius of the container (CSS value).
Liquid Stretch - Uilora Accordions