Qwik rating - Flowbite

Get started with the rating component from Flowbite Qwik to show testimonials and user reviews of your products using stars, labels and advanced layouts

The rating component can be used to show user reviews and testimonials in the form of stars, reviews, and labels based on multiple styles and layouts built with Qwik and Tailwind CSS.

Check out the rating components from Flowbite Qwik and choose one that suits your needs and customize them using the custom props API and the utility classes from Tailwind CSS.

Start using the rating component by importing it from flowbite-qwik :

import { Rating } from "flowbite-qwik"

Default rating

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

tsx
import { component$ } from '@builder.io/qwik'
import { Rating } from 'flowbite-qwik'

export default component$(() => {
  return (
    <div class="p-3">
      <Rating rating={4} />
    </div>
  )
})

Rating with text

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

tsx
import { component$ } from '@builder.io/qwik'
import { Rating } from 'flowbite-qwik'

export default component$(() => {
  return (
    <div class="p-3">
      <Rating rating={4}>
        <p q:slot="besideText" class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400">
          4.75 out of 5
        </p>
      </Rating>
    </div>
  )
})

Rating with review link

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

tsx
import { component$ } from '@builder.io/qwik'
import { Rating } from 'flowbite-qwik'

export default component$(() => {
  return (
    <div class="p-3">
      <Rating rating={4} reviewLink={{ href: '#', text: '73 reviews' }} />
    </div>
  )
})

Stars sizes

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

tsx
import { component$ } from '@builder.io/qwik'
import { Rating, RatingSize } from 'flowbite-qwik'

export default component$(() => {
  return (
    <div class="flex flex-col gap-3 p-3">
      {(['sm', 'md', 'lg'] as RatingSize[]).map((size) => (
        <Rating rating={4} size={size} />
      ))}
    </div>
  )
})