Testimonials

Interactive testimonial wall that dims the rest and reveals the highlighted author.

Installation

npx shadcn@latest add @iconiq/testimonials

File Structure

Usage

"use client";

import { Testimonial, Testimonials } from "@/components/ui/testimonials";

export function TestimonialsPreview() {
  return (
    <Testimonials>
      <Testimonial
        avatar="/assets/av1.png"
        name="Trevor Phillips"
        title="Design Engineer @vercel"
      >
        Better than a course, it's a reference manual to making great work
        full of tactical secrets I haven't seen anywhere else.
      </Testimonial>
      <Testimonial
        avatar="/assets/av2.png"
        name="Michael De Santa"
        title="Founder @lossantos"
      >
        Notification came in. I didn't hesitate. You shouldn't either.
      </Testimonial>
      <Testimonial
        avatar="/assets/av3.png"
        name="Jose Rago"
        title="Co-founder @basementstudio"
      >
        I need to frame this at the office, wonderful work.
      </Testimonial>
    </Testimonials>
  );
}

Props

Props
Description

Testimonials

children

Composition surface. Place one Testimonial per quote — the root indexes them in order to alternate tones and track the highlight.

Type ReactNode

blur

Blur radius in px applied to the non-highlighted quotes while one is active.

Type number·Default 4

dimOpacity

Opacity the non-highlighted quotes fade to while one is active.

Type number·Default 0.2

onActiveChange

Called with the highlighted quote index, or null when the pointer leaves.

Type (index: number | null) => void

className

Extra classes for the paragraph wrapper — override the max width, text size, or leading here.

Type string

Testimonial

name

Author name revealed in the accent-colored attribution while the quote is highlighted.

Type string

title

Author role or company shown under the name.

Type ReactNode

avatar

Avatar image URL. Falls back to the author's initials when missing or broken.

Type string

emphasis

Text tone at rest. Omit to alternate automatically by position.

Type "strong" | "muted"

children

The quote text.

Type ReactNode

className

Extra classes for the quote span.

Type string

Registry bundle

Install the exact registry entry shown on the right when you want the component file and its declared runtime dependencies together.

Dependencies: none.

Built by Edwin. Inspired by the inline testimonial layout from Rauno Freiberg.

Contact

Additionally, if you find any bug or issue, feel free to raise an issue.

Better than a course, it's a reference manual to making great work full of tactical secrets I haven't seen anywhere else.Amelie LaurentDesign Engineer @vercel Notification came in. I didn't hesitate. You shouldn't either.Trevor PhillipsFounder @northwind He is undoubtedly one of the best in the world at what he does. Strongly recommend his course.Michael De SantaStaff Engineer @linear This lowkey changed how I think about building software.Franklin ClintonProduct Designer @raycast I need to frame this at the office, wonderful work.Jose RagoCo-founder @basementstudio I started reading the intro and found myself opening the inspector like crazy.Lena FischerFrontend Lead @arc If even 1/10 of this craft rubs off on work I do, it's worth it.Marco ReyesIndie Hacker One of my favorite digital purchases in recent history.Priya NairDesign Systems @stripe Probably the most gorgeous & inspiring thing online in a long time.Tom AndersonCreative Director @studio I've learned a lot from him over the years, now you can too.Sara KimEngineer @figma It's kind of like reading a beautifully designed interactive Medium article.Diego AlvarezFounding Designer @polar It's not often the best-of-the-best bring you along and show you how it's done.Nina PetrovaUX Lead @supabase The bar he sets is ridiculous. Every company I know wants to work with him.Owen BlakeCEO @meridian