previously Vue Storefront Build Better Storefronts


SfRating gives you a nice way to display a rating both with graphics and through text. This can be used to show the rating of a product, score for a review, or any other rating you might need.


Value handling

The value prop allows you to set the current rating and max number of stars via max prop.

If you need to support partial stars, you can show half-filled star icons by passing the half-increment prop.


SfRating supports 6 sizes that can be set with the size prop: 'xs', 'sm', 'base', 'lg', 'xl'.


Rating by default uses a warning-500 for filled and partially filled stars and disabled-500 as an empty icon color. You can change these values in your Tailwind configuration or override them for a single element using important modifier.

Single star with value

For a more minimal look, you can also present ratings a single star icon with a text label.

Accessibility notes

For better out-of-the-box accessibility, SfRating adds role="img" and an aria-label property with value Rating: [Avg value] out of [Max value] stars where the values are replaced with the actual values. This can be overridden by passing an aria-label property to the component.