Expanding Panels 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 ExpandingPanels from "./ExpandingPanels";

export default function Example() {
  return (
    <ExpandingPanels
      items={[
        {
          "id": "dune",
          "title": "Dune",
          "description": "Contours of a quieter landscape.",
          "background": "linear-gradient(155deg, #b48c68 15%, #e0bc96 40%, #85563f 41%, #ae7d53 65%, #473026 66%)"
        },
        {
          "id": "tide",
          "title": "Tide",
          "description": "Follow a different current.",
          "background": "repeating-radial-gradient(ellipse at 20% 100%, #193b49 0%, #62898c 9%, #214957 12%, #183642 20%)"
        },
        {
          "id": "bloom",
          "title": "Bloom",
          "description": "An unexpected point of view.",
          "background": "radial-gradient(ellipse at 70% 20%, #e49aaf, transparent 50%), radial-gradient(ellipse at 0% 80%, #a94462, transparent 60%), #43233c"
        }
      ]}
      height={380}
      gap={10}
      borderRadius={18}
      expandRatio={5}
    />
  );
}

Using Expanding Panels

Use items for a concise set of visual destinations. Keep captions brief enough to remain useful in both narrow and expanded panels.

Pair activeIndex with onActiveChange for external selection, and use onSelect for the action taken on a panel. height and expandRatio control the composition.

Props

Name	Type	Required	Default	Description
items	object[]	No	[]	Array of { id, title, description?, image?, background? }. Images are optional; backgrounds accept CSS values. Empty arrays render nothing.
activeIndex	number	No	undefined	Optional controlled selected index.
defaultActiveIndex	number	No	0	Initial selected index when uncontrolled.
onActiveChange	function	No	undefined	Called with the next index on pointer or keyboard selection.
onSelect	function	No	undefined	Called with (item, index) when a panel is clicked or activated with Enter/Space.
height	number \| string	No	380	Panel row height, in pixels or a CSS length.
gap	number	No	10	Space between panels in pixels.
borderRadius	number	No	18	Panel corner radius in pixels.
expandRatio	number	No	5	Flex growth of the active panel relative to its neighbours.
className	string	No	""	Additional CSS classes, merged with the component styles.
style	CSSProperties	No	undefined	Inline styles for caller-defined sizing and visual overrides.
label	string	No	"Expandable panels"	Accessible group label.