Spring Accordion React Component

LIVE PREVIEWInteract with the component

Just React. No extra dependencies.

Copy the component and its CSS module into your project.

CSS Modules

Usage

Matches your current playground settings.

import SpringAccordion from "./SpringAccordion";

export default function Example() {
  return (
    <SpringAccordion
      items={[
        {
          "id": "idea",
          "title": "Start with a feeling.",
          "content": "Collect a colour, a texture, a fragment of type. Give the idea somewhere to begin."
        },
        {
          "id": "shape",
          "title": "Find its shape.",
          "content": "Make a few studies. Keep the parts that feel right and leave room for something unexpected."
        },
        {
          "id": "move",
          "title": "Let it move.",
          "content": "A little motion gives an interface rhythm. Make every transition earn its place."
        }
      ]}
      defaultValue={"idea"}
      accentColor={"#c6b1db"}
      background={"#1a161e"}
      numbered={true}
    />
  );
}

Using Spring Accordion

Supply labelled sections through items and use value with onValueChange when a parent controls the open panel.

Use defaultValue for an initial local selection. numbered adds an ordered visual marker when the sections form a sequence.

Props

Name	Type	Required	Default	Description
items	object[]	No	[]	Array of { id, title, content, disabled? }. Titles and content accept React nodes; use unique stable ids.
value	string \| number \| null	No	undefined	Controlled open item id; null closes all panels.
defaultValue	string \| number \| null	No	null	Initially open item id when uncontrolled.
onValueChange	function	No	undefined	Called with the requested item id, or null when closing.
accentColor	string	No	"#d2b4e3"	Number, border, and control colour.
background	string	No	"#1a161e"	Closed panel background.
numbered	boolean	No	true	Display sequential two-digit item numbers.
className	string	No	""	Additional CSS classes merged with the component styles.
style	CSSProperties	No	undefined	Inline styles for sizing, typography, and visual overrides.