flowbite-svelte-son
Version:
Flowbite components for Svelte
409 lines (336 loc) • 21 kB
Markdown
---
layout: componentLayout
title: Svelte Rating - Flowbite
breadcrumb_title: Rating
dir: Components
description: Use the rating component to show reviews and testimonials from your users using stars and scores based on multiple styles and sizes
---
<MetaTag {breadcrumb_title} {title} {dir} {description}/>
<script>
import { Htwo, ExampleDiv, GitHubSource, CompoDescription, TableProp, TableDefaultRow, MetaTag } from '../utils'
import { Breadcrumb, BreadcrumbItem, Heading, P, A } from '$lib'
// Props table
import { props as items } from '../props/Rating.json'
import { props as items2 } from '../props/AdvancedRating.json'
import { props as items3 } from '../props/ScoreRating.json'
import { props as items4 } from '../props/RatingComment.json'
import { props as items5 } from '../props/Review.json'
let propHeader = ['Name', 'Type', 'Default']
let divClass='w-full relative overflow-x-auto shadow-md sm:rounded-lg py-4'
let theadClass ='text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-white'
</script>
<Breadcrumb class="pt-16 py-8">
<BreadcrumbItem href="/" home >Home</BreadcrumbItem>
<BreadcrumbItem>{dir}</BreadcrumbItem>
<BreadcrumbItem>{breadcrumb_title}</BreadcrumbItem>
</Breadcrumb>
<Heading class="mb-2" tag="h1" customSize="text-3xl">{title}</Heading>
<CompoDescription>{description}</CompoDescription>
<ExampleDiv>
<GitHubSource href="ratings/Rating.svelte">Rating</GitHubSource>
<GitHubSource href="ratings/AdvancedRating.svelte">AdvancedRating</GitHubSource>
<GitHubSource href="ratings/ScoreRating.svelte">ScoreRating</GitHubSource>
</ExampleDiv>
Get started with the rating component to show an aggregate of reviews and scores in the forms of stars or numbers.
You can find multiple examples on this page including different styles, sizes, and variants of the rating component and other associated elements such as a comment or card.
<Htwo label="Setup" />
Let's import all necessary components in the script tag. We import a heart, thumb-up, and smiley icons, but you can use any icons as you like.
```html
<script>
import { Rating, AdvancedRating, ScoreRating } from 'flowbite-svelte';
</script>
```
<Htwo label="Default rating" />
The default rating icon is a star. Set the total and rating props.
```svelte example hideScript
<script>
import { Rating } from 'flowbite-svelte'
</script>
<Rating total={5} rating={4.66} />
```
<Htwo label="Ceil prop" />
The default rounding for the rate is `floor`, but by adding the `ceil` prop, you can round it up.
```svelte example hideScript
<script>
import { Rating } from 'flowbite-svelte'
</script>
<Rating total={5} rating={4.66} ceil />
```
<Htwo label="Rating with text" />
If you also want to show a text near the stars you can use the `text` slot to add any text.
```svelte example hideScript
<script>
import { Rating } from 'flowbite-svelte'
</script>
<Rating total={5} rating={3.21}>
<p slot="text" class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400">3.21 out of 5</p>
</Rating>
```
<Htwo label="Rating count" />
Aggregate more results by using this example to show the amount of reviews and the average score.
```svelte example hideScript
<script>
import { Rating } from 'flowbite-svelte'
</script>
<Rating count rating={4.95} >
<span class="w-1 h-1 mx-1.5 bg-gray-500 rounded-full dark:bg-gray-400" />
<a
href="/"
class="text-sm font-medium text-gray-900 underline hover:no-underline dark:text-white"
>73 reviews</a
>
</Rating>
```
<Htwo label="Icon size and color" />
Use the `ratingUp` and `ratingDown` slots to add icons of your choice.
<h3 class='text-xl w-full dark:text-white py-4'>Size and color</h3>
The default icon size is `24`. Set the `class` in a icon component to change colors.
```svelte example hideScript
<script>
import { Rating } from 'flowbite-svelte'
</script>
<Rating total={5} rating={3.21}>
<span slot="ratingUp">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-red-700 dark:text-red-500"><path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" /></svg>
</span>
<span slot="ratingDown">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-gray-300 dark:text-gray-500"><path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" /></svg>
</span>
</Rating>
```
```svelte example hideScript
<script>
import { Rating } from 'flowbite-svelte'
</script>
<Rating total={5} rating={4.7}>
<span slot="ratingUp">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-purple-500 dark:text-purple-700"><path stroke-linecap="round" stroke-linejoin="round" d="M15.182 15.182a4.5 4.5 0 01-6.364 0M21 12a9 9 0 11-18 0 9 9 0 0118 0zM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75zm-.375 0h.008v.015h-.008V9.75zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75zm-.375 0h.008v.015h-.008V9.75z" /></svg>
</span>
<span slot="ratingDown">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-gray-300 dark:text-gray-500"><path stroke-linecap="round" stroke-linejoin="round" d="M15.182 15.182a4.5 4.5 0 01-6.364 0M21 12a9 9 0 11-18 0 9 9 0 0118 0zM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75zm-.375 0h.008v.015h-.008V9.75zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75zm-.375 0h.008v.015h-.008V9.75z" /></svg>
</span>
</Rating>
```
```svelte example hideScript
<script>
import { Rating } from 'flowbite-svelte'
</script>
<Rating total={5} rating={2.4}>
<span slot="ratingUp">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-yellow-300 dark:text-yellow-200"><path stroke-linecap="round" stroke-linejoin="round" d="M6.633 10.5c.806 0 1.533-.446 2.031-1.08a9.041 9.041 0 012.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 00.322-1.672V3a.75.75 0 01.75-.75A2.25 2.25 0 0116.5 4.5c0 1.152-.26 2.243-.723 3.218-.266.558.107 1.282.725 1.282h3.126c1.026 0 1.945.694 2.054 1.715.045.422.068.85.068 1.285a11.95 11.95 0 01-2.649 7.521c-.388.482-.987.729-1.605.729H13.48c-.483 0-.964-.078-1.423-.23l-3.114-1.04a4.501 4.501 0 00-1.423-.23H5.904M14.25 9h2.25M5.904 18.75c.083.205.173.405.27.602.197.4-.078.898-.523.898h-.908c-.889 0-1.713-.518-1.972-1.368a12 12 0 01-.521-3.507c0-1.553.295-3.036.831-4.398C3.387 10.203 4.167 9.75 5 9.75h1.053c.472 0 .745.556.5.96a8.958 8.958 0 00-1.302 4.665c0 1.194.232 2.333.654 3.375z" /></svg>
</span>
<span slot="ratingDown">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-gray-300 dark:text-gray-500"><path stroke-linecap="round" stroke-linejoin="round" d="M6.633 10.5c.806 0 1.533-.446 2.031-1.08a9.041 9.041 0 012.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 00.322-1.672V3a.75.75 0 01.75-.75A2.25 2.25 0 0116.5 4.5c0 1.152-.26 2.243-.723 3.218-.266.558.107 1.282.725 1.282h3.126c1.026 0 1.945.694 2.054 1.715.045.422.068.85.068 1.285a11.95 11.95 0 01-2.649 7.521c-.388.482-.987.729-1.605.729H13.48c-.483 0-.964-.078-1.423-.23l-3.114-1.04a4.501 4.501 0 00-1.423-.23H5.904M14.25 9h2.25M5.904 18.75c.083.205.173.405.27.602.197.4-.078.898-.523.898h-.908c-.889 0-1.713-.518-1.972-1.368a12 12 0 01-.521-3.507c0-1.553.295-3.036.831-4.398C3.387 10.203 4.167 9.75 5 9.75h1.053c.472 0 .745.556.5.96a8.958 8.958 0 00-1.302 4.665c0 1.194.232 2.333.654 3.375z" /></svg>
</span>
</Rating>
```
<Htwo label="AdvancedRating component" />
Set the `total`,` rating`, and `ratings` prop for AdvancedRation component. Use the `rating` slot for Rating component with the `total` and `rating` props. Use the `globalText` slot for additional information.
```svelte example hideScript
<script>
import { AdvancedRating, Rating } from 'flowbite-svelte'
</script>
<AdvancedRating
ratings={[
{ label: '5 star', rating: 70 },
{ label: '4 star', rating: 17 },
{ label: '3 star', rating: 8 },
{ label: '2 star', rating: 4 },
{ label: '1 star', rating: 1 }
]}
>
<span slot="rating">
<Rating total={5} rating={3.21}>
<p slot="text" class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400">3.21 out of 5</p>
</Rating>
</span>
<p slot="globalText" class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400">1,745 global ratings</p>
</AdvancedRating>
```
<Htwo label="Different icon" />
As we describe in the Rating component, you can change an icon in the `ratingUp` and `ratingDown` in the Rating component.
```svelte example hideScript
<script>
import { AdvancedRating, Rating } from 'flowbite-svelte'
</script>
<AdvancedRating
ratings={[
{ label: '5 star', rating: 70 },
{ label: '4 star', rating: 17 },
{ label: '3 star', rating: 8 },
{ label: '2 star', rating: 4 },
{ label: '1 star', rating: 1 }
]}
>
<span slot="rating">
<Rating total={5} rating={3.21} ceil>
<span slot="ratingUp">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-yellow-300 dark:text-yellow-200"><path stroke-linecap="round" stroke-linejoin="round" d="M6.633 10.5c.806 0 1.533-.446 2.031-1.08a9.041 9.041 0 012.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 00.322-1.672V3a.75.75 0 01.75-.75A2.25 2.25 0 0116.5 4.5c0 1.152-.26 2.243-.723 3.218-.266.558.107 1.282.725 1.282h3.126c1.026 0 1.945.694 2.054 1.715.045.422.068.85.068 1.285a11.95 11.95 0 01-2.649 7.521c-.388.482-.987.729-1.605.729H13.48c-.483 0-.964-.078-1.423-.23l-3.114-1.04a4.501 4.501 0 00-1.423-.23H5.904M14.25 9h2.25M5.904 18.75c.083.205.173.405.27.602.197.4-.078.898-.523.898h-.908c-.889 0-1.713-.518-1.972-1.368a12 12 0 01-.521-3.507c0-1.553.295-3.036.831-4.398C3.387 10.203 4.167 9.75 5 9.75h1.053c.472 0 .745.556.5.96a8.958 8.958 0 00-1.302 4.665c0 1.194.232 2.333.654 3.375z" /></svg>
</span>
<span slot="ratingDown">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-gray-300 dark:text-gray-500"><path stroke-linecap="round" stroke-linejoin="round" d="M6.633 10.5c.806 0 1.533-.446 2.031-1.08a9.041 9.041 0 012.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 00.322-1.672V3a.75.75 0 01.75-.75A2.25 2.25 0 0116.5 4.5c0 1.152-.26 2.243-.723 3.218-.266.558.107 1.282.725 1.282h3.126c1.026 0 1.945.694 2.054 1.715.045.422.068.85.068 1.285a11.95 11.95 0 01-2.649 7.521c-.388.482-.987.729-1.605.729H13.48c-.483 0-.964-.078-1.423-.23l-3.114-1.04a4.501 4.501 0 00-1.423-.23H5.904M14.25 9h2.25M5.904 18.75c.083.205.173.405.27.602.197.4-.078.898-.523.898h-.908c-.889 0-1.713-.518-1.972-1.368a12 12 0 01-.521-3.507c0-1.553.295-3.036.831-4.398C3.387 10.203 4.167 9.75 5 9.75h1.053c.472 0 .745.556.5.96a8.958 8.958 0 00-1.302 4.665c0 1.194.232 2.333.654 3.375z" /></svg>
</span>
<p slot="text" class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400">3.21 out of 5</p>
</Rating>
</span>
<p slot="globalText" class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400">1,745 global ratings</p>
</AdvancedRating>
```
<Htwo label="Score rating" />
```svelte example hideScript
<script>
import { ScoreRating } from 'flowbite-svelte'
let headerLabel = {
desc1: '8.7',
desc2: 'Excellent',
desc3: '376 reviews',
link: {
label: 'Read all reviews',
url: '/'
}
};
</script>
<ScoreRating
{headerLabel}
ratings={[
{ label: 'Staff', rating: 8.8 },
{ label: 'Comfort', rating: 8.9 },
{ label: 'Free WiFi', rating: 8.8 },
{ label: 'Facilities', rating: 5.4 }
]}
ratings2={[
{ label: 'Value for money', rating: 8.9 },
{ label: 'Cleanliness', rating: 7.0 },
{ label: 'Location', rating: 8.0 }
]}
/>
```
<Htwo label="Rating comment" />
Use this component to show a single rating comment and its score alongside other components such as the user profile avatar, name, post date, and more.
```svelte example hideScript
<script>
import { RatingComment } from 'flowbite-svelte'
let comment = {
id: '1',
user: {
name: 'Jese Leos',
img: {
src: '/images/profile-picture-2.webp',
alt: 'Jese Leos'
},
joined: 'Joined on August 2014'
},
total: 5,
rating: 4.5,
heading: 'Thinking to buy another one!',
address: 'the UK',
datetime: '2022-03-25'
};
</script>
<RatingComment {comment} helpfullink="/" abuselink="/">
<p class="mb-2 font-light text-gray-500 dark:text-gray-400">
This is my third Invicta Pro Diver. They are just fantastic value for money. This one arrived
yesterday and the first thing I did was set the time, popped on an identical strap from
another Invicta and went in the shower with it to test the waterproofing.... No problems.
</p>
<p class="mb-3 font-light text-gray-500 dark:text-gray-400">
It is obviously not the same build quality as those very expensive watches. But that is like
comparing a Citroën to a Ferrari. This watch was well under £100! An absolute bargain.
</p>
<a
href="/"
class="block mb-5 text-sm font-medium text-blue-600 hover:underline dark:text-blue-500"
>Read more</a
>
<svelte:fragment slot="evaluation">19 people found this helpful</svelte:fragment>
</RatingComment>
```
<Htwo label="Review content" />
Use this component to show the review content from a user alongside the avatar, location, details, and the score inside a card element.
```svelte example hideScript
<script>
import { Review } from 'flowbite-svelte'
let review = {
name: 'Jese Leos',
imgSrc: '/images/profile-picture-2.webp',
imgAlt: 'jese leos',
address: 'United States',
reviewDate: 'January 20, 2022',
title: 'Spotless, good appliances, excellent layout, host was genuinely nice and helpful.',
rating: 8.79,
item1: 'Apartament with City View',
item2: '3 nights December 2021',
item3: 'Family',
};
</script>
<Review {review}>
<p class="mb-2 font-light text-gray-500 dark:text-gray-400">
The flat was spotless, very comfortable, and the host was amazing. I highly recommend this
accommodation for anyone visiting Brasov city centre. It's quite a while since we are no
longer using hotel facilities but self contained places. And the main reason is poor
cleanliness and staff not being trained properly. This place exceeded our expectation and will
return for sure.
</p>
<p class="mb-5 font-light text-gray-500 dark:text-gray-400">
It is obviously not the same build quality as those very expensive watches. But that is like
comparing a Citroën to a Ferrari. This watch was well under £100! An absolute bargain.
</p>
<svelte:fragment slot="item1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4 mr-2"><path fill-rule="evenodd" d="M4.5 2.25a.75.75 0 000 1.5v16.5h-.75a.75.75 0 000 1.5h16.5a.75.75 0 000-1.5h-.75V3.75a.75.75 0 000-1.5h-15zM9 6a.75.75 0 000 1.5h1.5a.75.75 0 000-1.5H9zm-.75 3.75A.75.75 0 019 9h1.5a.75.75 0 010 1.5H9a.75.75 0 01-.75-.75zM9 12a.75.75 0 000 1.5h1.5a.75.75 0 000-1.5H9zm3.75-5.25A.75.75 0 0113.5 6H15a.75.75 0 010 1.5h-1.5a.75.75 0 01-.75-.75zM13.5 9a.75.75 0 000 1.5H15A.75.75 0 0015 9h-1.5zm-.75 3.75a.75.75 0 01.75-.75H15a.75.75 0 010 1.5h-1.5a.75.75 0 01-.75-.75zM9 19.5v-2.25a.75.75 0 01.75-.75h4.5a.75.75 0 01.75.75v2.25a.75.75 0 01-.75.75h-4.5A.75.75 0 019 19.5z" clip-rule="evenodd" /></svg>
{review.item1}
</svelte:fragment>
<svelte:fragment slot="item2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4 mr-2"><path fill-rule="evenodd" d="M6.75 2.25A.75.75 0 017.5 3v1.5h9V3A.75.75 0 0118 3v1.5h.75a3 3 0 013 3v11.25a3 3 0 01-3 3H5.25a3 3 0 01-3-3V7.5a3 3 0 013-3H6V3a.75.75 0 01.75-.75zm13.5 9a1.5 1.5 0 00-1.5-1.5H5.25a1.5 1.5 0 00-1.5 1.5v7.5a1.5 1.5 0 001.5 1.5h13.5a1.5 1.5 0 001.5-1.5v-7.5z" clip-rule="evenodd" /></svg>
{review.item2}
</svelte:fragment>
<svelte:fragment slot="item3">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4 mr-2"><path fill-rule="evenodd" d="M8.25 6.75a3.75 3.75 0 117.5 0 3.75 3.75 0 01-7.5 0zM15.75 9.75a3 3 0 116 0 3 3 0 01-6 0zM2.25 9.75a3 3 0 116 0 3 3 0 01-6 0zM6.31 15.117A6.745 6.745 0 0112 12a6.745 6.745 0 016.709 7.498.75.75 0 01-.372.568A12.696 12.696 0 0112 21.75c-2.305 0-4.47-.612-6.337-1.684a.75.75 0 01-.372-.568 6.787 6.787 0 011.019-4.38z" clip-rule="evenodd" /><path d="M5.082 14.254a8.287 8.287 0 00-1.308 5.135 9.687 9.687 0 01-1.764-.44l-.115-.04a.563.563 0 01-.373-.487l-.01-.121a3.75 3.75 0 013.57-4.047zM20.226 19.389a8.287 8.287 0 00-1.308-5.135 3.75 3.75 0 013.57 4.047l-.01.121a.563.563 0 01-.373.486l-.115.04c-.567.2-1.156.349-1.764.441z" /></svg>
{review.item3}
</svelte:fragment>
<aside class="flex items-center mt-3 space-x-5">
<a
href="/"
class="inline-flex items-center text-sm font-medium text-blue-600 hover:underline dark:text-blue-500"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5 mr-1"><path d="M7.493 18.75c-.425 0-.82-.236-.975-.632A7.48 7.48 0 016 15.375c0-1.75.599-3.358 1.602-4.634.151-.192.373-.309.6-.397.473-.183.89-.514 1.212-.924a9.042 9.042 0 012.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 00.322-1.672V3a.75.75 0 01.75-.75 2.25 2.25 0 012.25 2.25c0 1.152-.26 2.243-.723 3.218-.266.558.107 1.282.725 1.282h3.126c1.026 0 1.945.694 2.054 1.715.045.422.068.85.068 1.285a11.95 11.95 0 01-2.649 7.521c-.388.482-.987.729-1.605.729H14.23c-.483 0-.964-.078-1.423-.23l-3.114-1.04a4.501 4.501 0 00-1.423-.23h-.777zM2.331 10.977a11.969 11.969 0 00-.831 4.398 12 12 0 00.52 3.507c.26.85 1.084 1.368 1.973 1.368H4.9c.445 0 .72-.498.523-.898a8.963 8.963 0 01-.924-3.977c0-1.708.476-3.305 1.302-4.666.245-.403-.028-.959-.5-.959H4.25c-.832 0-1.612.453-1.918 1.227z" /></svg>
Helpful
</a>
<a
href="/"
class="inline-flex items-center text-sm font-medium text-blue-600 hover:underline dark:text-blue-500 group"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5 mr-1"><path d="M15.73 5.25h1.035A7.465 7.465 0 0118 9.375a7.465 7.465 0 01-1.235 4.125h-.148c-.806 0-1.534.446-2.031 1.08a9.04 9.04 0 01-2.861 2.4c-.723.384-1.35.956-1.653 1.715a4.498 4.498 0 00-.322 1.672V21a.75.75 0 01-.75.75 2.25 2.25 0 01-2.25-2.25c0-1.152.26-2.243.723-3.218C7.74 15.724 7.366 15 6.748 15H3.622c-1.026 0-1.945-.694-2.054-1.715A12.134 12.134 0 011.5 12c0-2.848.992-5.464 2.649-7.521.388-.482.987-.729 1.605-.729H9.77a4.5 4.5 0 011.423.23l3.114 1.04a4.5 4.5 0 001.423.23zM21.669 13.773c.536-1.362.831-2.845.831-4.398 0-1.22-.182-2.398-.52-3.507-.26-.85-1.084-1.368-1.973-1.368H19.1c-.445 0-.72.498-.523.898.591 1.2.924 2.55.924 3.977a8.959 8.959 0 01-1.302 4.666c-.245.403.028.959.5.959h1.053c.832 0 1.612-.453 1.918-1.227z" /></svg>
Not helpful
</a>
</aside>
</Review>
```
<Htwo label="Props" />
The component has the following props, type, and default values. See <A href="/pages/types">types
page</A> for type information.
<h3 class='text-xl w-full dark:text-white py-4'>Rating</h3>
<TableProp header={propHeader} {divClass} {theadClass}>
<TableDefaultRow {items} rowState='hover' />
</TableProp>
<h3 class='text-xl w-full dark:text-white py-4'>AdvancedRating</h3>
<TableProp header={propHeader} {divClass} {theadClass}>
<TableDefaultRow items={items2} rowState='hover' />
</TableProp>
<h3 class='text-xl w-full dark:text-white py-4'>ScoreRating</h3>
<TableProp header={propHeader} {divClass} {theadClass}>
<TableDefaultRow items={items3} rowState='hover' />
</TableProp>
<h3 class='text-xl w-full dark:text-white py-4'>RatingComment</h3>
<TableProp header={propHeader} {divClass} {theadClass}>
<TableDefaultRow items={items4} rowState='hover' />
</TableProp>
<h3 class='text-xl w-full dark:text-white py-4'>Review</h3>
<TableProp header={propHeader} {divClass} {theadClass}>
<TableDefaultRow items={items5} rowState='hover' />
</TableProp>
<Htwo label="References" />
<P>
<A href="https://flowbite.com/docs/components/rating/" target="_blank" rel="noreferrer" class="link"
>Flowbite Rating</A
>
</P>