<Rating />Examples
Basic
<Rating count={5} defaultValue={3} />Sizes
Use the size prop to change the size of the rating component.
<div className="flex flex-col gap-2">
<Rating size="xs" />
<Rating size="sm" />
<Rating size="md" />
<Rating size="lg" />
<Rating size="xl" />
</div>ReadOnly
Use the readOnly prop to make the rating component read-only.
<Rating readOnly count={5} defaultValue={3} />Label
Use the label prop to add a label to the rating component.
<Rating label="Rating" count={5} defaultValue={3} />Label Position
Here's an example of how to change the label position to the right.
<Rating label="Rating" labelPlacement="end" />Half Start
Use the allowHalf prop to allow half-star ratings.
<Rating allowHalf count={5} defaultValue={3.5} />Color
Use the colorPalette prop to change the color of the rating.
gray
orange
teal
green
red
<div className="grid grid-cols-[8ch_1fr] items-center gap-y-2">
<Text>gray</Text>
<Rating colorPalette="gray" count={5} defaultValue={3} />
<Text>orange</Text>
<Rating colorPalette="orange" count={5} defaultValue={3} />
<Text>teal</Text>
<Rating colorPalette="teal" count={5} defaultValue={3} />
<Text>green</Text>
<Rating colorPalette="green" count={5} defaultValue={3} />
<Text>red</Text>
<Rating colorPalette="red" count={5} defaultValue={3} />
</div>Testimonial
Use the rating component to show testimonials.
Amer is a great software engineer. He is very professional and knowledgeable.
Matthew Jones
CTO, Company
<div className="flex max-w-sm flex-col gap-2">
<Rating count={5} defaultValue={5} readOnly colorPalette="orange" />
<Text className="text-fg-default">
Amer is a great software engineer. He is very professional and knowledgeable.
</Text>
<div className="flex items-center gap-2">
<Avatar
src="https://randomuser.me/api/portraits/men/70.jpg"
size="md"
/>
<div>
<Text className="text-fg-default">Matthew Jones</Text>
<Text>CTO, Company</Text>
</div>
</div>
</div>