Testimonial Pills React component
Avatar-and-pill testimonial marquee rows with dual-direction scrolling, a depth effect, cursor spotlight glow, and scroll-in reveal.
About the Testimonial Pills component
Testimonial Pills is a free wall of short testimonials shown as pills with an avatar, in rows that scroll continuously in alternating directions. A depth effect shrinks and blurs rows away from the centre, a soft spotlight follows the cursor, and the rows reveal as they scroll into view.
Row count, speeds, gaps, pill and avatar sizes, colors (a cycling palette or one solid color) and every effect are props, and rows pause on hover.
When to use it
Use it for many one-line reactions ("Saved me hours", "Beautiful UI") rather than full testimonials: launch pages, community sites and product hunts.
For longer quotes with names and roles, use Testimonial Wall or Social Post Testimonial Wall.
Installation
Add the Testimonial Pills component to your project with the shadcn CLI. It lands in components/testimonial-pills.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/testimonial-pillsOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<TestimonialPills /> accepts 35 props, all optional. It also accepts the usual <div> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| items | { text: string; avatar?: string }[] | DEFAULT_ITEMS |
| rowCount | number | 5 |
| rowGap | number | 18 |
| itemGap | number | 22 |
| direction | "left" | "right" | "left" |
| alternateDirection | boolean | true |
| speed | number | 40 |
| speedVariation | number | 0.35 |
| pauseOnHover | boolean | true |
| scrollReveal | boolean | true |
| depthEffect | boolean | true |
| depthIntensity | number | 0.6 |
- items{ text: string; avatar?: string }[]Default: DEFAULT_ITEMS
- rowCountnumberDefault: 5
- rowGapnumberDefault: 18
- itemGapnumberDefault: 22
- direction"left" | "right"Default: "left"
- alternateDirectionbooleanDefault: true
- speednumberDefault: 40
- speedVariationnumberDefault: 0.35
- pauseOnHoverbooleanDefault: true
- scrollRevealbooleanDefault: true
- depthEffectbooleanDefault: true
- depthIntensitynumberDefault: 0.6
Show all 35 propsShow fewer
| depthBlur Blur the rows farther from the centre. Only applies while depthEffect is on. | boolean | true |
| hoverEnabled | boolean | true |
| hoverScale | number | 1.08 |
| colorMode "palette" cycles through `palette`; "solid" uses a single pillBg/pillTextColor for every pill. | "palette" | "solid" | "palette" |
| palette | { bg: string; text: string }[] | DEFAULT_PALETTE |
| pillBg | string | "#EDE7FC" |
| pillTextColor | string | "#3F2E78" |
| avatarBg | string | "#DCD3F7" |
| pillHeight | number | 60 |
| pillRadius | number | 999 |
| pillPaddingX | number | 22 |
| fontSize | number | 17 |
| fontWeight | number | 600 |
| shadow | boolean | true |
| avatarSize | number | 68 |
| avatarOverlap | number | 30 |
| ringWidth | number | 3 |
| ringColor | string | "#FFFFFF" |
| edgeFade | boolean | true |
| fadeWidth | number | 60 |
| spotlight | boolean | true |
| spotlightColor | string | "rgba(255,255,255,0.45)" |
| spotlightSize | number | 420 |
- depthBlur
Blur the rows farther from the centre. Only applies while depthEffect is on.
booleanDefault: true - hoverEnabledbooleanDefault: true
- hoverScalenumberDefault: 1.08
- colorMode
"palette" cycles through `palette`; "solid" uses a single pillBg/pillTextColor for every pill.
"palette" | "solid"Default: "palette" - palette{ bg: string; text: string }[]Default: DEFAULT_PALETTE
- pillBgstringDefault: "#EDE7FC"
- pillTextColorstringDefault: "#3F2E78"
- avatarBgstringDefault: "#DCD3F7"
- pillHeightnumberDefault: 60
- pillRadiusnumberDefault: 999
- pillPaddingXnumberDefault: 22
- fontSizenumberDefault: 17
- fontWeightnumberDefault: 600
- shadowbooleanDefault: true
- avatarSizenumberDefault: 68
- avatarOverlapnumberDefault: 30
- ringWidthnumberDefault: 3
- ringColorstringDefault: "#FFFFFF"
- edgeFadebooleanDefault: true
- fadeWidthnumberDefault: 60
- spotlightbooleanDefault: true
- spotlightColorstringDefault: "rgba(255,255,255,0.45)"
- spotlightSizenumberDefault: 420
Collections
Use-case pages that compare Testimonial Pills with the other components that do a similar job.
- React Testimonial ComponentsReact testimonial components and sections: sliders, walls, marquees, video testimonials and bento layouts, with schema.org review markup. Tailwind + Motion.
- React Marquee ComponentsInfinite scrolling React marquees: text tickers, logo clouds, review walls, image card rows and marquee hero sections. Seamless loop, pause on hover, Tailwind.
npm dependencies
Installed for you by the shadcn CLI.
Testimonial Pills FAQ
- What goes in each pill?
- An item is { text, avatar? }: a short phrase and an optional avatar image.
- Can all pills be one color?
- Yes, set colorMode="solid" and pillBg and pillTextColor; "palette" cycles through the colors in palette.
- Can I turn off the effects?
- Yes: depthEffect, depthBlur, spotlight, scrollReveal and edgeFade can each be switched off.
- Does it add Review structured data?
- No, the pills are short reactions without a rating or author, so no Review markup is emitted.
