StarRating
Star-based rating display and input with optional counts, values, and interactive selection.
Best for
Import
import { StarRating } from "@enadhq/enad-react-sdk/client/storefront"When to use it
Use StarRating when the rating itself needs to be visible at a glance, either as a trust signal or as an input control.
Composition notes
Use display mode for summaries and interactive mode only when the page genuinely needs a rating input. Add reviewCount and showValue when the surrounding surface benefits from more explicit context.
Behavior and theming guidance
Choose size based on context. Small ratings fit cards and list rows. Larger ratings work better inside forms and review-detail surfaces.
Examples
Live examples you can edit directly in the sandbox.
Display and input modes
Use display mode for summary surfaces and interactive mode when the visitor is actively leaving a rating.
Component Sets
Preview the first example across the available component-set presets to compare tone, spacing, and structural defaults.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| rating | number | — | Current rating value; supports half-star increments |
| max | number | 5 | Maximum number of stars to display |
| size | string | md | Size of each star icon |
| showValue | boolean | false | Whether to render the numeric rating value next to the stars |
| reviewCount | number | — | Number of reviews to display in parentheses next to the stars |
| className | string | No description yet. | |
| filledClassName | string | — | Tailwind class(es) applied to filled stars to override the default star color |
| interactive | boolean | false | Enable interactive click/keyboard rating selection |
| onRate | string | — | Callback fired when the user selects a rating in interactive mode |