ProUnlock everything for $49.99 a year, or $79.99 once. See plans ›

Nexus UI

Dart Rating, animated React component

Rate something from 1 to 10 by throwing a dart. Press and hold on the board to aim: the reticle wobbles more the longer you hold while a power meter fills, and letting go throws. The ring the dart lands in is the rating, a score and a word appear under the board, and throwing again pulls the old dart out. Number and arrow keys throw a perfect dart straight to that ring, and the board is a real slider for screen readers.

  • Free
  • Inputs & Controls
  • Spring

Play with it

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

How was your delivery?

Order #4821 · arrived 12:40

Press and hold on the board to aim, then let go. Or press 1 to 0.

Props

PropTypeDefaultWhat it does
autoplaybooleanfalsePlays itself with a ghost pointer until the visitor touches the card. Off by default, so a copied component reacts only to the visitor. Never runs under reduced motion.
classNamestring—Extra classes for the outer 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

    Run this once per project. It writes the Nexus UI entry into components.json for you:

    npx shadcn@latest registry add "@nexus-labs=https://www.nexus-ui.com/api/registry/{name}"

    Type it exactly as shown. {name} is filled in by the CLI with the component you ask for, so you never replace it.

  3. 3

    Add the component

    Run this from your project root. It adds the component, the helpers it imports and its npm packages.

    npx shadcn@latest add @nexus-labs/dart-rating
  4. 4

    Check what was added

    With a project made as in the Quick Start (a src/ folder), these files land in it:

    components/
    dart-rating/
    dart-rating.tsx
    index.ts
  5. 5

    Copying by hand? Skip the registry

    Instead of steps 2 and 3 you can copy the files yourself, with no registry and no API key. Step 1 still applies, so that cn() exists. Install the packages:

    npm install framer-motion

    Then show the source and create each file at the path it gives:

  6. 6

    Use it in a page

    Installing only adds the files. Import the component in a page and render it. The Usage tab on the preview shows a fuller example with props:

    // src/app/page.tsx
import { DartRating } from "@/components/dart-rating";

export default function Page() {
  return (
    <main>
      <DartRating />
    </main>
  );
}

More inputs & controls