Custom Shadcn Rating for React and Tailwind CSS. A customizable star rating component that supports read-only display and interactive input modes.
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.
import { Rating } from "@/components/reui/rating"<Rating rating={4.5} showValue editable />The main component for displaying and editing star ratings.
import { Rating } from "@/components/reui/rating"
export function Pattern() {
return <Rating rating={4} />
}
import { Rating } from "@/components/reui/rating"
export function Pattern() {
return <Rating rating={3.5} />
}
import { Rating } from "@/components/reui/rating"
export function Pattern() {
return <Rating rating={4.5} showValue={true} />
}
"use client"
import { useState } from "react"
import { Rating } from "@/components/reui/rating"
import { toast } from "sonner"
export function Pattern() {
const [productRating, setProductRating] = useState(0)
const handleRatingChange = (rating: number) => {
setProductRating(rating)
toast.success("Rated {rating} out of 5", {
description: `Rated ${rating} out of 5`,
})
}
return (
<div className="space-y-8">
<Rating
rating={productRating}
editable={true}
onRatingChange={handleRatingChange}
showValue={true}
/>
</div>
)
}
import { Rating } from "@/components/reui/rating"
export function Pattern() {
return (
<div className="flex flex-col items-center gap-4">
<Rating rating={4} size="sm" />
<Rating rating={4} />
<Rating rating={4} size="lg" />
</div>
)
}