shadcn.io is not affiliated with official shadcn/ui
Rounds Funding Timeline About Block for Ark UI
A funding history as three round cells, each with the amount, the lead investor, an undisclosed valuation and a segmented bar of where the money went whose four parts add to 100 percent.
Installation
Overview
A funding timeline for React with Ark UI, written for Cleatwise, a fictional spend-management company. Three rounds, Seed, Series A and Series B, sit one under another, each as a cell. The cell's first half says what the round was: a node, its name, a relative time ("Year 3"), the amount raised in large figures, who led it, and the valuation, which is stated as "Undisclosed" rather than invented. The second half says where the money went: a segmented bar of four uses (building the product, hiring, reaching customers, kept in reserve) whose parts always add up to 100 percent, and a legend that holds the same figures as text. On wide screens each cell's lines overshoot its corners and a short rail joins one round's node to the next; below lg the cells become bands ruled from rail to rail. A closing line adds up the rounds. It's built from Badge and Guides with your theme's tokens for every colour, uses foreground tones for the bar's four parts instead of palette hues, and has no state. For about pages and investor pages. The rounds, amounts, investors and splits are example data.
FAQ
How do I put in my own rounds?
The rounds are ROUNDS at the top of the file. Each has an amount in millions of dollars, a lead, a name, a relative when and four uses, each with a label and a share. The four shares of a round must add up to 100; the closing line adds up the amounts for you. The bar's four tones, darkest first, are TONES, and a use is matched to its tone by its position, so keep the uses in the same order in every round.
Why does it say the valuation is undisclosed?
Most companies don't publish it, and a block that invents one would be wrong the first time it's used. The line is plain text in RoundCell: replace "Undisclosed" with a figure if you share it, and label it as example data if it isn't real.
Can the bar be read without seeing it?
The bar is decorative and hidden from assistive technology. The legend under it is a description list with each use as a term and its percentage as the description, so a screen reader hears "Building the product, 55%". The tones are also never the only cue, because each swatch sits next to its label and figure.
Why are the bar's parts shades of one colour?
Primary is reserved for the main action of a page and palette colours change between themes, so the parts are the foreground colour at four strengths. The label and the percentage beside each swatch identify every part.