Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Map blocks

Pro

Branch Network Map Block for Ark UI

Eight bank branches and fourteen ATMs on a drawn street map; choose a branch in the table and spokes join it to its own ATMs, with services as badges and weekly withdrawals, and a layers toggle shows branches, ATMs or both.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Show a branch and the ATMs it looks after, with this branch network map for React with Ark UI. Quillbank, a retail bank, draws eight numbered square branches and fourteen circular ATMs on a street map of an invented town. A Table of the branches is the way in: each name is a button, and choosing one draws a solid spoke from the branch to each of its own ATMs, which fill in while the others stay hollow. Under the table a panel names the branch's services as Badges in words and lists its ATMs with their weekly withdrawals; a branch's total is the sum of its ATMs', and the table shows it with the ATM count. A Toggle Group shows branches, ATMs or both. The panel keeps room for three ATMs, so choosing never changes the length of the page. It's built from Table, Badge, Toggle Group and Guides, with a CSS entrance only. For banks, branch managers and network planning.

FAQ

Why are there no spokes in the Branches or ATMs layers?

A spoke needs both ends on the map, so spokes are drawn only when both layers are on. In the ATMs layer the chosen branch's ATMs still fill in, and the table and panel always say the same thing in words.

Where does the weekly figure come from?

It is the sum of the week values of the branch's ATMs in ATMS, formatted with a hoisted thousands helper. A branch with no ATMs would show 0; in your app add the counter figures to the branch.

How do I use my own branches?

Edit BRANCHES (a name, a number, services and a position in the 480 by 360 units) and ATMS (the branch id, a place, weekly withdrawals and a position). The map, the table and the panel read the same lists.

Can I use it without a mouse?

Yes. The branch names in the table are buttons with a pressed state, the toggle group is a labelled control, and the panel is a plain list. The squares and circles on the map are a pointer shortcut and are hidden from assistive technology.

What stays local in the demo, and how do I wire it up?

All of it. The town, branches and figures are invented and nothing is read from a core system. In your app load branches and ATMs from your estate system and the weekly counts from your ATM switch.

How does it look on a phone?

The map comes first at a fixed height, the toggle and the table follow at full width, and the panel keeps room for three ATMs, so choosing a branch never changes the length of the page.

All 100 map blocks