Fabric UI Rating component 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 @fabric-ui/rating
Usage
import { Rating } from "@/components/fabric-ui/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 Rating components
Browse 9 production-ready Rating components for dashboards, forms, and product UI. These examples follow the Radix UI implementation with accessible primitives from the Radix stack and match the Fabric UI visual system.
Browse all 9 Rating components for copy-ready layouts, dashboards, and forms built with Tailwind CSS in the Fabric UI library.