Data display and layout

Rating display

Read only stars filled from the --rating custom property, decimals included.

Data display and layout3 classesNo JavaScriptLight and dark

Example

Full

rating-display.html

<div class="flex items-center gap-2"><span class="rating-display" style="--rating: 4.5" role="img" aria-label="4.5 out of 5"></span><span class="text-sm text-muted-foreground">4.5 (1,284 reviews)</span></div>

Classes

3 classes. Click a name to copy it. Utilities on the same element always win over component defaults, so any of them can be adjusted with plain utility classes.

Class Type What it does

Class	Type	What it does
	Base	Base class of the rating display. On a <span> in the example. Sets inline-block display, width, height and background, and `--rating` and `--rating-size`. CSS .rating-display { --rating: 0; --rating-size: 1.25rem; display: inline-block; width: calc(var(--rating-size) * 5); height: var(--rating-size); background: linear-gradient(90deg, var(--warning) calc(var(--rating) * 20%), color-mix(in oklab, var(--muted-foreground) 28%, transparent) 0); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -15 120 120'%3E%3Cpolygon points='50 2 62.9 32.2 95.7 35.2 70.9 56.8 78.2 88.8 50 72 21.8 88.8 29.1 56.8 4.3 35.2 37.1 32.2' stroke='black' stroke-width='8' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0 / var(--rating-size) var(--rating-size) repeat-x; vertical-align: middle; }
	Size	Small size. Not used in the example above. Sets `--rating-size`. CSS `.rating-display-sm { --rating-size: 1rem; }`
	Size	Large size. Not used in the example above. Sets `--rating-size`. CSS `.rating-display-lg { --rating-size: 1.75rem; }`

Base

Base class of the rating display. On a <span> in the example. Sets inline-block display, width, height and background, and --rating and --rating-size.

CSS

.rating-display {
  --rating: 0;
  --rating-size: 1.25rem;
  display: inline-block;
  width: calc(var(--rating-size) * 5);
  height: var(--rating-size);
  background: linear-gradient(90deg, var(--warning) calc(var(--rating) * 20%), color-mix(in oklab, var(--muted-foreground) 28%, transparent) 0);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -15 120 120'%3E%3Cpolygon points='50 2 62.9 32.2 95.7 35.2 70.9 56.8 78.2 88.8 50 72 21.8 88.8 29.1 56.8 4.3 35.2 37.1 32.2' stroke='black' stroke-width='8' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0 / var(--rating-size) var(--rating-size) repeat-x;
  vertical-align: middle;
}

Size

Small size. Not used in the example above. Sets --rating-size.

CSS

.rating-display-sm {
  --rating-size: 1rem;
}

Size

Large size. Not used in the example above. Sets --rating-size.

CSS

.rating-display-lg {
  --rating-size: 1.75rem;
}

Usage

Components ship inside the same stylesheet as the utilities. There is nothing else to install and no script to load: link Monsoon and write the markup.

index.html

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss">

<!-- Rating display: start from the base class, then add modifiers -->
<div class="flex items-center gap-2"><span class="rating-display" style="--rating: 4.5" role="img" aria-label="4.5 out of 5"></span><span class="text-sm text-muted-foreground">4.5 (1,284 reviews)</span></div>

Theme it with --seed on any ancestor, for example style="--seed: #0d9488", and force a scheme with class="dark" or class="light" on a wrapper.

#Example

#Classes

#Usage

#Accessibility

#Related components

Example

Classes

Usage

Accessibility

Related components