ns-ui

Testimonial Wall Reflow

A masonry testimonial wall that physically reflows as you read: expanding one card's quote via 'read more' re-packs every other card into its new shortest-column slot, animated with a FLIP transform so only the cards that actually move ever animate.

Use when a testimonial/quote wall where expanding a card visibly reflows the rest of the layout around it; pick a static quote grid instead if every quote is a fixed, equal height and nothing ever needs to reveal more text.

Install

npx shadcn add https://design.helpmarq.com/r/testimonial-wall-reflow.json
  • testimonial
  • wall
  • masonry
  • layout
  • flip
  • reflow

ns-ui / testimonial-wall-reflow

We moved our whole onboarding flow over in a week. The thing that actually convinced the team was how little custom CSS we had to…
Priya NairVP Engineering, Fathom
Shipped a working demo before lunch. That never happens.
Marcus OhlFounder, Driftwood
Every component reads its own theme tokens, so our dark mode just worked the day we flipped the switch. No follow-up ticket, which…
Elena VossDesign Lead, Northbound
The accessibility audit we were dreading came back clean. Focus states, live regions, reduced motion — all handled before we asked.
Tomasz KrolStaff Engineer, Ledgerly
Fast, honest docs, and the demos actually match the shipped behavior.
Aiyana RedcloudProduct, Kestrel
Our team ships marketing pages faster now than we ship internal tools, which is a strange sentence to say out loud but here we are.
Jonah PetrovCTO, Millrace

Props

PropTypeDefaultDescription
items?Testimonial[]DEFAULT_ITEMS
className?string