Custom Shadcn Rating for React and Tailwind CSS. A customizable star rating component that supports read-only display and interactive input modes.
import { Rating } from "@/components/reui/rating"
export function Pattern() {Installation
pnpm dlx shadcn@latest add @reui/rating
Usage
import { Rating } from "@/components/reui/rating"<Rating rating={4.5} showValue editable />Examples
Decimal
import { Rating } from "@/components/reui/rating"
export function Pattern() {Show Value
import { Rating } from "@/components/reui/rating"
export function Pattern() {Editable
"use client"
import { useState } from "react"Size
import { Rating } from "@/components/reui/rating"
export function Pattern() {API Reference
Rating
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. |
More Shadcn Rating components
Browse 9 production-ready Shadcn Rating components for dashboards, forms, and product UI. These examples use Base UI primitives from @base-ui/react and stay fully compatible with Shadcn Create so radius, color, and typography match your configured theme.
Browse all 9 Shadcn Rating components for copy-ready layouts, dashboards, and forms built with Tailwind CSS in the ReUI library.