51:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 52:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 53:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 54:T2ee8,"use client"; import { cn } from "@/lib/utils"; import { AnimatePresence, type Easing, type MotionStyle, motion, useReducedMotion, } from "motion/react"; import Image from "next/image"; import type { ReactNode } from "react"; import { useCallback, useState } from "react"; export interface Testimonial { author: { name: string; role: string; /** Avatar image URL, or any ReactNode to render a custom avatar (skips next/image). */ avatar: ReactNode | string; }; id: string; text: string; } export interface InlineTestimonialsClassNames { /** Merged onto the avatar wrapper. */ avatar?: string; /** Merged onto each testimonial ``. */ item?: string; /** Merged onto the hover label container. */ label?: string; /** Merged onto the author name label. */ name?: string; /** Merged onto the author role label. */ role?: string; /** Merged onto the root element. */ root?: string; } export interface InlineTestimonialsAlternateConfig { /** Opacity applied to every other (odd-indexed) item. @default 0.7 */ opacity?: number; /** Toggles the alternating opacity pattern across items. @default true */ pattern?: boolean; } export interface InlineTestimonialsLabelConfig { /** CSS color for the author name text. @default "#f97316" */ accentColor?: string; /** Easing for the reveal/exit animation. @default "easeOut" */ ease?: Easing; /** Font size of the author name, in pixels. @default 12 */ nameFontSize?: number; /** Horizontal offset from the avatar's left edge, in pixels. @default avatarSize / 2 */ offsetX?: number; /** Vertical offset above the avatar. @default "150%" */ offsetY?: string; /** CSS color for the author role text. @default "var(--muted-foreground, #6b7280)" */ roleColor?: string; /** Font size of the author role, in pixels. @default 9 */ roleFontSize?: number; /** Letter spacing of the author role text. @default "0.1em" */ roleLetterSpacing?: string; /** Uppercase the author role text. @default true */ roleUppercase?: boolean; /** Horizontal slide distance (px) for the reveal/exit animation. @default -6 */ slideX?: number; /** Duration of the reveal/exit animation, in seconds. @default 0.16 */ transitionDuration?: number; } export interface InlineTestimonialsProps { /** Alternating opacity pattern applied across items. */ alternate?: InlineTestimonialsAlternateConfig; /** Avatar diameter in pixels. @default 32 */ avatarSize?: number; /** Blur amount applied to non-hovered items in px. @default 5 */ blurAmount?: number; /** Opacity of non-hovered items (0–1). @default 0.25 */ blurOpacity?: number; className?: string; /** Class names for individual parts of the component. */ classNames?: InlineTestimonialsClassNames; /** Uncontrolled initial hovered/active testimonial id. */ defaultHoveredId?: string | null; /** Font size in pixels. @default 30 */ fontSize?: number; /** Controlled hovered/active testimonial id. */ hoveredId?: string | null; /** Which interactions reveal the author label. @default "hover" */ interaction?: "both" | "focus" | "hover"; /** Styling and motion for the hover-revealed author label. */ label?: InlineTestimonialsLabelConfig; /** Called whenever the hovered/active testimonial id changes (controlled or uncontrolled). */ onHoveredIdChange?: (id: string | null) => void; /** Overrides avatar rendering entirely; receives the testimonial and resolved size. */ renderAvatar?: (testimonial: Testimonial, size: number) => ReactNode; testimonials: Testimonial[]; } interface ResolvedLabelConfig extends Required {} function resolveLabelConfig( avatarSize: number, label?: InlineTestimonialsLabelConfig ): ResolvedLabelConfig { return { accentColor: label?.accentColor ?? "#f97316", ease: label?.ease ?? "easeOut", nameFontSize: label?.nameFontSize ?? 12, offsetX: label?.offsetX ?? avatarSize / 2, offsetY: label?.offsetY ?? "150%", roleColor: label?.roleColor ?? "var(--muted-foreground, #6b7280)", roleFontSize: label?.roleFontSize ?? 9, roleLetterSpacing: label?.roleLetterSpacing ?? "0.1em", roleUppercase: label?.roleUppercase ?? true, slideX: label?.slideX ?? -6, transitionDuration: label?.transitionDuration ?? 0.16, }; } interface TestimonialAvatarProps { avatarSize: number; renderAvatar?: (testimonial: Testimonial, size: number) => ReactNode; testimonial: Testimonial; } function TestimonialAvatar({ testimonial, avatarSize, renderAvatar, }: TestimonialAvatarProps) { if (renderAvatar) { return renderAvatar(testimonial, avatarSize); } if (typeof testimonial.author.avatar !== "string") { return testimonial.author.avatar; } return (

); } interface TestimonialLabelProps { classNames?: InlineTestimonialsClassNames; label: ResolvedLabelConfig; prefersReducedMotion: boolean; testimonial: Testimonial; } function TestimonialLabel({ testimonial, classNames, label, prefersReducedMotion, }: TestimonialLabelProps) { const labelStyle: MotionStyle = { position: "absolute", left: label.offsetX, bottom: label.offsetY, transform: "translateY(-50%)", display: "inline-flex", flexDirection: "column", gap: 3, whiteSpace: "nowrap", pointerEvents: "none", zIndex: 20, }; const slideX = prefersReducedMotion ? 0 : label.slideX; const duration = prefersReducedMotion ? 0 : label.transitionDuration; return ( {testimonial.author.name} {testimonial.author.role} ); } interface TestimonialItemProps { allowFocus: boolean; allowHover: boolean; alternate: Required; avatarSize: number; blurAmount: number; blurOpacity: number; classNames?: InlineTestimonialsClassNames; index: number; isAnyHovered: boolean; isHovered: boolean; label: ResolvedLabelConfig; prefersReducedMotion: boolean; renderAvatar?: (testimonial: Testimonial, size: number) => ReactNode; setHoveredId: (id: string | null) => void; testimonial: Testimonial; } function TestimonialItem({ testimonial, index, isHovered, isAnyHovered, allowHover, allowFocus, alternate, blurAmount, blurOpacity, prefersReducedMotion, setHoveredId, classNames, avatarSize, renderAvatar, label, }: TestimonialItemProps) { const isDimmed = isAnyHovered && !isHovered; const isAlternate = alternate.pattern && index % 2 !== 0; const baseOpacity = isAlternate ? alternate.opacity : 1; let itemOpacity = baseOpacity; if (isDimmed) { itemOpacity = blurOpacity; } else if (isHovered) { itemOpacity = 1; } return ( // biome-ignore lint/a11y/noStaticElementInteractions: hover/focus reveal is decorative and progressively enhanced (interaction defaults to "hover"; tabIndex/onFocus only attach when interaction includes "focus") // biome-ignore lint/a11y/noNoninteractiveElementInteractions: same as above setHoveredId(null) : undefined} onFocus={allowFocus ? () => setHoveredId(testimonial.id) : undefined} onMouseEnter={allowHover ? () => setHoveredId(testimonial.id) : undefined} onMouseLeave={allowHover ? () => setHoveredId(null) : undefined} style={{ filter: isDimmed && !prefersReducedMotion ? `blur(${blurAmount}px)` : "none", opacity: itemOpacity, transition: prefersReducedMotion ? "opacity 0.3s ease" : "filter 0.3s ease, opacity 0.3s ease", cursor: "default", // Bleeds the hoverable area into the inter-line gap so moving the // cursor between wrapped lines doesn't pass through a dead zone // that belongs to no item and drops the hover state. paddingBlock: 4, }} tabIndex={allowFocus ? 0 : undefined} > {isHovered && ( )} {testimonial.text}{" "} — {testimonial.author.name}, {testimonial.author.role} {" "} ); } export function InlineTestimonials({ testimonials, blurAmount = 5, blurOpacity = 0.25, avatarSize = 32, fontSize = 30, alternate, interaction = "hover", hoveredId: controlledHoveredId, defaultHoveredId = null, onHoveredIdChange, renderAvatar, label, className, classNames, }: InlineTestimonialsProps) { const [internalHoveredId, setInternalHoveredId] = useState( defaultHoveredId ); const prefersReducedMotion = useReducedMotion(); const isControlled = controlledHoveredId !== undefined; const hoveredId = isControlled ? controlledHoveredId : internalHoveredId; const setHoveredId = useCallback( (id: string | null) => { if (!isControlled) { setInternalHoveredId(id); } onHoveredIdChange?.(id); }, [isControlled, onHoveredIdChange] ); const allowHover = interaction === "hover" || interaction === "both"; const allowFocus = interaction === "focus" || interaction === "both"; const resolvedAlternate = { pattern: alternate?.pattern ?? true, opacity: alternate?.opacity ?? 0.7, }; const resolvedLabel = resolveLabelConfig(avatarSize, label); return (

{testimonials.map((t, index) => ( ))}

); } 4d:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","motion",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L51",null,{"registryDependencies":["utils"]}]]}],["$","$L52",null,{"sourceUrl":"https://ui.soralabs.io.vn/r/inline-testimonials.json","proxyUrl":"https://shadcnregistry.com/r/soralabs/inline-testimonials","itemId":"@soralabs/inline-testimonials"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L53",null,{"files":[{"path":"registry/primitives/disclosure/inline-testimonials/index.tsx","content":"$54","type":"registry:ui","target":"components/sora-ui/disclosure/inline-testimonials.tsx"}]}]]}],"$L55"]}]

Inline Testimonials

Installation

Files

components

Styles