Skip to content

NewMCP server for your coding agent. Set it up ›

Nexus UI
Get Pro

Bubble Tags, animated React component

A tag input where every tag is a soap bubble. Type a word and press Enter: a wand in the corner blows a bubble with the word inside, which swells, lets go with a wobble and drifts up to join the others. The bubbles hang in a sunlit garden, turning their colours, pressing softly against each other and leaning away when your pointer passes like a breath of air. Tap a bubble to remove its tag and it pops in a ring of droplets; Backspace in the empty field pops the newest. Every bubble is a real button and the field is a real input, so keyboards and screen readers get a plain list.

  • Pro
  • Inputs & Controls
  • Hover
  • Spring

A soft breath as the wand blows, a rising note as each bubble swells and lets go, and a bright little pop with a falling blip when you tap one. 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.

3 of 8

Props

PropTypeDefaultWhat it does
tagsstring[]—The tags, when you control the list. Leave it out to let the component keep its own.
defaultTagsstring[]["design", "coffee", "hiking"]The starting tags when the component keeps its own.
onChange(tags: string[]) => void—Called with the new list whenever a tag is added or popped.
maxnumber8The most tags it will hold.
labelstring"Topics"The field's label.
placeholderstring"Add a topic"The field's placeholder.
enableSoundbooleantrueSoft synthesised sounds, scored to the motion. They also follow the site-wide sound switch.
volumenumber0.8Sound level, 0 to 1.
autoplaybooleanfalseAdds and pops a few tags 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

    Bubble Tags 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 Bubble Tags works

A tag input where every tag is a soap bubble. Type a word and press Enter: the wand in the corner blows a bubble with the word inside it, which swells, lets go with a wobble and drifts up to join the others. They hang in a sunlit garden, turning their colours, pressing softly against each other, and leaning away when your pointer moves past like a breath of air.

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

Bubble Tags questions

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

A soft breath as the wand blows, a rising note as each bubble swells and lets go, and a bright little pop with a falling blip when you tap one. 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