Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Timeline blocks

Pro

Company History Timeline Block for Vue

A cap table's six events on a rail, each with a three-part ownership bar for founders, team and investors; press an event to pin its bar beside the latest and read how the split moved.

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.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

See how ownership changed with this company-history timeline for Vue with Ark UI. It is written for Sharepath, a fictional cap-table tool, and tells a company's story as dilution. A hairline frame with a plus mark on each corner holds a comparison figure over a rail of six events, newest first: Founding, Option pool, Seed, Series A, Team grants and Secondary sale. Each event is a button with a three-part ownership bar for founders, team and investors (foreground at full, over half and a quarter strength), the shares in all and the percentages beside it. The percentages are worked out from typed share counts by largest remainder, so they always add up to 100. Pressing an event pins it: the figure then draws the pinned bar above the latest one and says what moved, "Founders 100% → 61%, team 0% → 14%, investors 0% → 25%". Pressing it again unpins. It is built from Guides with native buttons (aria-pressed) and CSS for the bars. Example cap table.

FAQ

How do I change the events?

Edit EVENTS at the top of the file, oldest first: an id, a name, an ISO day on, a line of text and change, the shares added to founders, team and investors (negative when sold). buildHeld() adds them up into the holdings after each event.

Why do the percentages always add up to 100?

percentsOf() takes the whole-percent floor of each share and gives the missing points to the holders with the largest remainders. Rounding each share on its own can total 99 or 101; this cannot.

How does pinning work?

The pinned event is one string in state. The figure draws that event's bar and the latest event's bar with the same component and writes the change from the two percentage lists. Pressing the pinned event again clears it, and the figure then says to pick one.

What stays in the page?

Only the pin. Nothing is saved or sent, and the numbers are an example, not a record of any company. To make it real, build EVENTS from your cap-table export.

Is it accessible?

The bars are decoration: each event writes its percentages and its shares in text. Each event button has aria-pressed and shows the word Pinned, and the foot is a polite status line that names the pinned event.

How does it look on a phone?

The bars run the full width under the text of each event, and the comparison figure stacks its two bars with their labels at the start.

All 100 timeline blocks