Inline Testimonials

Renders inline testimonials with expandable cards on hover or focus. Displays text with placeholders replaced by user data. Shows a card with avatar, name, role, quote, and rating when triggered. Use for embedded testimonials in text content.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/inline-testimonials

npx layro-cli add @educlopez/inline-testimonials

npx layro-cli add @educlopez/inline-testimonials

bunx layro-cli add @educlopez/inline-testimonials

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import { cn } from "@/lib/utils";
import { Star } from "lucide-react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import type { FocusEvent } from "react";
import { Fragment, useCallback, useEffect, useRef, useState } from "react";

const TOKEN_PATTERN = /\{\{([\w-]+)\}\}/g;
const DEFAULT_AVATAR_SIZE = 22;
const CARD_AVATAR_MULTIPLIER = 2;
const CARD_WIDTH_PX = 288;
const EDGE_PADDING_PX = 8;
const CARD_GAP_PX = 8;