Ready-to-Use Components Powered by Flowbite, ShadCN & Headless UI

import { Rating, RatingStar } from 'flowbite-react'

const DefaultRatingCode = () => {
  return (
    <>
      <div>
        <Rating>
          <RatingStar />
          <RatingStar />
          <RatingStar />
          <RatingStar />
          <RatingStar filled={false} />
        </Rating>
      </div>
    </>
  )
}

export default DefaultRatingCode

import { Rating, RatingStar } from 'flowbite-react'

const WithTextRatingsCode = () => {
  return (
    <>
      <div>
        <Rating>
          <RatingStar />
          <RatingStar />
          <RatingStar />
          <RatingStar />
          <RatingStar filled={false} />
          <p className='ml-2 text-sm font-medium text-gray-500 dark:text-gray-400'>
            4.95 out of 5
          </p>
        </Rating>
      </div>
    </>
  )
}

export default WithTextRatingsCode

import { Rating, RatingStar } from 'flowbite-react'

const RatingCountCode = () => {
  return (
    <>
      <div>
        <Rating>
          <RatingStar />
          <p className='ml-2 text-sm font-bold text-gray-900 dark:text-white'>
            4.95
          </p>
          <span className='mx-1.5 h-1 w-1 rounded-full bg-gray-500 dark:bg-gray-400' />
          <a
            href='#'
            className='text-sm font-medium text-gray-900 underline hover:no-underline dark:text-white'>
            73 reviews
          </a>
        </Rating>
      </div>
    </>
  )
}

export default RatingCountCode

import { Rating, RatingAdvanced, RatingStar } from 'flowbite-react'

const AdvanceRatingCode = () => {
  return (
    <>
      <div>
        <Rating className='mb-2'>
          <RatingStar />
          <RatingStar />
          <RatingStar />
          <RatingStar />
          <RatingStar filled={false} />
          <p className='ml-2 text-sm font-medium text-gray-500 dark:text-gray-400'>
            4.95 out of 5
          </p>
        </Rating>
        <p className='mb-4 text-sm font-medium text-gray-500 dark:text-gray-400'>
          1,745 global ratings
        </p>
        <RatingAdvanced percentFilled={70} className='mb-2'>
          5 star
        </RatingAdvanced>
        <RatingAdvanced percentFilled={17} className='mb-2'>
          4 star
        </RatingAdvanced>
        <RatingAdvanced percentFilled={8} className='mb-2'>
          3 star
        </RatingAdvanced>
        <RatingAdvanced percentFilled={4} className='mb-2'>
          2 star
        </RatingAdvanced>
        <RatingAdvanced percentFilled={1}>1 star</RatingAdvanced>
      </div>
    </>
  )
}

export default AdvanceRatingCode