shadcn.io is not affiliated with official shadcn/ui
Balance Chip Fintech Navbar Block for Ark UI
A navbar for a personal-banking app with a balance chip and an eye toggle that hides the amount behind dots without changing the chip's width, a vertical divider and the account's avatar.
Installation
Overview
A navbar for a banking app in React with Ark UI. The wordmark of Ledgerlane, a personal-banking app, leads, and Accounts, Cards, Payments and Insights follow as plain links, the current page marked by a foreground stroke on the bar's bottom edge. Past a vertical divider that meets the top rule sits a chip with the checking balance and an eye button: pressing it hides the amount behind dots, pressing it again shows it. The amount and the dots are drawn in one grid cell, so the chip is as wide as the amount either way and nothing in the bar moves, and the amount is one left-to-right span so the dollar sign never jumps in right-to-left layouts. A polite status says "Balance hidden." or "Balance shown: $24,310.55." The account's avatar and an account-type badge close the row. Below lg the links fold into a sheet from the top; the balance stays in the bar, and the wordmark shrinks to its icon on the narrowest phones. It's built from Toggle, Avatar, Badge, Navigation Menu, Sheet and Guides. The balance and the name are invented example data. For finance apps that put a number in the header.
FAQ
How do I show my own balance?
Edit BALANCE at the top of the file (a number of dollars) or replace it with a prop from your server; AMOUNT and the number of dots (DOTS) are derived from it. The figure shown here is example data, not an account.
Is the hidden amount really out of the page?
The amount stays in the page, marked aria-hidden and invisible, so the chip keeps its width; the dots are drawn on top. If the amount must never reach the browser while hidden, render only the dots and fetch the amount when the button is pressed.
How long does the choice last?
It is kept in the page's state, so it holds while you stay on the page and resets on reload. To remember it for a visit, write it to sessionStorage in hide and read it in an effect after mount.
How do screen readers use the toggle?
It is one toggle button named "Hide balance" whose pressed state says whether the amount is hidden; the eye icon changes with it, so the state is not colour alone. A polite status, empty until you press it, says "Balance hidden." or reads the amount out when it is shown again. While hidden, the dots are skipped.
How does it work on a phone?
Below lg a menu button opens a sheet from the top with the links and the account; the balance chip stays in the bar, its "Checking" label folding into the chip's name for screen readers below sm. On the narrowest phones the wordmark shows only its icon. It fits at 320 pixels.