shadcn.io is not affiliated with official shadcn/ui
Royalty Tracker Music Block for React
A royalty statement with an editable rate per stream on five invented platforms, earnings worked out in cents, six monthly columns stacked by platform, a payout history and an Export statement button that downloads a CSV.
Installation
Overview
Let a musician see what each stream is worth, with this royalty tracker for React with Base UI. Splitsong lists five platforms (all invented) for October 2026 in a hairline frame with a plus mark on each corner: each row has its streams, a rate per stream you type into an Input, and the earnings worked out in integer cents after every keystroke. A total row adds the streams, shows the average rate per stream and sums the earnings. A rate outside 0.0001 to 0.0100 is refused with a message, and the row keeps its example rate meanwhile. Below, six monthly columns stack the platforms at the rates above, and a payout table lists five payouts with a Paid or Processing glyph and word. The header's one action is a Shine Button inside a Download Trigger that saves the rows as shown as a CSV. It's built from Input, Download Trigger and Guides with a CSS entrance only. For royalty statements, artist dashboards and any rate-times-volume table. Example figures only.
FAQ
How do I load my own platforms and streams?
Edit PLATFORMS: each has an id, a name, an example rate in ten-thousandths of a dollar (34 is $0.0034) and months, six monthly stream counts from May to October. The table uses the last month, the chart all six. PAYOUTS holds the payout rows in cents. Earnings, the average and the totals are worked out from those with integer arithmetic, so nothing is typed twice.
How are rates parsed and rounded?
The text you type is read digit by digit into ten-thousandths of a dollar, never through floating point, and a row's earnings are streams times that rate, rounded half up to the cent. A rate that is not a number, or is outside 0.0001 to 0.0100, is flagged with aria-invalid, the status line says which platform and what is used instead, and the earnings keep using the example rate until you fix it.
What does Export statement save?
A real CSV file made in the page with the platform, streams, rate per stream and earnings as they are shown, using the rates you typed. The status line says the file was saved. In your app, generate the statement on the server so it matches what you invoice.
Are the platforms real?
No. Every platform name is invented, and the page says "Example figures only; platform names are invented." Nothing is fetched, and no store is named.