Skip to content

NewMCP server for your coding agent. Set it up ›

Nexus UI
Get Pro

Gold Star Rating, animated React component

A five-star rating made of real 3D gold stars. Each star is a faceted solid with twenty flat faces, turned, sorted and shaded every frame like polished metal, with a softbox glint that runs across the faces as they move; empty stars are brushed silver. Choose a score and the stars up to it spin round one after another and come out gold, each with a metallic ting a step higher, a little pop and a sparkle, while the rest spin back to silver. The stars lean towards your pointer, lift up to the one you point at as a preview, and turn slightly while they wait so the light keeps moving. It is a radio group with arrow keys, Home and End, and the score in a polite live region.

  • Pro
  • Inputs & Controls
  • Hover
  • 3D
  • Spring

Each star that turns gold rings a metallic ting a step higher than the last, with a faint whoosh as it spins; stars going back to silver play a soft low note. Sound is off on this site until you switch it on.

Play with it

Move the controls and watch it change. Copy code gives you a snippet with only the props you changed.

Rate your order

Tap a star
No score yet

Props

PropTypeDefaultWhat it does
valuenumber—The score, 0 to 5, when you control it. Leave it out to let the component keep its own.
defaultValuenumber0The starting score when the component keeps its own.
onChange(value: number) => void—Called with the new score, 0 when a star is clicked again to clear it.
questionstring"Rate your order"The line above the stars.
labels[string, string, string, string, string]["Poor", "Fair", "Good", "Great", "Excellent"]The word shown for each score, 1 to 5.
enableSoundbooleantrueThe metallic tings, scored to the motion. They also follow the site-wide sound switch.
volumenumber0.8Sound level, 0 to 1.
autoplaybooleanfalseScores four, then two, then five by itself until the visitor touches it. Off by default, so a copied component reacts only to the visitor. Never runs under reduced motion.
classNamestring—Extra classes for the card.

Add it to your project

  1. 1

    Set up your project once

    You need a Next.js project with Tailwind CSS and the @/ import alias. In its root folder, run this once. It creates components.json and the cn() helper in src/lib/utils.ts:

    npx shadcn@latest init -d

    Starting from nothing? The Quick Start walks through the whole thing.

  2. 2

    Connect the registry with your API key

    Gold Star Rating is a Pro item, so the CLI has to send your API key. Do this once per project:

    1. Create a key at nexus-ui.com/dashboard/api-key. Copy it straight away: it starts with nxs_ and is shown only once.
    2. In your project root, next to package.json, create a file named .env.local with this line, using your own key:
      NEXUS_API_KEY=nxs_your_key_here
    3. Open components.json and add this entry inside the outermost braces, next to "aliases". Leave {name} and ${NEXUS_API_KEY} exactly as written; the CLI fills them in:
      "registries": {
  "@nexus-labs": {
    "url": "https://www.nexus-ui.com/api/registry/{name}",
    "headers": {
      "Authorization": "Bearer ${NEXUS_API_KEY}"
    }
  }
}

How Gold Star Rating works

Five faceted gold stars, solid and lit like polished metal. Each star is a real three dimensional bipyramid of twenty flat faces. Every frame each face is turned, tested for whether it faces you, sorted far to near, and coloured by the studio it reflects: bright from above, dark from the floor, with a softbox glint that flashes across the faces as they turn. Empty stars are brushed silver.

The source, the install command and the build prompt come with Pro.

Gold Star Rating questions

Does it make sound, and how do I turn it off?

Each star that turns gold rings a metallic ting a step higher than the last, with a faint whoosh as it spins; stars going back to silver play a soft low note. Sounds are synthesised with the Web Audio API, so there are no audio files, and they only play after a click or key press. Pass `enableSound={false}` to silence this component, or call `setSoundsEnabled(false)` from `@/lib/ui-sounds` to switch every sound off at once. The CLI installs `@/lib/ui-sounds` with the component.

Guides

More inputs & controls