Vine Progress, animated React component

An onboarding checklist with a vine for a progress bar. The vine grows down to the step you're on, unfurling a leaf for every step behind it; untick one and it pulls back and the leaves drop. Finish them all and it reaches the bottom and flowers. Brush the leaves with the pointer and they rustle.

Pro
Loaders
Spring

Play with it

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

Get set up

1 of 5 done

Finish every step to see it bloom.

Props

Prop	Type	Default	What it does
steps	VineStep[]	DEFAULT_STEPS	The steps shown in the component.
defaultDone	string[]	["account"]	ids of steps that start out done
title	string	"Get set up"	The title shown in the component.
onChange	(done: string[]) => void	—	Called with the ids of every done step whenever one is ticked or unticked.
autoplay	boolean	false	Plays a demo by itself until the first touch. Held still under reduced motion.
className	string	""	Extra classes for the outer element.

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
Vine Progress 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}"
    }
  }
}
```

Vine Progress, animated React component

Play with it

Get set up

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

Vine Progress, animated React component

Play with it

Get set up

Props

Add it to your project

Set up your project once

Connect the registry with your API key

More loaders