Add to Bag, animated React component

The add-to-cart moment, made physical. Press the button and the product lifts off and arcs through the air into the bag, which squashes as it lands while the badge rolls to the new count. The button folds into a quantity stepper, and taking one out hops it back out of the bag. The demo product is a stoneware mug ray-marched live in WebGL that you can drag to turn; give each colourway an image to show your own product photo instead. Point target at your header's bag icon and the product flies there. It handles the motion and the count; adding to a real cart is up to your onChange. Until you touch it, it adds, switches colour and removes by itself.

Pro
Cards
Spring
3D

Play with it

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

Kitchen

Drag to turn

Pour-Over Mug

Stoneware · 350 ml

$38

Sage

Add to Bag

Most you can add9

Currency

Add and remove 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
product	BagProduct	A stoneware pour-over mug in three colours	The product: name, detail, price and colourways. Each colourway has a name, a hex colour and an optional image URL.
max	number	9	The most that can be added.
target	RefObject<HTMLElement>	—	Your own bag icon to fly to. Without it the product flies to the bag in the card.
currency	string	"$"	The symbol shown before the price.
autoplay	boolean	false	Adds, switches colour and removes by itself until the first interaction.
onChange	(quantity: number, color: string) => void	—	Called with the new quantity and the chosen colour name.
className	string	—	Extra classes for the outer wrapper.

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
Add to Bag 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}"
    }
  }
}
```

Add to Bag, animated React component

Play with it

Pour-Over Mug

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

Add to Bag, animated React component

Play with it

Pour-Over Mug

Props

Add it to your project

Set up your project once

Connect the registry with your API key

More cards