8.9k

Rating

PreviousNext

Displays a star rating with customizable colors, sizes, and optional meta information.

<script setup lang="ts">
import { Rating } from '@/components/ui/rating'
</script>

<template>
  <div class="flex flex-wrap items-center gap-4">
    <Rating :rating="4" />
    <Rating :rating="3" />
    <Rating :rating="5" />
  </div>
</template>

Installation

pnpm dlx @frontic/ui add rating

Usage

<script setup lang="ts">
import { Rating } from '@/components/ui/rating'
</script>

<template>
  <Rating :rating="4" />
</template>

Props

PropTypeDefaultDescription
ratingnumber(required)The rating value to display
maxnumber5Maximum number of stars
color'default' | 'primary' | 'inverted''default'Color variant for the stars
size'default' | 'sm' | 'lg''default'Size of the stars
showValuebooleanfalseWhether to show the rating value and count
countnumber-Number of ratings (shown when showValue is true)

Accessibility

The Rating component includes built-in accessibility features:

  • role="img" on the container element
  • aria-label with readable rating description (e.g., "4 out of 5 stars")
  • aria-hidden="true" on individual star icons to prevent screen reader repetition

Colors

Available color variants for the rating stars.

Default
Primary
Inverted
<script setup lang="ts">
import { Rating } from '@/components/ui/rating'
</script>

<template>
  <div class="flex flex-col gap-4">
    <div class="flex items-center gap-4">
      <span class="w-20 text-sm text-muted-foreground">Default</span>
      <Rating :rating="4" color="default" />
    </div>
    <div class="flex items-center gap-4">
      <span class="w-20 text-sm text-muted-foreground">Primary</span>
      <Rating :rating="4" color="primary" />
    </div>
    <div class="flex items-center gap-4">
      <span class="w-20 text-sm text-muted-foreground">Inverted</span>
      <Rating :rating="4" color="inverted" />
    </div>
  </div>
</template>

Sizes

Rating stars come in three sizes.

Small
Default
Large
<script setup lang="ts">
import { Rating } from '@/components/ui/rating'
</script>

<template>
  <div class="flex flex-col gap-4">
    <div class="flex items-center gap-4">
      <span class="w-16 text-sm text-muted-foreground">Small</span>
      <Rating :rating="4" size="sm" />
    </div>
    <div class="flex items-center gap-4">
      <span class="w-16 text-sm text-muted-foreground">Default</span>
      <Rating :rating="4" size="default" />
    </div>
    <div class="flex items-center gap-4">
      <span class="w-16 text-sm text-muted-foreground">Large</span>
      <Rating :rating="4" size="lg" />
    </div>
  </div>
</template>

Examples

With Meta Information

Display the rating value and total number of ratings.

<script setup lang="ts">
import { Rating } from '@/components/ui/rating'
</script>

<template>
  <div class="flex flex-col gap-4">
    <Rating :rating="4.5" show-value />
    <Rating :rating="3.8" :count="128" show-value />
    <Rating :rating="4.9" :count="2547" show-value size="sm" />
  </div>
</template>

Custom Max Stars

Use a different number of maximum stars.

<script setup lang="ts">
import { Rating } from '@/components/ui/rating'
</script>

<template>
  <div class="flex flex-col gap-4">
    <Rating :rating="7" :max="10" size="sm" />
    <Rating :rating="3" :max="4" />
  </div>
</template>

Custom Icon

Use the RatingIcon slot to customize the icon.

<script setup lang="ts">
import { Heart } from 'lucide-vue-next'
import { Rating, RatingIcon, ratingVariants } from '@/components/ui/rating'
import { cn } from '@/lib/utils'
</script>

<template>
  <div class="flex flex-col gap-4">
    <div class="flex items-center gap-0.5">
      <RatingIcon
        v-for="i in 5"
        :key="i"
        :class="cn(ratingVariants({ size: 'default' }), i <= 4 ? 'fill-red-500 stroke-red-500' : 'fill-gray-200 stroke-gray-200')"
      >
        <Heart class="h-full w-full" />
      </RatingIcon>
    </div>
  </div>
</template>
Range CalendarResizable