shadcn.io is not affiliated with official shadcn/ui
Rounds Funding Timeline About Block for React
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 Base 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.
Related
- Pro
Horizontal Track Timeline About
TimelinesA company timeline drawn as one horizontal track: six milestones in relative time, each a cell of a ruled band with a dot on the rule, turning into a vertical rail on phones.
- Pro
Central Spine Timeline About
TimelinesA company timeline on a central spine: eight events that alternate sides on wide screens, a ring, square or dot node by kind, and a collapsible detail with what shipped.
- Pro
Bubble Plot Key Moments About
TimelinesA company's key moments as a bubble plot on a time axis, each bubble sized and raised by impact with the three that changed the company filled in, and the same moments as a ruled ordered list beneath.
- Pro
Backer Round Matrix About
Press and recognitionA backer matrix for a battery-analytics lab: a dot where a fund joined a round, a ring where it led, and that fund's note under the table when its row is picked.
- Pro
Growth Heat Table About
NumbersFive years of growth in one framed table: revenue, customers, team and NPS by year, each cell shaded by its size against its row, with a closing row of year-on-year revenue growth.
- Pro
Numbers Narrative About
Company storyA company's story told through four figures: a title stuck at the start while the reader scrolls, and rows that pair each large number with two sentences on how it happened.