Rating

Show reviews and ratings in a visual format.

Vinicius Vicentini

Tuestday morning at Mercado N.89

Rate your driver

Installation


pnpm dlx shadcn@latest add @shark/rating


import { RatingGroup } from "@/components/ui/rating";


<RatingGroup />

Use value and onValueChange to control the rating programmatically.

Select the rating 5

❌

Use the readOnly prop to display a rating without interaction.

Use the disabled prop to prevent interaction and show a disabled state.

Use allowHalf to allow half-star selections.

Use the count prop to show more or less stars.

Display a read-only rating inside a testimonial card.

“This completely changed our workflow. Fast, reliable, and the team loves it. Would recommend to anyone.”

Vinicius Vicentini

Frontend Developer

Use the className prop to set the size of the rating.

Compose the rating with a different icon.

Override the filled color with className.

Root component.

Prop	Type	Default
`allowHalf`	`boolean`	`false`
`count`	`number`	`5`
`defaultValue`	`number`	`-`
`value`	`number`	`-`
`onValueChange`	`(details: ValueChangeDetails) => void`	`-`
`readOnly`	`boolean`	`-`
`disabled`	`boolean`	`-`
`className`	`string`	`-`

For a complete list of props, see the Ark UI documentation.

On This Page