Component Library
Browse and explore components
Rating
A Rating is a UI component used to display or collect user feedback.
Default rating
Component Code
Copy Code
import { Rating, RatingStar } from 'flowbite-react'
const DefaultRatingCode = () => {
return (
<>
<div>
<Rating>
<RatingStar />
<RatingStar />
<RatingStar />
<RatingStar />
<RatingStar filled={false} />
</Rating>
</div>
</>
)
}
export default DefaultRatingCode
Rating With Text
4.95 out of 5
Component Code
Copy Code
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
Rating Count
4.95
73 reviewsComponent Code
Copy Code
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
Star sizing
Component Code
Copy Code
import { Rating, RatingStar } from 'flowbite-react'
const StarRatingCode = () => {
return (
<>
<div className='flex flex-col gap-2'>
<Rating>
<RatingStar />
<RatingStar />
<RatingStar />
<RatingStar />
<RatingStar filled={false} />
</Rating>
<Rating size='md'>
<RatingStar />
<RatingStar />
<RatingStar />
<RatingStar />
<RatingStar filled={false} />
</Rating>
<Rating size='lg'>
<RatingStar />
<RatingStar />
<RatingStar />
<RatingStar />
<RatingStar filled={false} />
</Rating>
<Rating size='lg'>
<RatingStar />
<RatingStar />
<RatingStar />
<RatingStar />
<RatingStar />
<RatingStar filled={false} />
</Rating>
<Rating size='lg'>
<RatingStar />
<RatingStar />
<RatingStar />
<RatingStar />
<RatingStar />
<RatingStar />
<RatingStar filled={false} />
</Rating>
<Rating size='lg'>
<RatingStar />
<RatingStar />
<RatingStar />
<RatingStar />
<RatingStar />
<RatingStar />
<RatingStar />
<RatingStar filled={false} />
</Rating>
<Rating size='lg'>
<RatingStar />
<RatingStar />
<RatingStar />
<RatingStar />
<RatingStar />
<RatingStar />
<RatingStar />
<RatingStar />
<RatingStar filled={false} />
</Rating>
</div>
</>
)
}
export default StarRatingCode
Advanced Rating
4.95 out of 5
1,745 global ratings
5 star
70%
4 star
17%
3 star
8%
2 star
4%
1 star
1%
Component Code
Copy Code
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
API ( Rating )
| Prop | Description | Type | Default |
|---|---|---|---|
size | Sets the size of the stars. | "sm" | "md" | "lg" | "sm" |
filled | If true, the star is filled otherwise, it is empty. | boolean | true |
percentFilled | The percentage of the rating bar that is filled. | 1 to 100 | 0 |