Rating

Installation

<CodeTabs> <TabsList> <TabsTrigger value="cli">CLI</TabsTrigger> <TabsTrigger value="manual">Manual</TabsTrigger> </TabsList> <TabsContent value="cli">

bash

npx shadcn@latest add @reui/rating

</TabsContent> <TabsContent value="manual"> <Steps>

<Step>Install the following dependencies:</Step>

bash

npm install @base-ui/react

<Step>Copy and paste the following code into your project.</Step>

</Steps> </TabsContent> </CodeTabs>

Usage

tsx

import { Rating } from "@/components/reui/rating"

tsx

<Rating rating={4.5} showValue editable />

Examples

Decimal

Show Value

Editable

Size

API Reference

The main component for displaying and editing star ratings.

Prop	Type	Default	Description
`rating`	`number`	-	Required. The current rating value. Supports decimal values for partial stars.
`maxRating`	`number`	`5`	Total number of stars to display.
`size`	`"sm" \| "default" \| "lg"`	`"md"`	The size of the stars and spacing.
`showValue`	`boolean`	`false`	Whether to show the numeric rating value next to the stars.
`editable`	`boolean`	`false`	Whether the rating can be changed by clicking on stars.
`onRatingChange`	`(rating: number) => void`	-	Callback fired when a star is clicked (if `editable` is true).
`starClassName`	`string`	-	Additional CSS classes for the numeric value container.
`className`	`string`	-	Additional CSS classes for the root container.