Inline Testimonials

Testimonials rendered as inline flowing text with circular avatars. Hover any quote to blur the others and reveal the author's name and role.

Installation

File Structure

inline-testimonials.tsx

Usage

import {
  InlineTestimonials,
  type Testimonial,
} from "@/components/unlumen-ui/inline-testimonials";

const testimonials: Testimonial[] = [
  {
    id: "1",
    text: "Undoubtedly one of the best resources in the world.",
    author: {
      name: "Benji Taylor",
      role: "Head of Design @Base",
      avatar: "https://example.com/avatar.jpg",
    },
  },
];

<InlineTestimonials testimonials={testimonials} accentColor="#f97316" />;

API Reference

InlineTestimonials

testimonials

Testimonial[]

—

Array of testimonial objects to render inline.

blurAmount?

number

5

Blur filter strength (px) applied to non-hovered items.

blurOpacity?

number

0.25

Opacity of non-hovered items (0–1).

accentColor?

string

"#f97316"

CSS color used for the author name label on hover.

avatarSize?

number

32

Diameter of the circular avatar image in pixels.

fontSize?

number

30

Font size of the testimonial text in pixels.

className?

string

—

Extra classes on the container element.

Testimonial

id

string

—

Unique identifier for the testimonial.

text

string

—

The testimonial quote text.

author.name

string

—

Author's full name, shown on hover.

author.role

string

—

Author's role and company, shown on hover.

author.avatar

string

—

URL of the author's circular avatar image.

Credits

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

Keep in mind

Most components on this site are inspired by or recreated from existing work across the web. I'm not here to take credit; just to learn, experiment, and sometimes push things a bit further. If something looks familiar and I forgot to mention you, reach out and I'll fix that right away.