Hybrid Astro UI

ReviewStars

Open in ChatGPT

A detailed rating breakdown component that displays star tiers with percentage-based distribution, customizable color variants, and accessible semantics—ideal for product reviews, feedback summaries, and analytics dashboards.

  • 5 out of 5 stars
    87%
  • 4 out of 5 stars
    27%
  • 3 out of 5 stars
    17%
  • 2 out of 5 stars
    37%
  • 1 out of 5 stars
    21%

Install

pnpm dlx hybrid-astro-ui@latest add review-stars
npx hybrid-astro-ui@latest add review-stars
yarn dlx hybrid-astro-ui@latest add review-stars
bunx hybrid-astro-ui@latest add review-stars

Usage

---
import { ReviewStars} from "@/src/components/hybrid-astro-ui/review-stars"
---
<ReviewStars items={[
    { stars: 5, percent: 87 },
    { stars: 4, percent: 27 },
    { stars: 3, percent: 17 },
    { stars: 2, percent: 37 },
    { stars: 1, percent: 21 },
]} />

Variants

  • 5 out of 5 stars
    87%
  • 4 out of 5 stars
    27%
  • 3 out of 5 stars
    17%
  • 2 out of 5 stars
    37%
  • 1 out of 5 stars
    21%
  • 5 out of 5 stars
    87%
  • 4 out of 5 stars
    27%
  • 3 out of 5 stars
    17%
  • 2 out of 5 stars
    37%
  • 1 out of 5 stars
    21%
  • 5 out of 5 stars
    87%
  • 4 out of 5 stars
    27%
  • 3 out of 5 stars
    17%
  • 2 out of 5 stars
    37%
  • 1 out of 5 stars
    21%
  • 5 out of 5 stars
    87%
  • 4 out of 5 stars
    27%
  • 3 out of 5 stars
    17%
  • 2 out of 5 stars
    37%
  • 1 out of 5 stars
    21% 
---
import { ReviewStars} from "@/src/components/hybrid-astro-ui/review-stars"
---
<ReviewStars variant="violet" items={[
    { stars: 5, percent: 87 },
    { stars: 4, percent: 27 },
    { stars: 3, percent: 17 },
    { stars: 2, percent: 37 },
    { stars: 1, percent: 21 },
]} />

These are the available color variants for the ReviewStars component. Each option controls both the star color and the progress bar color, allowing the component to adapt to different visual styles, themes, and semantic meanings within your UI.