Testimonial Grid
Multi-column testimonial grid with tidy profile cards.
Refinery is backed by the community!
Murdo Aten Alescio
Chief Technology Officer
ToogleI 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
TouYubeRefinery 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
MetamineRefinery 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 CombinatorRefinery 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 https://refinery.abhii.me/r/testimonial-grid.jsonAPI Reference
| 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
Use when you have 4+ testimonials to fill the grid evenly.
Keep quotes concise to avoid uneven card heights.
You can also just use the testimonial card and style the grid as you like, see the example in above 'Code' section.
When installing shadcn, you can choose the 'nova' preset (lucide/geist) to match the intended typography.
Design Notes
The core idea is to render the testimonials as a responsive grid with a consistent card header, so names, roles, and avatars stay easy to scan. Each quote can include a highlighted segment with its own styling, and the cards use subtle hover contrast for a little feedback. I also added a grayscale-to-color avatar transition for gentle emphasis; you can remove that filter in the component if you want the grid to feel quieter.