Skip to content

NewMCP server for your coding agent. Set it up ›

Nexus UI
Get Pro

LED Button, animated React component

A button made of hundreds of tiny LEDs that spell its label like a dot-matrix sign, each lamp throwing a little glow onto its neighbours. A pool of blue light follows your pointer across the lamps. Press it and a ripple runs out from your finger, the label dissolves lamp by lamp into a scrolling marquee while sparks twinkle, and it settles into a green check. By default it copies a prompt to the clipboard; give it onPress and the marquee runs until your promise settles. The lamps are drawn in WebGL, with a plain button underneath for keyboards and screen readers.

  • Pro
  • Inputs & Controls
  • Hover

A click as you press, relays ticking while the marquee runs, and a chime when it settles on the check. 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.

Use this component
Copy a ready-made prompt for your AI editor.
Move over the lights, then press.

Props

PropTypeDefaultWhat it does
labelstring"Copy prompt"What the button says, in lights.
workingstring"Writing your prompt"What scrolls past while it works.
donestring"Copied"What it says when it's done.
copyTextstring | null—Copied to the clipboard on press. Set it to null to copy nothing.
onPress() => Promise<unknown> | void—Runs on press. If it returns a promise, the marquee runs until it settles (at least 1.4 s).
titlestring"Use this component"The card's heading.
descriptionstring"Copy a ready-made prompt for your AI editor."The line under the heading.
enableSoundbooleantrueA click, relays ticking while it works and a chime when it's done. They also follow the site-wide sound switch.
volumenumber0.8Sound level, 0 to 1.
autoplaybooleanfalsePresses itself now and then 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

    LED Button 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 LED Button works

A button made of LEDs. The pill is a panel of hundreds of tiny lamps, each with a lit core and a soft glow that spills onto its neighbours. The label is spelt in them like a dot-matrix sign. Move over it and the lamps under your pointer warm up work: the label dissolves lamp by lamp into a scrolling marquee while sparks twinkle across the panel, the prompt is copied to the clipboard, and the marquee dissolves into a green check and "Copied".

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

LED Button questions

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

A click as you press, relays ticking while the marquee runs, and a chime when it settles on the check. 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