Skip to content

NewMCP server for your coding agent. Set it up ›

Nexus UI
Get Pro

Neon Star Rating, animated React component

A star rating in neon: five star-shaped glass tubes on a brick wall, each bent round ten corners and held off the bricks by two small brackets. Off, they are grey glass. Choose a score and the tubes up to it strike one after another: a click from the transformer, a stutter of flickers with a crackle on each and a short buzz, then a steady amber glow that washes over the bricks around it. Lower the score and the rest drop out with a fading afterglow. Pointing at a star warms the tubes up to it, and now and then a lit tube stutters the way old neon does. It is a radio group with arrow keys, and the score is read out in a polite live region.

  • Pro
  • Inputs & Controls
  • Hover

Each tube strikes with a click from the transformer, a crackle on every flicker and a short electric buzz before it settles into a steady glow. 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.

How was dinner?

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.
questionstring"How was dinner?"The line above the stars.
labels[string, string, string, string, string]—The word shown for each score, 1 to 5.
enableSoundbooleantrueTransformer clicks, crackles and a short buzz as each tube strikes. They also follow the site-wide sound switch.
volumenumber0.8Sound level, 0 to 1.
autoplaybooleanfalseScores by itself until the visitor touches it. 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

    Neon 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 Neon Star Rating works

A star rating in neon: five star shaped tubes on a brick wall. Each star is one glass tube bent round ten corners, open at the bottom where its ends turn back into the wall at dark electrodes, held off the bricks by two small brackets and casting a faint shadow. Off, it is grey glass.

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

Neon Star Rating questions

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

Each tube strikes with a click from the transformer, a crackle on every flicker and a short electric buzz before it settles into a steady glow. 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.

More inputs & controls