Star Ratings – 8 Free CSS, Bootstrap & Tailwind Sets
Star Ratings is a pack of eight sets of star rating components, designed and maintained in-house by uiCookies. Every set comes in three versions that look the same: plain HTML and CSS, Bootstrap 5 using .btn-check, .btn, .card, .list-group, .progress and .form-control where they fit, and Tailwind CSS 4. The sets cover read-only displays with fractional and half stars, star rating inputs built on radio buttons, hearts, thumbs, faces and a 0 to 10 NPS scale, rating summaries with distribution bars, review forms with validation, compact ratings for cards and lists, a dark set, and a modern CSS set built on :has(), @property and container queries. Only the review forms use JavaScript, about thirty lines for validation.
A good star rating is a number first and a picture second. A read-only rating writes its score as text, such as Rated 4.3 out of 5, and hides the stars from screen readers so nobody hears five images. A rating input is a real radio group in a fieldset with a legend, where each option has a name like 3 stars, so it works with Tab and the arrow keys and posts a value with the form. Keep the radios in their natural 1 to 5 order: the popular reversed-order CSS trick makes the arrow keys run backwards. Show the focused star with an outline and mark the chosen value with more than colour, such as a bar under the star or the value written out, and give people a way to clear a rating they did not mean to set.
