Update v4.2 - New components, 10+ framework guides, and quality improvements. Visit Changelog

........ Github
Figma X (Twitter)

Tailwind CSS Ratings

Tailwind CSS Ratings component displays scores or evaluations using stars, emojis, or custom symbols. Perfect for reviews, testimonials, and feedback forms.

Heads up!

Please note, this component primarily demonstrates the User Interface (UI) flow and does not include functional JavaScript features.

Basic usage

Use form inputs to build an accessible star rating control.

Star buttons

Use star-shaped buttons for a more app-like rating interaction.

Heart buttons

Swap the default stars for hearts or another symbol that fits the tone of the experience.

Static rating

Display a read-only score when users should see a rating without changing it.

Emoji rating

Use emoji reactions when you want a more expressive sentiment scale.

Thumb feedback

Use thumbs up and down when a simple yes-or-no style response is enough.

© 2026 Preline Labs.