flowbite-vue/docs/components/rating.md

<script setup> import FwbRatingExample from './rating/examples/FwbRatingExample.vue' import FwbRatingExampleWithText from './rating/examples/FwbRatingExampleWithText.vue' import FwbRatingExampleCount from './rating/examples/FwbRatingExampleCount.vue' import FwbRatingExampleStarSizes from './rating/examples/FwbRatingExampleStarSizes.vue' </script>

Vue Rating - Flowbite

Default rating

Use this simple example of a star rating component for showing review results.

```vue <script setup> import { FwbRating } from 'flowbite-vue' </script>

## Rating with text
If you also want to show a text near the stars you can use this example as a reference.

<fwb-rating-example-with-text />
```vue
<template>
  <fwb-rating :rating="4.75">
    <template #besideText>
      <p class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400">
        4.75 out of 5
      </p>
    </template>
  </fwb-rating>
</template>

<script setup>
import { FwbRating } from 'flowbite-vue'
</script>

Rating count

Aggregate more results by using this example to show the amount of reviews and the average score.

```vue

4.95

<script setup> import { FwbRating } from 'flowbite-vue' </script>

## Star sizes
Check out the different sizing options for the star review component from small, medium, and large.

<fwb-rating-example-star-sizes />
```vue
<template>
    <fwb-rating size="sm" :rating="4" />
    <fwb-rating size="md" :rating="4" />
    <fwb-rating size="lg" :rating="4" />
</template>

<script setup>
import { FwbRating } from 'flowbite-vue'
</script>