Refinery

Grid Layout

A clean multi-column testimonial grid with subtle hover interactions.

Preview

Refinery is backed by the community!

Murdo Aten Alescio

Chief Technology Officer

Toogle

I just love Refinery. It gives us a refined design system with best-in-class web interactions we can browse, adopt, and ship quickly.

Danielle Porter

Lead Designer

TouYube

Refinery exceeded my expectations as a design system inspired by the web's best interactions. It helps us discover elevated patterns, align design decisions, and deliver a premium product feel.

Monica Witkowska

Frontend Engineer

Metamine

Refinery has become essential for our frontend team. We browse interaction patterns and beautifully refined components, then integrate Refinery into our product with minimal friction.

Tuor Håkansson

SDE II

Z Combinator

Refinery has been a game-changer for our team. Instead of starting from scratch. We explore top interaction patterns and refined UI examples, then implement them with confidence.

Installation

1. Run the following command in your terminal:

npx shadcn@latest add @refinery/testimonial-grid

API Reference

Component props
Name	Type	Description
title	string \| null	Section title; set to null to hide it.
items	TestimonialItem[]	Testimonials to render in the grid.
className	string	Additional CSS classes for the wrapper.
gridClassName	string	Additional CSS classes for the grid container.
cardClassName	string	Additional CSS classes for each card.
highlightClassName	string	Additional CSS classes for highlighted text.

Usage Recommendations

For the best experience, use the 'Geist' theme...

Always ensure the component is properly styled and accessible.

Design Notes

I kept this layout intentionally simple and focused on readability first. The structure is a clean multi-column grid, and each card follows the same hierarchy so names, roles, and quotes are easy to scan. To add personality without making it noisy, I highlighted a key line in each testimonial and used soft hover transitions instead of heavy effects. Most of the polishing went into spacing, text rhythm, and contrast tuning so the section feels balanced in both light and dark themes. For the cards, you can add dashed-borders instead of shadow, if you dont want feel of elevation to the cards.