---
title: Star Rating Component
hide_title: true
---
import ImportButton from '/src/components/importbutton'

# Star Rating Component

This component shows how to work with *animations*, *visual states* and *component logic* to build a visually rich star rating component. You can also follow the [Build Along](/docs/build-alongs/star-rating-component) clip if you want to see how it's constructed.

<div className="ndl-image-with-background m">

![](/library/examples/star-rating-component/star-rating.gif)

<ImportButton zip="/library/examples/star-rating-component/star-rating-1-1.zip" name="Star Rating Component" thumb="/library/examples/star-rating-component/star-rating-thumb.png"/>

</div>