Shadcn Rating

Custom Shadcn Rating for React and Tailwind CSS. A customizable star rating component that supports read-only display and interactive input modes.

Base UI Radix UI

Installation


pnpm dlx shadcn@latest add @byosui/rating

Usage

import { Rating } from "@/components/byosui/rating"

<Rating rating={4.5

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.

Phone Input Scrollspy

On This Page

Installation Usage Examples Decimal Show Value Editable Size API Reference Rating

"use client"

import { useState } from "react"
import { Rating } from "@/components/byosui/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/byosui/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>
  )
}

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.