Fieldbook
Sign in

Data display

Spring Push Collapsible

A settings row that opens a detail panel and pushes the rows below it down on one shared spring instead of a height jump.

Using Spring Push Collapsible

A settings row that opens a detail panel and pushes the rows below it down on one shared spring instead of a height jump.

Try the live preview with a pointer and keyboard, then check focus visibility and the narrow layout in your own page. Use the plate number or slug when asking your coding agent to fetch this component.

Props: accent, defaultOpen, stiffness, damping, keepMounted

Which frameworks are available?

The catalog lists these versions: react, vue, svelte, astro, html. The live preview on this page runs React.

How do I access the implementation?

The code, framework versions and installation commands are available in the workbench above.

Connect your agent

Nearby

Settings Group Accordion
2034Settings Group AccordionData displayA vertical group of labeled sections that can each expand independently, so more than one stays open at once unlike a typical single-open accordion.
Starred repos disclosure
2244Starred repos disclosureData displayA header row with a toggle button that reveals a short hidden list of starred repositories beneath one row that always stays visible.
Animated metric counter
2299Animated metric counterData displayA large bare numeral that springs up from a starting value to its target the moment it scrolls into view, overshooting slightly before it settles, with thousands separators and an optional suffix.
Chevron accordion list
1935Chevron accordion listData displayA vertical stack of question rows that each expand to reveal an answer, with a chevron that flips upside down when its row is open.
Counting readout
2134Counting readoutData displayA metric figure that counts from a start value up to its target on a spring the first time it is seen, with fixed decimals and optional zero padding.
Detail list item
2140Detail list itemData displayA list row combining a leading icon or avatar, a title and description, and a trailing action, for notification lists, menus, or settings rows.