52 Pro components and page blocks

Get Pro
uibrik

Wallet Stack

Pro

Preview

Customize

Deck
Peek64px
Duration0.55s
Bounce0.15
Width340px
Radius18px
Activity height252px
USD

Usage

import { WalletStack } from "@/components/uibrik/wallet-stack/wallet-stack";

<WalletStack />

Installation

Pro

Wallet Stack is a Pro component

Sign in to see the source, or install it with a license key. The live preview and props above are free to explore.

Sign inGet Pro

Install with a key

  1. Add the Pro registry to components.json:
    components.json
    {
  "registries": {
    "@uibrik-pro": {
      "url": "https://uibrik.com/r/pro/{name}.json",
      "headers": { "Authorization": "Bearer ${UIBRIK_LICENSE}" }
    }
  }
}
  2. Put your key in .env.local and add that file to .gitignore:
    .env.local
    UIBRIK_LICENSE=your-license-key
  3. Install it:
    Terminal
    npx shadcn@latest add @uibrik-pro/wallet-stack

Props

WalletStack
defaultView
Type "stack" | "fan"
"stack"
Arrangement to begin with.
hoverFan
Type boolean
true
Fan the deck out while a mouse is over it, and gather it back when it leaves, unless a card was opened. Taps still work.
peek
Type number
64
How much of each card shows in the fan.
duration
Type number
0.55
How long a move takes.
bounce
Type number
0.15
Springiness of a move. 0 settles without overshoot.
width
Type number
340
Widest a card gets. It shrinks to fit narrower parents.
radius
Type number
18
Corner radius of a card.
activityHeight
Type number
252
Tallest the activity list gets before it scrolls.
currency
Type "USD" | "EUR" | "GBP" | "INR" | "JPY"
"USD"
ISO 4217 code for balances and amounts.
cards
Type { id; name; last4; holder?; expiry?; kind?; balance?; background: string; ink?: "light" | "dark"; transactions? }[]
SAMPLE_CARDS
Cards from back to front. `background` takes any CSS colour or gradient; use ink "dark" on pale ones.
transactions
Type { id: string; title: string; subtitle?: string; amount: number; icon?: ReactNode }[]
–
A card's recent activity, shown when it's open. Negative amounts are money out.
locale
Type string
"en-US"
Locale for balances and amounts.
onViewChange
Type (view, card?) => void
–
Called with "stack", "fan" or "detail", and the open card in detail.
className
Type string
–
Classes for the wrapper.