Skip to content

New200 animated icons, 75 free. See the icons ›

Nexus UI

Mercury Switch, animated React component

Settings toggles whose knob is a bead of mercury, shaded per pixel like a real chrome drop: a bright softbox up top, a dark horizon line, a warm floor, a fine rainbow at the rim. Flip one and the bead does not slide, it reaches: the leading side pulls ahead on a neck that thins as it parts, the rest lets go and catches up, and it lands with a squash and a wobble. Drag it and it stretches after your finger. Switched on, the groove glows and the mercury picks up that colour underneath. Space or Enter flips the focused switch. Until you touch it, it flips them by itself.

  • Pro
  • Inputs & Controls
  • Spring

Each flip is a drop of liquid metal: a bloop that rises as the leading edge reaches across, a second, higher one as the rest catches up, a soft plop as it squashes into the end of the groove and a small chrome ring. Switching off is the same, falling. Each row has its own pitch, so three switches flipped in turn make a little run of notes, and taking hold of a bead to drag it gives a short, wet squeeze. 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.

Wi-FiConnected to Studio
Do Not DisturbOff
Low Power ModeOff

Props

PropTypeDefaultWhat it does
autoplaybooleanfalseFlips the switches by itself until the first touch. Held still under reduced motion.
volumenumber0.8Loudness of the sounds, 0 to 1.
onChange(id: string, on: boolean) => void—Called with the id of the switch (wifi, focus or power) and its new state.
enableSoundbooleantruePlays interface sounds on interaction. They follow the sound switch (setSoundsEnabled, on by default) and stay silent on hover. Autoplay makes the same sounds once the visitor has used the page. Pass false to silence this component.

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

    Mercury Switch 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}"
    }
  }
}

Mercury Switch questions

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

Each flip is a drop of liquid metal: a bloop that rises as the leading edge reaches across, a second, higher one as the rest catches up, a soft plop as it squashes into the end of the groove and a small chrome ring. Switching off is the same, falling. Each row has its own pitch, so three switches flipped in turn make a little run of notes, and taking hold of a bead to drag it gives a short, wet squeeze. 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