Rating — uicraft

Default

5-star rating with 3 stars filled.

html

<div class="uc-flex uc-items-center uc-gap-1">
  <span class="uc-text-accents-orange uc-w-5 uc-h-5">
    <svg fill="currentColor" viewBox="0 0 24 24">...</svg>
  </span>
  <!-- repeat filled/empty stars -->
  <span class="uc-text-fg-disabled uc-w-5 uc-h-5">
    <svg fill="none" stroke="currentColor">...</svg>
  </span>
</div>

Sizes

Small, default, and large star sizes.

html

Small

Default

Large

<div class="uc-flex uc-flex-col uc-items-start uc-gap-4">
  <!-- Small -->
  <div>
    <p class="uc-text-xs uc-font-medium uc-text-fg-disabled uc-mb-2">Small</p>
    <div class="uc-flex uc-items-center uc-gap-0.5">
      <span class="uc-text-accents-orange uc-w-4 uc-h-4"><svg>...</svg></span>
      <!-- 3 more filled stars -->
      <span class="uc-text-fg-disabled uc-w-4 uc-h-4"><svg>...</svg></span>
    </div>
  </div>
  <!-- Default (w-5 h-5) and Large (w-7 h-7) -->
</div>

Read Only

Display-only rating with a numeric value.

html

4.0 out of 5

5.0 out of 5

<div class="uc-flex uc-items-center uc-gap-2">
  <div class="uc-flex uc-items-center uc-gap-0.5">
    <span class="uc-text-accents-orange uc-w-5 uc-h-5"><svg>...</svg></span>
    <!-- repeat stars -->
  </div>
  <span class="uc-text-sm uc-font-medium uc-text-fg-primary">4.0</span>
  <span class="uc-text-sm uc-text-fg-disabled">out of 5</span>
</div>

With Count

Rating with review count displayed alongside.

html

(128 reviews)

(2,451 reviews)

(42 reviews)

<div class="uc-flex uc-items-center uc-gap-2">
  <div class="uc-flex uc-items-center uc-gap-0.5">
    <span class="uc-text-accents-orange uc-w-5 uc-h-5"><svg>...</svg></span>
    <!-- repeat stars -->
  </div>
  <span class="uc-text-sm uc-text-fg-disabled">(128 reviews)</span>
</div>

Half Stars

Support for half-star ratings using an overlay approach.

html

4.5

3.5

2.5

<div class="uc-flex uc-items-center uc-gap-2">
  <div class="uc-flex uc-items-center uc-gap-0.5">
    <!-- filled stars -->
    <span class="uc-relative uc-w-5 uc-h-5">
      <span class="uc-absolute uc-inset-0 uc-text-fg-disabled"><svg>...</svg></span>
      <span class="uc-absolute uc-inset-0 uc-text-accents-orange uc-overflow-hidden" style="width: 50%;"><svg>...</svg></span>
    </span>
  </div>
  <span class="uc-text-sm uc-font-medium uc-text-fg-primary">4.5</span>
</div>

Custom Icons

Using heart icons instead of stars.

html

<div class="uc-flex uc-items-center uc-gap-0.5">
  <span class="uc-text-accents-red uc-w-5 uc-h-5">
    <svg fill="currentColor">...</svg>
  </span>
  <!-- repeat hearts -->
  <span class="uc-text-fg-disabled uc-w-5 uc-h-5">
    <svg fill="none" stroke="currentColor">...</svg>
  </span>
</div>

API Reference

All CSS classes available for the Rating component.

Class	Type	Description
`uc-flex uc-items-center uc-gap-0.5`	Layout	Star row container with minimal spacing
`uc-flex uc-items-center uc-gap-1`	Layout	Star row container with larger spacing (large size)
`uc-text-accents-orange`	Color	Filled star color (orange)
`uc-text-fg-disabled`	Color	Empty star color (muted)
`uc-text-accents-red`	Color	Custom icon color (hearts)
`uc-w-4 uc-h-4`	Size	Small star icon size
`uc-w-5 uc-h-5`	Size	Default star icon size
`uc-w-7 uc-h-7`	Size	Large star icon size
`uc-relative uc-w-5 uc-h-5`	Layout	Half-star container with overlay technique
`uc-absolute uc-inset-0 uc-overflow-hidden`	Layout	Half-star fill overlay clipped to 50% width
`uc-text-sm uc-font-medium uc-text-fg-primary`	Typography	Numeric rating value text
`uc-text-sm uc-text-fg-disabled`	Typography	Review count or "out of 5" text

Accessibility

Keyboard and screen reader support.

Feature	Details
Role	Use role="radiogroup" for interactive rating, group for display-only
Label	Each star should be a radio with aria-label, e.g. "Rate 3 out of 5"
Keyboard	Arrow keys change rating value, Tab moves out of rating group
Read-only	Display-only ratings use aria-label="Rated 4 out of 5 stars"