Frozen Card, animated React component

The card screen of a banking app, where you can freeze your card. The “Aurora” debit card tilts toward your pointer with a glare and a holographic sheen, glowing in its own colours on a dark panel. Press Freeze card and feathery frost grows in from the corners and edges with a frosted bloom behind it, the print blurs and drains to icy slate blue, the card shivers, a Frozen tag replaces the network mark, and snow falls across the whole screen, some of it in front of the card; tilt it and the glare sparkles on the ice. Unfreeze and cracks race across the ice, it melts from the middle outwards with drips running off the bottom edge, and a warm glow brings the colour back. The eye on the card shows the full number. Keyboard: Tab to Freeze card (a switch) and press Space or Enter; the eye, Change limits, Transactions, back and more are buttons.

Pro
Cards
Hover
3D

Play with it

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

Debit card

Active

Spent this month$1,284.20 of $2,000

Frozen Card

Demo it 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
frozen	boolean	—	controlled frozen state
defaultFrozen	boolean	false	Starting value of frozen when you leave it uncontrolled.
onFrozenChange	(frozen: boolean) => void	—	Called when the visitor uses frozen change.
holder	string	"Maya Chen"	The holder shown in the component.
last4	string	"7481"	The last4 shown in the component.
number	string	—	the full number shown when the eye is pressed (a sample ending in last4 by default)
expiry	string	"08/29"	The expiry shown in the component.
title	string	"Debit card"	The title shown in the component.
spent	number	1284.2	spent so far this month and the monthly limit, for the meter under the card
limit	number	2000	The limit shown in the component.
currency	string	"$"	The currency shown in the component.
onLimits	() => void	—	Called when the visitor uses limits.
onDetails	() => void	—	the "more" button in the header
onTransactions	() => void	—	Called when the visitor uses transactions.
onBack	() => void	—	Called when the visitor uses back.
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
Frozen 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}"
    }
  }
}
```

Frozen 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

Frozen 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