HomeDocsComponentsBlocksChartsThemes
Introduction
  • Introduction
  • Installation
  • Themes
  • llms.txt
Components
  • Accordion
  • Alert
  • Alert Dialog
  • Amount
  • Aspect Ratio
  • Audio Player
  • Avatar
  • Avatar Upload
  • Badge
  • Banner
  • Breadcrumb
  • Button
  • Button Group
  • Calendar
  • Card
  • Carousel
  • Chart
  • Checkbox
  • Code Block
  • Collapsible
  • Color Picker
  • Combobox
  • Command
  • Context Menu
  • Copy Button
  • Countdown
  • Data Grid
  • Data Table
  • Date Picker
  • Date Range Picker
  • Description List
  • Device Mockup
  • Dialog
  • Direction
  • Dot Loader
  • Drawer
  • Dropdown Menu
  • Empty
  • Field
  • File Upload
  • Hover Card
  • Input
  • Input Group
  • Input OTP
  • Item
  • Kanban
  • Kbd
  • Label
  • Menubar
  • Meter
  • Multi Select
  • Native Select
  • Navigation Menu
  • Number Field
  • Pagination
  • Password Strength
  • Phone Input
  • Popover
  • Progress
  • Progress Circle
  • Radio Group
  • Rating
  • Resizable
  • Responsive Dialog
  • Rich Text Editor
  • Scroll Area
  • Segmented Control
  • Select
  • Separator
  • Sheet
  • Sidebar
  • Signature
  • Skeleton
  • Slider
  • Sonner
  • Sortable
  • Spinner
  • Stat
  • Stepper
  • Switch
  • Table
  • Tabs
  • Tag Input
  • Terminal
  • Textarea
  • Time Field
  • Timeline
  • Toast
  • Toggle
  • Toggle Group
  • Tooltip
  • Tree
  • Typography
  • Video Player
  • Window Mockup
AI
  • Message Scroller
  • Message
  • Bubble
  • Marker
  • Attachment
  • Questionnaire
  • Composer
  • Reasoning
  • Tool Call
  • Approval Card
  • Citations
Blocks
  • Airtable
  • Airtable Kanban
  • ClickUp List
  • ClickUp Kanban
  • Repeatable Group
  • Command Palette
  • Sign In and Sign Up
  • Availability Scheduler
  • AI Chat
  • Action Bar
  • Notion
  • Banking
  • Lineup Builder
  • Sports Score
  • Strava
  • Sheets
  • Notices
  • Settings
  • Billing
Utilities
  • motion
  • sounds
  • scroll-fade
  • shimmer
Another UI. Built on shadcn/ui with Phosphor icons.

Rating

PreviousNext

Stars to pick a score or show one. Supports half steps, a hover preview, sizes, a custom icon and full keyboard control.

Base UIReact AriaRadix UI
Radix UI
How was your bookkeeping review?
Great
Rate the Chilliwack office visit
3.5
4.6 from 128 client reviews
Would you recommend us?

Installation#

pnpm dlx shadcn@latest add https://anotherui.dev/r/rating.json

Usage#

import { Rating } from "@/components/ui/rating"
<Rating aria-label="Rate this review" defaultValue={4} />
 
<Rating value={score} onValueChange={setScore} allowHalf />
 
<Rating readOnly value={4.6} size="sm" />

Keyboard#

The stars are a radio group. Tab lands on the current score, the arrow keys move it, and Home and End jump to the ends. With allowHalf, each arrow press moves half a star.

Motion#

Hovering previews a score without setting it. Setting a score fills the star, pops it and bursts the same particles as the Like button. The burst and the fill stay still when reduced motion is on.

Read only#

readOnly draws the stars as one image with a label like "4.6 out of 5". Any fraction shows as a partly filled star.

Props#

  • value, defaultValue and onValueChange hold the score, from 0 to max.
  • max is the number of stars. It defaults to 5.
  • allowHalf splits each star into two steps.
  • clearable lets a second click on the current score clear it.
  • readOnly and disabled stop changes.
  • size is sm, default or lg.
  • icon takes any Phosphor icon, and tone picks the star or heart color.
  • getItemLabel names each step for screen readers. name and required work in forms.
Radio GroupReasoning

On This Page

InstallationUsageKeyboardMotionRead onlyProps