Star Rating

A read-only five-star rating using Kickresume's retained full, half, and empty star shapes.

4.5 / 5

Loading…

import { StarRating } from "@/components/ui/star-rating"

export default function StarRatingDemo() {
  return (
    <div className="flex items-center gap-2">
      <StarRating value={4.5} aria-hidden="true" />
      <span className="text-sm font-medium">4.5 / 5</span>
    </div>
  )
}

Installation

pnpm dlx shadcn@latest add @kickresume/star-rating

Usage

import { StarRating } from "@/components/ui/star-rating"

export function StarRatingExample() {
  return <StarRating value={4.5} />
}

Values

Values are clamped to the 0–5 range. The visual follows the original Kickresume rule: render every full star, then a half star when the remaining fraction is at least 0.5, and fill the row with empty stars.

4.5

1.5

Loading…

import { StarRating } from "@/components/ui/star-rating"

const ratings = [5, 4.5, 3, 1.5, 0]

export default function StarRatingValues() {
  return (
    <div className="flex flex-col gap-3">
      {ratings.map((value) => (
        <div key={value} className="flex items-center gap-3">
          <StarRating value={value} aria-hidden="true" />
          <span className="w-8 text-sm text-muted-foreground">
            {value}
            <span className="sr-only"> out of 5</span>
          </span>
        </div>
      ))}
    </div>
  )
}

Accessibility

The row exposes an accessible label such as “4.5 out of 5 stars” while its individual SVGs remain decorative. Pass aria-label or aria-labelledby for custom copy. Use aria-hidden only when adjacent text already communicates the same rating.

API Reference

Prop	Type	Default
`value`	`number`	`4.6`
`aria-label`	`string`	`"{value} out of 5 stars"`
`aria-labelledby`	`string`	-
`className`	`string`	-