# Star rating > Use star rating to show score values with static stars or interactive star states. Build star rating UI with stars classes and data-star-rating state selectors. Source: https://docs.tabler.io/ui/components/star-rating --- ## Overview Use `.stars` as the container and `.star` for each icon. This creates an inline star row with spacing and base color. ```html

``` ## Variants ### Static value rows Use `.stars` for read-only values in lists and cards. Color only the active stars and keep the rest in default color. ```html

Product quality

Delivery speed

``` ### Data-star-rating states The vendor styles also target `[data-star-rating]`. Use `.gl-active` and `.gl-star-full` to control active and inactive star color. ```html

``` ### Custom rating colors Use CSS custom properties from vendor styles to change star colors. You can set active and inactive colors per instance. ```html

``` ## Examples ### Summary rating block Combine stars with text to show score and vote count. This pattern works for cards, reviews, and product lists. ```html

4.0 (128 reviews)

``` ## Accessibility - Add a text label near stars, for example `4.0 out of 5`. - For read-only stars, keep the value visible in text. - For interactive ratings, ensure keyboard focus and clear selected state. - Do not rely on color alone; pair color with a numeric value.