Bar List Card
The analytics breakdown list - traffic by device, browser, OS, country, or source as ranked rows whose background bars encode each item's share, label on the bar, metric on the right. Our underline Tabs switch between lists, the metric caption sits on the same baseline, and long lists fade behind a small pill that expands the rest so the card grows with them.
Installation
Bar List Card is part of BoardUI Pro.
Dark mode ready - this component follows BoardUI semantic tokens automatically. Set up theme switching.
Tabbed lists
tabs is { id, label, items }[]; each item may carry an icon- flags, favicons, anything 16px. Shares are relative to the tab's total, bar widths to its largest item.
import * as Flags from "country-flag-icons/react/3x2";
<BarListCard metricLabel="Visitors" tabs={[ { id: "countries", label: "Countries", items: [ { label: "United States of America", value: 3120, icon: <Flags.US className="h-3 w-[18px] rounded-[2px]" /> }, { label: "India", value: 2160, icon: <Flags.IN className="h-3 w-[18px] rounded-[2px]" /> }, // … ], }, { id: "sources", label: "Sources", items: [{ label: "Direct", value: 5240 }, /* … */] }, ]} defaultTab="countries" onTabChange={(id) => track("breakdown_tab", { id })}/>Single list and mono
Pass items + title for one list without tabs, metric="value" to print raw numbers instead of shares, and mono for a single grey ink.
{/* One list, no tabs - a heading takes the tab strip's place */}<BarListCard title="Pages" metricLabel="Views" metric="value" items={pages} limit={4} />
{/* Single ink, mono grey bars */}<BarListCard mono />