Minimalist Clean Review Row

testimonials

Crisp minimalist review cards moving left to right with cursor hover pause.

#testimonials#minimalist#clean#marquee

Live Interactive Preview

"Minimalist editorial design with zero unnecessary fluff. Outstanding execution."

Grace Hopper

Chief Engineer

"Clean, elegant, and highly performing on all screen sizes."

Alan Turing

Principal Architect

"Copy-paste source code matches preview 1:1. Highly recommended UI library."

Ada Lovelace

Lead Developer

"Minimalist editorial design with zero unnecessary fluff. Outstanding execution."

Grace Hopper

Chief Engineer

"Clean, elegant, and highly performing on all screen sizes."

Alan Turing

Principal Architect

"Copy-paste source code matches preview 1:1. Highly recommended UI library."

Ada Lovelace

Lead Developer

"Minimalist editorial design with zero unnecessary fluff. Outstanding execution."

Grace Hopper

Chief Engineer

"Clean, elegant, and highly performing on all screen sizes."

Alan Turing

Principal Architect

"Copy-paste source code matches preview 1:1. Highly recommended UI library."

Ada Lovelace

Lead Developer

Component Source Code

Select language in the dropdown

MinimalistCleanTestimonialRow.tsx

1'use client';
2
3import React from 'react';
4import { Check } from 'lucide-react';
5
6const REVIEWS = [
7  { name: 'Grace Hopper', role: 'Chief Engineer', text: 'Minimalist editorial design with zero unnecessary fluff. Outstanding execution.' },
8  { name: 'Alan Turing', role: 'Principal Architect', text: 'Clean, elegant, and highly performing on all screen sizes.' },
9  { name: 'Ada Lovelace', role: 'Lead Developer', text: 'Copy-paste source code matches preview 1:1. Highly recommended UI library.' }
10];
11
12export default function MinimalistCleanTestimonialRow() {
13  return (
14    <div className="w-full overflow-hidden py-4 select-none">
15      <div className="group flex w-max gap-4 hover:[animation-play-state:paused] animate-[marquee_24s_linear_infinite]">
16        {[...REVIEWS, ...REVIEWS, ...REVIEWS].map((item, idx) => (
17          <div
18            key={idx}
19            className="w-72 sm:w-80 shrink-0 rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-5 shadow-md flex flex-col justify-between transition-colors"
20          >
21            <p className="text-xs text-slate-600 dark:text-slate-300 font-medium leading-relaxed">
22              &quot;{item.text}&quot;
23            </p>
24            <div className="mt-4 pt-3 border-t border-slate-100 dark:border-slate-800/80 flex items-center justify-between">
25              <div className="flex items-center gap-2">
26                <div className="h-6 w-6 rounded-full bg-slate-900 dark:bg-slate-100 text-white dark:text-slate-900 flex items-center justify-center font-bold text-[10px]">
27                  {item.name.charAt(0)}
28                </div>
29                <div>
30                  <h4 className="text-xs font-bold text-slate-900 dark:text-slate-100">{item.name}</h4>
31                  <p className="text-[10px] text-slate-500 dark:text-slate-400 font-medium">{item.role}</p>
32                </div>
33              </div>
34              <span className="flex h-5 w-5 items-center justify-center rounded-full bg-emerald-100 dark:bg-emerald-950/80 text-emerald-600 dark:text-emerald-400">
35                <Check className="h-3 w-3" />
36              </span>
37            </div>
38          </div>
39        ))}
40      </div>
41    </div>
42  );
43}

Installation & Integration Guide

Step 1: Tailwind CSS v4 Setup

Tailwind Docs

If you do not have Tailwind installed yet, run this installation command:

Terminal

npm install tailwindcss @tailwindcss/postcss postcss

Then add the Tailwind directive to your main stylesheet (globals.css):

@import "tailwindcss";

Step 2: Install Icon Dependencies

npm install lucide-react react-icons

Step 3: Add Component File

Create a new file in your project at src/components/testimonials/MinimalistCleanTestimonialRow.tsx and paste the copied code from the source viewer above.

Step 4: Usage Example

ExamplePage.tsx

1import MinimalistCleanReviewRow from '@/components/testimonials/MinimalistCleanTestimonialRow';
2
3export default function ExamplePage() {
4  return (
5    <main className="p-8 flex items-center justify-center min-h-screen">
6      <MinimalistCleanReviewRow />
7    </main>
8  );
9}