OPUS/UI

Navigation

Rating

Star rating with hover preview, half steps, read-only mode, custom glyphs and slider-style keyboard support.

3 files · 135 locdeps: clsx, tailwind-merge
3.5 · Good

Installation

With the shadcn CLI, pointing at this platform’s registry:

npx shadcn@latest add https://opusui.131199999.xyz/r/rating.json

Or offline, straight from your opus55 checkout (copies every file it needs):

node ../tailwind_component/opus55/scripts/add.mjs rating

Usage

import { Rating } from "@/components/opus/ui/rating";

<Rating value={v} onValueChange={setV} allowHalf />

API

PropTypeDefaultDescription
value / defaultValue / onValueChangenumber—Rating.
countnumber5Glyphs.
allowHalf / readOnlyboolean—Half steps / display only.
icon / colorClassNameReactNode / string—Custom glyph and fill colour.

Command palette