Add Currency Wallet to your Roblox project in one command. Requires Node 18+ and a Roblox project — run robloxui init first if you don't have one yet. See the docs.
bashnpx robloxui add currency-walletFirst time? Start with the documentation.
import { Currency Wallet } from "./src/client/ui/components/currency-wallet";local WalletService = require(script.Parent.WalletService)
local wallet = WalletService.new({ Coins = 500, Gems = 10 })
wallet:OnTxn(function(t) print(t.currency, t.delta) end) -- set onTxn field
wallet:Earn("Coins", 250); wallet:Spend("Gems", 5)Multi-currency wallet with earn/spend transactions and live UI. WalletService holds balances keyed by currency (Coins, Gems), validates Spend against funds without mutating on failure, and fires onTxn for popups. WalletBar renders currency pills that interpolate toward the real balance every frame (smooth counting).
by RobloxUI Team
| Author | RobloxUI Team |
| Framework | Roblox-TS + React-Luau |
| Category | Inventory |
| Dependencies | @rbxts/react |
| Theme Tokens |
| colors.primary, colors.primaryLight, colors.primaryDark, colors.secondary, colors.secondaryLight, colors.secondaryDark, colors.accent, colors.accentLight, colors.accentDark, colors.bg, colors.bgSecondary, colors.bgTertiary, colors.surface, colors.border, colors.borderLight, colors.glow, colors.text, colors.textPrimary, colors.textSecondary, colors.textMuted, colors.success, colors.successLight, colors.error, colors.errorLight, colors.warning, colors.info, colors.gold, colors.goldLight, gradients.primary, gradients.gold, gradients.health, gradients.mana, gradients.purple, gradients.card, gradients.surface, gradients.surfaceLight, spacing.3xs, spacing.2xs, spacing.xs, spacing.sm, spacing.md, spacing.lg, spacing.xl, radius.sm, radius.md, radius.lg, radius.xl |
| Last Updated | July 31, 2026 |