CleenUI · Feedback · StarRating

StarRating

Read-only or interactive star-rating control with half-star support and accessible keyboard input.

storybook.cleenui.com
Open Storybook
Live preview

Interactive StarRating preview coming soon.

This component ships with CleenUI. Its dedicated Storybook story is still being published — until it lands here, the full Storybook catalog is one click away.

About StarRating

StarRating displays a value as a row of filled and unfilled stars. Read-only mode is for displaying existing ratings; interactive mode lets the user click or use arrow keys to set the value.

Half-star precision is supported via configurable step. The component handles all the awkward visual details around half-star rendering correctly, including RTL layouts and varying star counts.

When to use it

  • Customer review displays on product pages.
  • Internal NPS or satisfaction surveys.
  • Quality-rating capture in feedback forms.
  • Recommendation strength indicators.

Common props

Prop
Type
Description
value
number
Current rating (0–max, step-aligned).
max
number
Number of stars.
step
number
Precision (e.g. 0.5 for half-stars).
readonly
boolean
Display-only mode.
onChange
(value: number) => void
Fires on user input.
⚡ Already in an AI editor?

Set up CleenUI in your tool.

Skip the manual import — ask your AI agent to build with this component. The Builder skill knows its props, variants, and idioms.

Live demo

See CleenUI running before you talk to us.

Configure a demo environment in about twenty seconds — theme, spacing, the modules you care about, sample data for your industry — then launch the full dashboard in your browser. Nothing to install, no signup.

  • 20 sec setup
  • 15 themes
  • 20 modules
  • 80 industries
Pick a theme to start with