Shadcn Rating

Browse 9 production-ready shadcn rating components for star ratings, decimal display, editable and read-only modes, emoji reaction ratings, interactive half-star, review summaries with progress bars, and text input review forms : a custom ReUI component built on accessible input primitives.

For AI Agents

Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.

When to use

Read only star scores at 3 sizes, with partial stars for averages such as 3.5 or 4.6
Star inputs that collect a whole star score in feedback and written review forms
Review summaries with a count bar per star level, and 5 step emoji scales for quick feedback

When not to use

A full product page section of buyer quotes, avatars and a ratings overview: use the Review blocks
A required score that keyboard and screen reader users must be able to set: use the Radio Group component
A score picked in half or finer steps rather than whole stars: use the Slider component

Agent notes

An editable Rating takes pointer clicks only: each star is a div with an onClick and no role, tab stop or key handler
Clicks send whole numbers from 1 to maxRating to onRatingChange; a decimal rating draws a partial star but cannot be picked
starClassName styles the showValue number, not the stars; recolor stars from className through the rating-star-filled slot

Third-party API docs

Sonner v2: API reference, docs, used by 1 of 9 examples

Markdownhttps://web.dev.reui.io/components/rating.md

MCPget_component("rating")

Installnpx shadcn@latest add @reui/rating

Full index for agents:llms.txtReUI MCP setup

Shadcn Rating: Stars, Emojis, and Review Summaries

ReUI Rating is a custom shadcn component for collecting and displaying user ratings. It renders star icons as radio inputs, making the selection accessible to keyboard users and screen readers via standard radio group semantics without custom ARIA roles.

9 components cover basic star rating, decimal display (3.7 stars), show-value labels, editable mode, size variants, full review summary with rating breakdown bars, interactive half-star rating, emoji reaction rating, and a combined rating with review text input.

The sections below explain the accessible radio input foundation, real use cases in e-commerce and SaaS, features, and composition with Progress, Textarea, and Button for complete review flows.

What is Shadcn Rating?

ReUI Rating is a custom shadcn component : not in the base shadcn/ui library. It renders a set of star icons backed by hidden radio inputs, giving native keyboard navigation (arrow keys within the group), correct labeling for screen readers, and standard form submission behavior without any custom ARIA management.

Read-only mode renders filled and unfilled star icons from a numeric value, supporting decimal display (a 3.7 score renders as 3 full stars and a 70% partial star). Editable mode adds hover preview : stars fill as the user moves the cursor : and fires onChange on click or keyboard selection.

Why Use Shadcn Rating?

Star ratings appear in product reviews, app store feedback, course quality scores, restaurant ratings, and service satisfaction surveys. An accessible implementation requires radio group semantics, hover state management, decimal rendering, and half-star support : all common requirements that custom span-based implementations get wrong. ReUI Rating handles all of these correctly.

The review summary component combines a large display rating with a breakdown of 5-star through 1-star counts as Progress bars : the standard component for product pages and app store listings. Pair with Shadcn Textarea for written review input and Shadcn Button for form submission.

Shadcn Rating Features

Radio Input Accessibility. Stars render as radio inputs in a fieldset. Screen readers announce the rating value and scale. Arrow keys navigate between star values. No custom ARIA roles are needed : native radio semantics handle all interaction.
Decimal Display. Read-only mode renders partial stars for decimal values using CSS clip-path. A 3.7 score shows 3 full stars and a 70% partial fourth star : matching the display convention of Amazon, Google, and App Store listings.
Editable Mode with Hover Preview. In editable mode, stars fill progressively as the user hovers. The hover value displays as a number label when show-value is enabled. Click or keyboard selection commits the rating.
Half-Star Rating. Interactive half-star mode divides each star icon into two click targets : the left half for .5 and the right half for the full integer value. Supports both display and editable modes.
Emoji Reaction Rating. Emoji variant replaces star icons with reaction emojis (😞 😐 😊 😁 🤩) for informal feedback, satisfaction surveys, and NPS-style quick polls.
Review Summary with Progress Bars. Review summary component combines an aggregate score, total review count, and per-star breakdown using shadcn Progress bars : the standard layout for product detail pages and app listings.
Size Variants. Small, default, and large size variants scale the star icon and touch target. Small fits inside table cells or card footers; large suits prominent hero review sections.
Rating with Review Text Input. Combined component pairs the rating input with a shadcn Textarea for written review content and a submit Button : a complete review form in a single composable component.

ReUI Rating: In-House Custom Shadcn Component

ReUI Rating is an in-house component built and maintained by the ReUI team as part of the ReUI open-source library. It is designed to integrate seamlessly into any shadcn/ui project : following the same copy-and-own installation model. The component source lands directly in your repository; you own it, extend it, and style it with your Tailwind CSS tokens. ReUI Rating is a custom accessible rating component not available in base shadcn/ui. Stars render as radio inputs in a fieldset for native keyboard navigation and screen reader support. Supports decimal display with CSS clip-path, editable hover preview, half-star interactive mode, emoji reaction variant, and a review summary with per-star Progress breakdown bars.

The component is available in two API flavors to match your primitive stack: a Radix UI version for teams using Radix-based shadcn primitives, and a Base UI version for teams on @base-ui/react. Both versions share identical visual output and Tailwind CSS styling : only the underlying headless primitive differs. ReUI maintains 22 such in-house components, all available in both Radix and Base UI versions, each with dedicated documentation covering the full component API, usage examples, and prop references.

Pair Rating with Shadcn Textarea and Shadcn Button for a complete review submission form. Use Shadcn Field for accessible labeling and validation error display.

Use Shadcn Progress for the per-star count breakdown bars in a review summary panel, and Shadcn Badge for verified purchase or review category labels.

Embed rating stars inside Shadcn Card for product listing grids, or in Shadcn Data Grid cells for rating columns in admin review management tables.

Review Blocks in ReUI Pro

The free examples above pair with 6 production ready review blocks in ReUI Pro, complete sections built on the same primitives and ready to copy into your app.

Review (6 blocks)Customer review and rating components with star ratings, comments, and review forms.

Browse all eCommerce blocks

Frequently Asked Questions

What is the difference between ReUI Rating and a standard Radix UI rating component?

ReUI Rating provides out-of-the-box support for half-star selections, smooth animations, and integrated form validation with react-hook-form. It also includes customizable icons and better accessibility defaults.

Can I use the rating component in read-only mode?

Yes. Set the disabled prop or readonly state to show a read-only rating display without interaction. Useful for displaying product reviews or user feedback.

How do I implement half-star ratings?

Pass step='0.5' to allow selection in 0.5 increments. Combine with custom icon rendering to show filled, half-filled, and empty star states.

How is the ReUI Rating component different from Radix vs Base UI versions?

The Radix version uses Radix primitives; the Base UI version is built on Base UI components. Both feature the same API and accessibility guarantees but differ in their underlying dependencies.

How do I validate a rating selection with react-hook-form?

Register the rating field and use Zod or Yup to ensure a value is selected. Show validation errors below the rating component using the Field component.

What ARIA attributes are included for screen reader support?

The component includes role='radio' on each star, aria-label describing the rating value, aria-describedby for additional instructions, and aria-required for mandatory fields.

Start building with ReUI Pro today.

Every Pro block, every style, and every future addition, with one license for unlimited projects.

Get All-Access

From $249, once. Lifetime updates.