Liquid Send, animated React component

A message box whose send button is ringed in liquid metal, and it really sends. The ring is a tube of chrome drawn by a WebGL shader: stripes of light drift across it, split into short rainbows of blue, white and gold where a dark band ends, and it stays dull and grey until you type. Send, by click or Enter, and a bead of molten light races round the ring while the arrow lifts away; your message rises into the thread above in a dark bubble edged in the same chrome, and the ring flashes once before the arrow comes back. The sparkle writes a suggestion into the field letter by letter, and the paperclip attaches a real file. If WebGL is unavailable it falls back to a painted chrome ring. Until you touch it, it writes and sends a few messages on its own.

Pro
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.

Messages you send appear here.

Liquid Send

Placeholder

Write and send 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	Writes and sends a few messages by itself until the first touch. Held still under reduced motion.
onSend	(text: string, file?: string) => void	—	Called with the message text and, if one was attached, the file name.
placeholder	string	"Message"	Placeholder shown in the empty field.

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
Liquid Send 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
Folder Tree
Pro
New
Context Menu
Pro
New
Consent Dock
Pro
New
Liquid Pagination

Liquid Send, 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

Liquid Send, 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