Flowbite Svelte Components

Default rating

<Rating>
  <RatingStar />
  <RatingStar />
  <RatingStar />
  <RatingStar />
  <RatingStar filled={false} />
</Rating>

Rating with text

4.95 out of 5

<Rating>
  <RatingStar />
  <RatingStar />
  <RatingStar />
  <RatingStar />
  <RatingStar filled={false} />
  <p class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400">4.95 out of 5</p>
</Rating>

Rating count

4.95

73 reviews

<Rating>
  <RatingStar />
  <p class="ml-2 text-sm font-bold text-gray-900 dark:text-white">4.95</p>
  <span class="mx-1.5 h-1 w-1 rounded-full bg-gray-500 dark:bg-gray-400" />
  <a href="#" class="text-sm font-medium text-gray-900 underline hover:no-underline dark:text-white">
    73 reviews
  </a>
</Rating>

Star sizing

<Rating>
  <RatingStar />
  <RatingStar />
  <RatingStar />
  <RatingStar />
  <RatingStar filled={false} />
</Rating>
<Rating size="md">
  <RatingStar />
  <RatingStar />
  <RatingStar />
  <RatingStar />
  <RatingStar filled={false} />
</Rating>
<Rating size="lg">
  <RatingStar />
  <RatingStar />
  <RatingStar />
  <RatingStar />
  <RatingStar filled={false} />
</Rating>

Advanced rating

4.95 out of 5

1,745 global ratings

5 star

70%

4 star

17%

3 star

8%

2 star

4%

1 star

1%

<Rating>
  <RatingStar />
  <RatingStar />
  <RatingStar />
  <RatingStar />
  <RatingStar filled={false} />
  <p class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400">4.95 out of 5</p>
</Rating>
<p class="text-sm font-medium text-gray-500 dark:text-gray-400">1,745 global ratings</p>
<RatingAdvanced percentFilled={70}>5 star</RatingAdvanced>
<RatingAdvanced percentFilled={17}>4 star</RatingAdvanced>
<RatingAdvanced percentFilled={8}>3 star</RatingAdvanced>
<RatingAdvanced percentFilled={4}>2 star</RatingAdvanced>
<RatingAdvanced percentFilled={1}>1 star</RatingAdvanced>