shadcn.io is not affiliated with official shadcn/ui
Bubble Plot Key Moments About Block for React
A 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.
Installation
Overview
A key-moments timeline for React with Base UI, written for Pathmark, a fictional hiking-maps company. Eight moments are plotted on a framed chart: the time axis runs from "Year 1" to "Year 7", and each moment is a numbered bubble whose size and height say how much it changed the product, so the big ideas stand out at a glance. The three that changed the company, not just the map, are filled in; the rest are outlined. Under the plot the same eight moments are an ordered list in ruled rows, each with its number, time, title and a sentence, and a "Changed us" badge on the filled three. The plot is a hand-drawn SVG with no chart library, hidden from assistive technology because the list holds the same information in text. On a phone the plot scrolls sideways inside its frame, with a focus ring and a name so a keyboard can scroll it, while the list stays in place. Times are relative, never a calendar year. It's built from Guides and Badge with your theme's tokens for every colour. The moments and their impact scores are example data.
FAQ
How do I change the moments and their impact?
The moments are MOMENTS at the top of the file. Each has an at (its place on the time axis, where 1 is the start of Year 1 and 7 the start of Year 7, so 2.8 is late in Year 2), an impact from 1 to 10 that sets the bubble's size and height, a when label, a title and a description. Set pivotal on the moments that changed the company. The bubbles are numbered by their order in the list, so keep it in time order.
Can a screen reader get the same information as the plot?
Yes. The plot is decorative and hidden from assistive technology, and the ordered list below it carries every moment with its time, title and sentence, and says "Changed us" on the three that did. The caption explains how to read the plot for sighted users.
What happens to the plot on a phone?
It keeps its size so the bubbles stay readable, and scrolls sideways inside its own frame. The frame can take focus, so a keyboard user can scroll it with the arrow keys, and it has a name that says so. The list under it is a normal column and never scrolls sideways; nothing overflows the page at 320 pixels.
Does the time axis flip in a right-to-left layout?
No. A time axis reads in one direction wherever it is, so the plot is fixed left-to-right, while the list and the heading follow the page direction.
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
A product's history as a version scrubber: a stepped slider from v1 to v6 grows a drawing of the app panel by panel while two notes say what changed and who it helped.
- Pro
Rounds Funding Timeline About
TimelinesA 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.
- Pro
Chaptered Origin Story About
Company storyA company's origin story as four long chapters of prose beside a sticky chapter index that follows the reader, turning into a row of chips on phones.
- 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.