Rating Shop

Shop rating displays comprehensive store ratings with detailed breakdown bars and aggregate statistics

Resources

Figma Component

MDX Star Rating

Git Repository

MDX Star Rating

Intro & Anatomy

Shop Rating provides a comprehensive view of store ratings featuring detailed breakdown bars for each rating level alongside aggregate statistics.

Use rating shop when displaying full rating analysis for stores, products, or services where users need to understand the distribution of ratings across all levels.

Options & Styles

Content

Title is mandatory to identify what is being rated.
Bars are mandatory with optional percentage display to show rating distribution across all five levels.
Right block is optional and includes average rating display and total rating counter for quick reference.

Bars-Only

A simplified version displaying only the rating distribution bars without additional statistics is available for space-constrained layouts.

Best Practice & Usage

Rating shop should always display complete rating information to provide users with full transparency about rating distribution and help them make informed decisions.

Do display full store rating Ensure that all bars of the store rating are always visible to provide complete rating transparency.

Don't hide shop rating bars Don't hide any bars of the store rating in the display. Always show all five rating levels.

Theming

You can customise colours, font styles, and spacings to match your design requirements.

When not using MDX icons, a slot is available to use your own icon library or SVG icons for star representations.