shadcn.io is not affiliated with official shadcn/ui
Company By Quarter Startup Founder Profile Block for Svelte
A startup founder profile with a slider over eight quarters that moves four tiles, a revenue line drawn up to the chosen quarter and a milestone list marked Reached, Next or Later, all from one typed row per quarter.
Installation
Overview
Let a founder show how the company looked at any point, with this startup-founder profile for Svelte with Ark UI. A compact header holds the title and one sentence, and the hairline frame under it opens on the founder: initials, name, role, place and a sample badge. A Slider walks eight typed quarters; each stop moves four tiles (annual recurring revenue, customers, the team and the milestones reached), each with a note on the change since the quarter before. A line of revenue is drawn up to the chosen quarter, with the rest left as a dashed trace so the scale never changes, and the milestone list reads Reached, Next or Later for that quarter, with a glyph and a word so it never rests on tone. The status line states the same row in a sentence. There are no rounds and no investors here. The founder, the company and every figure are invented samples. For a founders' profile service, an about page or any profile that tells the story of growth.
FAQ
How do I fill it with my own company?
Edit QUARTERS (a label, the ARR in thousands of dollars, the customers and the team for each) and MILESTONES (a line and the index of the quarter it was reached in). The tiles, the notes, the drawn line and the Reached, Next and Later words are all worked out from those rows. The slider's range follows the length of QUARTERS.
How does a milestone become Next?
A milestone is Reached when its quarter is on or before the chosen one. The first milestone after that is Next, and the rest are Later. Because the word comes from the data, moving the slider back in time shows what was still ahead then.
Why is the line dashed after the chosen quarter?
So the chart keeps one scale. The full line is always drawn as a quiet dashed trace, and the solid line and its dot run only to the chosen quarter, which shows how far the company had come without the picture changing size.
What stays local in the demo?
All of it: the company and its numbers are a typed sample and nothing is fetched or sent. Label figures like these as examples, and in your own app say which are audited and which are the founder's own.
Is it accessible, and how does it look on a phone?
The slider has a name and reads each stop as its quarter, the drawing is decoration with the figures as text, and the status line is a polite live region present from the start. On a phone the four tiles sit two by two and the chart gets shorter. Figures and names keep their reading order in a right-to-left page, and the chart stays left to right.