Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Member Usage Breakdown Billing Block for Ark UI

A team's usage ranked by member as a Pareto: pick the metric (code indexed, requests or cost), see each share and a running-share bar, and flag members above a heavy-user line you set.

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.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Show a team admin who is driving the bill, inside your app, with this member usage breakdown for React with Ark UI. A hairline frame with a plus mark on each corner holds a toolbar and a ranked table. A Native Select chooses what to rank by (code indexed, requests or cost) and a Number Input sets the line for a heavy user. Each row gives a member's amount, their share and a running-share bar whose solid part is their own slice, so a sentence like "3 of 5 members account for 81% of the indexed code" can be read off the bars. Members above the line carry a flag and "Over 1,000 GB", and the heading counts them. A Shine Button sets a limit per member at that line, the only colored control. The bands are ruled by Guides. On a phone the email is dropped and the shares sit under the name. For team plans that bill by use.

FAQ

How do I use my own members and metrics?

Edit MEMBERS: each has a name, an email and one number per metric (gb, requests, cost). To add a metric, add its field to the members, a line to METRICS with its label, unit and step, its first heavy-user line to FIRST_LIMITS, and a case in amountOf and unitText. Ranking, shares and the sentence are derived, and shares are rounded so that they always add to 100.

What is the running share?

Members are ranked from the largest down, and each one's running share is the total of their share and every share above them. The bar draws the earlier members in a light tone and the member's own slice solid, so the bar ends where the running figure says. The sentence counts how many members it takes to pass 80%.

What does the heavy-user line do?

Any member whose amount is above it gets a flag and a text label, and the heading counts them. Each metric remembers its own line, so switching to Requests shows 50,000 and switching back brings your GB figure back. Set a limit per member only notes the figure on this page; in your app, send it to your limits API and show the response in the same status line.

Is the table accessible?

It has a caption that names the ranking, column headers, and each member's name as the row header. A flagged row says "Over" and the line in words, never a colour alone, and unflagged rows keep the space so rows don't change height when you move the line. The bars repeat the numbers and are hidden from assistive technology.

Can I sort by another column?

The select is the sort: the table is always ranked by the metric you choose, largest first, and ties are broken by name. That keeps the running share meaningful, since it only makes sense in ranked order.

How does it look on a phone?

The toolbar wraps, the table keeps two columns (the member and what they used) with their share and running share written under the name, and the limit button sits in a foot at the bottom of the screen.