Tethered Submit, animated React component

A sign-up button that explains why it is not ready. Hover, focus or press it and a hairline draws out to the first field that still needs something, which lights up with a one-line hint. Fill that field and the tether swings to the next. The button counts what is left and turns solid when nothing is.

Pro
Signup Forms
Hover
Spring

Play with it

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

Props

Prop	Type	Default	What it does
autoplay	boolean	false	Fills the form in by itself and shows the tether, until the visitor touches it. Never runs under reduced motion and pauses while the card is off screen.
onSubmit	(values: { name: string; email: string; password: string; terms: string }) => void	—	Called with the field values when the button is pressed with nothing left to fill.

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
Tethered Submit 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
NewSound
Peek Login
New3 variantsSound
Password Strength
2 variantsSound
Signup Form
Sound
Glass Login Stack

Tethered Submit, animated React component

Play with it

Create your account

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

Tethered Submit, animated React component

Play with it

Create your account

Props

Add it to your project

Set up your project once

Connect the registry with your API key

More signup forms