Wallet
A leather card holder with three cards in it: tap it and the cards slide up and fan out, choose one and it rises to the top while its latest transactions fill in underneath, as Apple Wallet does.
Things to try
- Tap the holder. The cards slide up out of the front pocket, fanned so you can read each one, still tucked in at the bottom. Tap again and they slip back in.
- Choose a card. It rises to the top while the holder sinks out of the way, and its latest transactions arrive row by row in the space between.
- Make it your default. Flip the switch and the Default badge moves over to it.
Install
npx shadcn@latest add https://your-docs-site/r/wallet-stack.jsonDependencies
The install command adds these for you. If you copy the code by hand, install them yourself.
npm install @base-ui/react @remold-ui/react motionHow it works
- Springs, a beat apart. Every card and the holder are placed by Motion springs, staggered slightly, so each change reads as one movement rather than a jumble.
- Drawn leather. The holder is SVG: a pebbled grain from a noise filter, a burnished edge and close stitching. Nothing is an image.
- The default-card switch is Base UI's Switch.
The cards and transactions are made up.
Usage meter
A plan's usage on a billing page: bars fill as the month goes on, turn amber when you're running low and red once you're over, and upgrading makes every bar spring back down.
Amount input
An amount field where the digits you type rise into place and the separators slide to make room. Refused input gets a small shake, and going over your balance turns the field red while the line under it morphs to say by how much.