Playground

Adjust the controls below to explore how VRating responds to different props. The generated code panel updates in real time and can be copied directly into your project.

Preview

★★★★★★★★★★

Rating

3

Max

Step

10.50.250.20.1

Size

none sm md lg custom

Color

default

Empty Color

default

Hover Color

default

Readonly

Disabled

RTL

Icon Set

★ Default ❤️ Hearts 😍 Emoji ♥ SVG

Generated Code

<script setup lang="ts">
import { ref } from 'vue'
import { VRating } from 'vue-rating-kit'
import 'vue-rating-kit/style.css'

const rating = ref(3)
</script>

<template>
  <VRating v-model="rating" />
</template>