A testimonial badge with an avatar stack, star rating, and social proof text for hero sections.
Installation
Adds the component and everything it depends on to your project.
npx shadcn add https://ui.beste.co/component/r-base/badge14New here? Read the installation guide.
Usage
The import and the props worth knowing about, in one place.
import { Badge14 } from "@/components/beste/component/badge14";
<Badge14
avatars={[
"/avatars/mia.jpg",
"/avatars/deniz.jpg",
"/avatars/omar.jpg",
]}
text="Loved by 2,400+ founders"
rating={5} // stars, 0–5 (default 5)
tone="amber" // "amber" (default) | "primary" | "foreground"
/>Playground
Turn the props on the right; the snippet under them is what you would write to get what you see.
Usage
import { Badge14 } from "@/components/beste/component/badge14";
<Badge14
avatars={["https://i.pravatar.cc/64?img=12","https://i.pravatar.cc/64?img=32","https://i.pravatar.cc/64?img=45","https://i.pravatar.cc/64?img=8"]}
text="Loved by 2,400+ founders"
/>Props
Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
avatars* | string[] | — | Avatar image URLs, rendered as an overlapping stack |
text* | string | — | The social-proof line (e.g. "Loved by 2,400+ founders") |
rating | number | — | Star count, 0–5 |
tone | "amber" | "primary" | "foreground" | — | Star color |
className | string | — | Additional classes merged onto the root |