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 follow the Radix UI implementation with accessible primitives from the Radix stack 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.