Review
ReviewStars
Star rating display with read-only and interactive modes.
ReviewStars
Displays a star rating using Heroicons. Supports read-only display mode and interactive click-to-rate mode for forms.
Preview
Read-only:
Interactive:(3)
Usage
Read-Only
<CReviewStars :model-value="4.5" readonly />
Interactive
<script setup>
const rating = ref(0)
</script>
<CReviewStars v-model="rating" />
Size Variants
<CReviewStars :model-value="4" readonly size="xs" />
<CReviewStars :model-value="4" readonly size="sm" />
<CReviewStars :model-value="4" readonly size="md" />
<CReviewStars :model-value="4" readonly size="lg" />
Custom Max Stars
<CReviewStars v-model="rating" :max="10" />
Props
| Prop | Type | Default | Description |
|---|---|---|---|
modelValue | number | 0 | Current rating |
max | number | 5 | Maximum number of stars |
readonly | boolean | false | Disable interaction |
size | 'xs' | 'sm' | 'md' | 'lg' | 'md' | Star size |
ui | Partial<{...}> | — | Per-instance theme overrides |
Events
| Event | Payload | Description |
|---|---|---|
update:modelValue | number | Rating changed (interactive mode only) |
Theme
export default defineAppConfig({
ui: {
reviewStars: {
slots: {
root: 'inline-flex items-center gap-0.5',
star: 'transition-colors cursor-pointer',
filled: 'text-amber-400',
empty: 'text-muted',
},
},
},
})