<Rating value={4.5} />npx bearnie add ratingbunx bearnie add ratingpnpm dlx bearnie add ratingyarn dlx bearnie add ratingimport { Rating } from "@/components/bearnie/rating"<Rating value={4.5} />Purely static — no JavaScript. Fractional values render partially filled stars, and screen readers get a “Rated 4.5 out of 5” label instead of five decorative icons.
<div class="flex items-center gap-2">
<Rating value={4.5} />
<span class="text-sm text-muted-foreground">4.5 · 1,238 reviews</span>
</div>Stars inherit their size from the [&_svg] utility and their color from text-primary — override both with classes.
<Rating value={3} class="[&_svg]:size-3" />
<Rating value={3.7} />
<Rating value={4.2} class="[&_svg]:size-6" /><Rating value={7.5} max={10} />| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | required | Rating value; fractions render partial stars |
| max | number | 5 | Number of stars |
| label | string | Rated 4.5 out of 5 |
Custom accessible label |
| class | string | - | Additional CSS classes |