Rating — Veritheme

Default

5-star rating with 3 stars filled.

html

<div class="vt-flex vt-items-center vt-gap-1">
  <span class="vt-text-warning-primary vt-w-5 vt-h-5">
    <svg fill="currentColor" viewBox="0 0 24 24">...</svg>
  </span>
  <!-- repeat filled/empty stars -->
  <span class="vt-text-mains-quaternary vt-w-5 vt-h-5">
    <svg fill="none" stroke="currentColor">...</svg>
  </span>
</div>

Sizes

Small, default, and large star sizes.

html

Small

Default

Large

<div class="vt-flex vt-flex-col vt-items-start vt-gap-4">
  <!-- Small -->
  <div>
    <p class="vt-text-xs vt-font-medium vt-text-mains-quaternary vt-mb-2">Small</p>
    <div class="vt-flex vt-items-center vt-gap-0.5">
      <span class="vt-text-warning-primary vt-w-4 vt-h-4"><svg>...</svg></span>
      <!-- 3 more filled stars -->
      <span class="vt-text-mains-quaternary vt-w-4 vt-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="vt-flex vt-items-center vt-gap-2">
  <div class="vt-flex vt-items-center vt-gap-0.5">
    <span class="vt-text-warning-primary vt-w-5 vt-h-5"><svg>...</svg></span>
    <!-- repeat stars -->
  </div>
  <span class="vt-text-sm vt-font-medium vt-text-mains-primary">4.0</span>
  <span class="vt-text-sm vt-text-mains-quaternary">out of 5</span>
</div>

With Count

Rating with review count displayed alongside.

html

(128 reviews)

(2,451 reviews)

(42 reviews)

<div class="vt-flex vt-items-center vt-gap-2">
  <div class="vt-flex vt-items-center vt-gap-0.5">
    <span class="vt-text-warning-primary vt-w-5 vt-h-5"><svg>...</svg></span>
    <!-- repeat stars -->
  </div>
  <span class="vt-text-sm vt-text-mains-quaternary">(128 reviews)</span>
</div>

Half Stars

Support for half-star ratings using an overlay approach.

html

4.5

3.5

2.5

<div class="vt-flex vt-items-center vt-gap-2">
  <div class="vt-flex vt-items-center vt-gap-0.5">
    <!-- filled stars -->
    <span class="vt-relative vt-w-5 vt-h-5">
      <span class="vt-absolute vt-inset-0 vt-text-mains-quaternary"><svg>...</svg></span>
      <span class="vt-absolute vt-inset-0 vt-text-warning-primary vt-overflow-hidden vt-inline-e73a22bd90"><svg>...</svg></span>
    </span>
  </div>
  <span class="vt-text-sm vt-font-medium vt-text-mains-primary">4.5</span>
</div>

Custom Icons

Using heart icons instead of stars.

html

<div class="vt-flex vt-items-center vt-gap-0.5">
  <span class="vt-text-error-primary vt-w-5 vt-h-5">
    <svg fill="currentColor">...</svg>
  </span>
  <!-- repeat hearts -->
  <span class="vt-text-mains-quaternary vt-w-5 vt-h-5">
    <svg fill="none" stroke="currentColor">...</svg>
  </span>
</div>

API Reference

All CSS classes available for the Rating component.

Class	Type	Description
`vt-flex vt-items-center vt-gap-0.5`	Layout	Star row container with minimal spacing
`vt-flex vt-items-center vt-gap-1`	Layout	Star row container with larger spacing (large size)
`vt-text-warning-primary`	Color	Filled star color (orange)
`vt-text-mains-quaternary`	Color	Empty star color (muted)
`vt-text-error-primary`	Color	Custom icon color (hearts)
`vt-w-4 vt-h-4`	Size	Small star icon size
`vt-w-5 vt-h-5`	Size	Default star icon size
`vt-w-7 vt-h-7`	Size	Large star icon size
`vt-relative vt-w-5 vt-h-5`	Layout	Half-star container with overlay technique
`vt-absolute vt-inset-0 vt-overflow-hidden`	Layout	Half-star fill overlay clipped to 50% width
`vt-text-sm vt-font-medium vt-text-mains-primary`	Typography	Numeric rating value text
`vt-text-sm vt-text-mains-quaternary`	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"