Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Shadcn Rating for React Radix UI

Show reviews and ratings in a visual format.

Framework
UI library

Radix UI does not include this primitive, so this page uses the Ark UI component. The visuals match the Ark UI version.

VV

Vinicius Vicentini

Tuestday morning at Mercado N.89

Rate your driver

Installation

bunx --bun shadcn@latest add https://kit.dev/r/radix/rating.json

Anatomy

Rating
├── RatingLabel
├── RatingItem
└── RatingControl

Usage

import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Rating } from "@/components/ui/rating";
<Card className="w-full max-w-xs">
  <CardHeader className="flex flex-col items-center gap-3 text-center">
    <Avatar size="lg">
      <AvatarImage alt="Driver" src="https://github.com/vinihvc.png" />
      <AvatarFallback>VV</AvatarFallback>
    </Avatar>
    <div>
      <CardTitle className="text-base">Vinicius Vicentini</CardTitle>
      <CardDescription> Tuestday morning at Mercado N.89</CardDescription>
    </div>
  </CardHeader>
  <CardContent className="space-y-2 text-center">
    <p className="font-medium text-sm">Rate your driver</p>
    <Rating />
  </CardContent>
  <CardFooter>
    <Button className="w-full">Submit</Button>
  </CardFooter>
</Card>

Accessibility

KeyDescription
Space
Activate the focused control.
ArrowLeft
Move left.
ArrowRight
Move right.
ArrowUp
Move left.
ArrowDown
Move right.
Home
Go to the start.
End
Go to the end.
Enter
Activate the focused control.

Demos

Controlled

Count

Custom Color

Custom Icon

Custom Size

Disabled

Half Star

Readonly

Testimonial

API Reference

Rating

div

PropType
AttributeType

RatingItem

span

PropType
indexnumber
AttributeType

RatingControl

div

PropType
AttributeType

useRating