A star rating badge with a numeric value and review text for social proof sections.
Adds the component and everything it depends on to your project.
npx shadcn add https://ui.beste.co/component/r-base/badge12New here? Read the installation guide.
The import and the props worth knowing about, in one place.
import { Badge12 } from "@/components/beste/component/badge12";
<Badge12 value={4.9} text="from 200+ reviews" />
<Badge12
value={5}
tone="primary" // "amber" (default) | "primary" | "foreground"
showValue={false} // stars only
text="Rated 5 stars on G2"
/>Turn the props on the right; the snippet under them is what you would write to get what you see.
import { Badge12 } from "@/components/beste/component/badge12";
<Badge12
text="from 200+ reviews"
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | — | Rating value, 0–5 |
text | string | — | Muted context after the stars (e.g. "from 200+ reviews") |
showValue | boolean | — | Show the numeric value next to the stars |
tone | "amber" | "primary" | "foreground" | — | Star color |
className | string | — | Additional classes merged onto the root |
A testimonial badge with an avatar stack, star rating, and social proof text for hero sections.
A decorative barcode badge with a monospace caption for editorial and print inspired sections.
A profile badge with avatar, name, and role for author and team credits.