Interaction
Rating Interaction
This is a rating interaction for Framer using multiple components and variants. Feel free to copy and paste this component into your website to add a fun little touch to it.
Created by



About the resource
This rating component has several elements within it.
However, there's just one element you need to focus on to customize the interaction's appearance. You need to edit its variants.
If you double-click on the "Rating" component followed by the "Star Icon" component, you'll spot three variants:
About the resource
This rating component has several elements within it.
However, there's just one element you need to focus on to customize the interaction's appearance. You need to edit its variants.
If you double-click on the "Rating" component followed by the "Star Icon" component, you'll spot three variants:
About the resource
This rating component has several elements within it.
However, there's just one element you need to focus on to customize the interaction's appearance. You need to edit its variants.
If you double-click on the "Rating" component followed by the "Star Icon" component, you'll spot three variants:

Star icon variants.

Star icon variants.

Star icon variants.
You'll see "Inactive," "Active," and "Hover" variants. You can edit the colors of the icons right there.
You'll see "Inactive," "Active," and "Hover" variants. You can edit the colors of the icons right there.
You'll see "Inactive," "Active," and "Hover" variants. You can edit the colors of the icons right there.