Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dashboard blocks

Pro

Cost Breakdown Dashboard Block for React

A cloud bill of 24 line items grouped by service, team or environment, with a stacked share bar, a ranked table with the change on last month and a named untagged slice.

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

Slice one month of cloud spend whichever way you read it, with this cost breakdown for React with Base UI. A hairline frame with a plus mark on each corner holds a stacked bar of the bill and a ranked table of the same groups, and a Segment Group in the header regroups both by Service, Team or Environment. Each row shows the group's share, its October cost and the change on September. Lines that carry no tag for the chosen field fall into a hatched Untagged group, and a status line says how much of the spend that is ("14% of spend has no team"), so missing tags show up as a number. It's built from Segment Group and Guides, with the bar and the table written by hand. For FinOps views and cost explorers.

FAQ

How do I fill it with my bill?

Edit ITEMS. Each line has a name, a service, a team and an env, plus its current and previous cost in dollars. Leave a tag empty to put the line in Untagged. Shares, ranks, totals, changes and the status sentence are all worked out from those lines, and to group by another field you add it to FIELDS and tagOf.

Why is there a hatched Untagged group?

Because untagged spend is the number a cost review actually acts on. It is ranked last whatever its size, drawn with a hatch instead of a grey so it can't be mistaken for a real group, and counted in the status line. When every line has a tag for the chosen field, the line says so.

Do the shares add up to 100?

Yes. They are whole percentages shared out by largest remainder, so the numbers in the table always total 100 and match the widths of the bar.

What stays local, and how do I wire it for real?

The line items are typed and nothing is billed or fetched. Grouping only changes what the page shows. To make it real, load the month's line items from your provider's cost export, pass each resource's tags through, and keep the previous month alongside for the change column.

How is the chart read by a screen reader?

The bar is a labelled image listing every group and its share, and the table beside it holds the same facts as real rows. Changing the grouping is announced in the status line.

How does it look on a phone?

The bar spans the width and the table keeps the group, its share and its cost; the change column drops. The table keeps the same height for all three groupings, so nothing jumps when you switch.

All 200 dashboard blocks