Rating

Star rating with exact fractional fill and optional review count.

Data displaycomponentratingstars

Workbench

Rendering Rating…

Installation

Copy the source into your project with the CLI. It lands under @/components/ui and is yours to edit.

npx mlola-ui add rating

Usage

TSX

import { Rating } from "@/components/ui/rating";

export default function Example() {
  return <Rating value={4.5} count={128} showValue label="Average rating" />;
}

Styling comes from the engine stylesheet and the nearest theme. Set it once at the root:

HTML

<html data-theme="graphite" data-mode="light">

HTML

The markup the example above renders, exactly. It needs no script: write it from any language or template.

HTML

<span class="ml-rating" role="img" aria-label="Average rating"><span class="ml-rating-track" aria-hidden="true"><span class="ml-rating-fill" style="--ml-rating:90%">★★★★★</span>★★★★★</span><span class="ml-rating-value">4.5</span><span class="ml-rating-count">(128)</span></span>

Classes and attributes

A class names each element; data-* and aria-* attributes carry its variant and state. The values listed are the ones the stylesheet draws; the default needs no attribute.

Class	Attributes
`ml-rating`	—
`ml-rating-track`	—
`ml-rating-fill`	—
`ml-rating-count`	—
`ml-rating-value`	—

Accessibility and theming

Semantic elements, accessible names and state relationships are part of the contract.
Keyboard, pointer and touch paths are operable; focus stays visible in every theme.
Light and dark modes pass WCAG AA contrast in all 5 canonical themes.
Reduced motion and forced colors keep meaning and operation.

Open the standalone preview