Bloom Gift Card, animated React component

A gift card with a flower bud on it. Tilt it with the pointer; press and hold to open it and the bud swells and trembles, then blooms in 3D, petal ring by petal ring, to show the amount in the middle with a puff of pollen. Let go early and it closes up again. Keyboard: hold Space or Enter on the button.

Pro
Cards
3D
Hover

Play with it

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

Petal & Co.

Gift card

For Sam

From Maya

•••• 2948

$50

Let go early and it closes back up.

Props

Prop	Type	Default	What it does
amount	number	50	The amount shown in the component.
currency	string	"$"	The currency shown in the component.
to	string	"Sam"	The to shown in the component.
from	string	"Maya"	The from shown in the component.
brand	string	"Petal & Co."	The brand shown in the component.
last4	string	"2948"	Last four of the card number.
holdFor	number	1.3	How long to hold, in seconds.
onClaim	() => void	—	Called when the visitor uses claim.
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
Bloom Gift Card 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}"
    }
  }
}
```

Bloom Gift Card, 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

Bloom Gift Card, 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 cards