Components

Rating

Star rating with slider semantics: hovering previews the fill sweeping up to the pointer with a tiny per-star stagger, clicking commits with a pop on the chosen star, and arrow keys adjust the value in steps (halves with `allowHalf`).

3.5 of 5 — hover sweeps, halves count.

Install

Copies the component source — plus its small internal deps — into your project. You own the code from the first minute.

terminal

npx lumora-ui@latest add rating

Import

Using the workspace package instead? Deep imports keep cold starts lean; the barrel is fully tree-shakable either way.

app/page.tsx

import { Rating } from "@lumora/ui/components/rating";
// or from the barrel:
import { Rating } from "@lumora/ui";

Props worth knowing

count sets the stars (default 5); works controlled via value/onValueChange or uncontrolled via defaultValue. allowHalf enables half-star steps, readOnly locks it to display, and arrow keys adjust the value from the keyboard. Props extend the natural HTML element, so className, event handlers, and aria attributes pass straight through.