Wensity

Star Rating

React star rating with half stars, drag to rate, and cut stars that catch the light.

star ratingratingrating inputreviewshalf starform
Star Rating component preview

Overview

Star Rating is a React and Tailwind CSS star rating input with half stars, in Next.js or any React app. The default cut style splits each star into ten facets lit by a light that follows the pointer; classic draws soft rounded stars. One fill level glides along the row, so half stars and read only values like 4.7 render exactly. Hovering lower tints the stars you would drop; on touch, drag to rate. Screen readers get a slider with arrow, Home, End and number keys. Clicking the current rating clears it; set allowClear to false on required fields.

Installation

Run the following command

~/your-project
pnpm dlx wensity@latest add star-rating

Usage

Import StarRating from @/components/wensity/star-rating and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx
import { useState } from "react";
import { StarRating } from "@/components/wensity/star-rating";


export default function Example() {
  const [rating, setRating] = useState(4.5);


  return (
    <StarRating
      value={rating}
      onValueChange={setRating}
      precision={0.5}
      size={36}
    />
  );
}

Props

PropTypeDefaultDescription
valuenumber-Controlled rating. Pair it with onValueChange.
defaultValuenumber0Initial rating when uncontrolled.
onValueChange(value: number) => void-Called with the new rating each time one is picked.
onHoverChange(value: number | null) => void-Called with the rating under the pointer, or null when it leaves.
maxnumber5Number of stars.
precision0.5 | 11Smallest step: whole or half stars.
sizenumber28Star size in pixels.
variant"cut" | "classic""cut"Cut draws faceted stars lit by a light that follows the pointer. Classic draws soft rounded stars.
tone"gold" | "silver" | "chili" | "rose" | "violet""gold"Material of the lit stars.
readOnlybooleanfalseShow a rating without letting anyone change it. Any fraction works.
allowClearbooleantruePicking the current rating again clears it.
namestring-Form field name. Adds a hidden input with the rating.

Related components

  • macOS Floating Dock component preview

    macOS Floating Dock

    A magnetic dock where icons inflate near the cursor and push their siblings aside.

  • Multi-Select Tag Input component preview

    Multi-Select Tag Input

    A tag input where pills pop in as you add them and slide out on remove, closing the gap without snapping the layout.

  • Shimmering Skeleton Wrapper component preview

    Shimmering Skeleton Wrapper

    One angled GPU sweep that travels across any placeholder geometry you wrap, never a separate shimmer stuttering per row.

  • Cool Button component preview

    Cool Button

    A dual-layer orbit glow that soft-spins around the edge of any button or link you wrap it around, at zero layout cost.