Inline Testimonials

March 25, 2026

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

Pro components require registry authentication. Add your Unlumen UI Pro key as UNLUMEN_LICENSE_KEY in your .env.local file and follow the setup guide.

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

Prop	Type	Default	Description
`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

Prop	Type	Default	Description
`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.