Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Revenue Breakdown Dashboard Block for Radix UI

September revenue as a stacked bar of six sources over a table that gives each source's share, change and contribution to growth in points, with the source you pick listing its lines.

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

See which source of revenue drove the growth, with this revenue breakdown panel for React with Radix UI. A hairline frame with a plus mark on each corner opens with one stacked bar of September 2026 revenue split into Subscriptions, Services, Marketplace fees, Licences, Add-ons and Other, each segment a button. Under it a table gives every source's amount, share, change and its contribution to the total growth in points, and the points add up to the total ("Subscriptions added 1.7 of the 3.6 points"). A Native Select in the header compares with the month before or the same month a year ago, and picking a source from the bar or the table lists its three lines in a band underneath. It's built from Native Select and Guides, with the bar and the table in plain markup. For finance consoles and revenue reviews.

FAQ

How do I fill it with my own sources?

Edit SOURCES. Each source has a name, a tone and three lines; each line holds this month's revenue, last month's and the same month a year ago. A source's amount is the sum of its lines, so the bar, the table, the shares and the points are all worked out from the lines and never typed twice.

What are the points?

A source's change divided by the previous period's total revenue, in percentage points of growth. They add up to the total growth, which is why they differ from each source's own change: a small source can grow fast and still add little. The tenths are rounded so the column sums to the total exactly. The note under the lines says which period they are measured against.

How do I pick a source without a pointer?

Each segment of the bar and each source name in the table is a real button with aria-pressed, so Tab reaches them and Enter or Space picks. The chosen source is underlined in the bar, tinted in the table, and a polite line says how many of the points it added.

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

Everything: the amounts are typed and nothing is read from a ledger. To make it real, group your revenue by source and by line for the two periods you compare and pass the same shape.

How does it look on a phone?

The bar stays full width, the table keeps the source, the amount and the points, and drops the share and change columns, and the lines of the picked source follow underneath.