Mercury Tabs, animated React component

A tab bar whose selection is a frame of liquid metal, and the frame moves like mercury. The active tab sits in a rounded frame of chrome whose reflection never stops sliding: highlights drift across it, split round its corners and meet again, with short rainbows of blue and gold where a dark band's edge passes. Pick another tab and the frame does not jump: its leading edge flows out toward the new tab first, the rest follows, the metal thinning and flattening as it stretches, and it arrives with a wobble, bulging a little before it settles. Hover a tab and the frame leans toward it; any tab the metal flows across swells beneath it with faint red and blue edges, like a drop of glass. The sun at the end flips the theme: the new look spreads out from the switch in a circle and the chrome starts reflecting a bright room. Arrow keys move between tabs. Until you touch it, it tours the tabs and flips the theme by itself.

Pro
Inputs & Controls
Hover
Spring

Play with it

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

Overview

Everything at a glance.

Mercury Tabs

Starting tab

Tour the tabs by itself

The code you copy has the settings you chose. Pro also gives you the one-line install and a build prompt to rebuild it with your AI tool.

Props

Prop	Type	Default	What it does
autoplay	boolean	false	Tours the tabs and flips the theme by itself until the first touch. Held still under reduced motion.
defaultTab	string	"overview"	The tab that starts selected: overview, insights, layers or wallet.
onChange	(id: string) => void	—	Called with the id of the tab that was just chosen.
theme	"dark" \| "light"	—	Control the theme yourself. Leave it out and the sun and moon switch keeps its own.
onThemeChange	(theme: "dark" \| "light") => void	—	Called with the theme the switch is asking for.
showHeading	boolean	true	The tab's name and caption above the bar. Turn it off to show the bar alone.
className	string	—	Extra classes for the outer frame, which is 300px tall and up to 720px wide.

Add it to your project

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
Connect the registry with your API key
Mercury Tabs 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}"
    }
  }
}
```

Pro
New
Liquid Send
Pro
New
Folder Tree
Pro
New
Context Menu
Pro
New
Consent Dock

Mercury Tabs, animated React component

Play with it

Props

Add it to your project

Set up your project once

Connect the registry with your API key

Add the component

Check what was added

Copying by hand? Skip the registry

Use it in a page

Mercury Tabs, animated React component

Play with it

Props

Add it to your project

Set up your project once

Connect the registry with your API key

More inputs & controls