shadcn.io is not affiliated with official shadcn/ui
Backer Round Matrix About Block for React
A 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.
Installation
Overview
A backer matrix for React with Base UI, written for Cellwick, a fictional battery-analytics lab. A short header counts the backers and the rounds. Under it, a framed table lists each backer down the side and Seed, Series A and Series B across. A filled dot means they joined that round, a ring means they led it, and an empty cell means they sat it out. Picking a row shows the note they wrote, as a quotation under the table. The name column stays put while the rounds scroll on a narrow screen. The page's rails and top rule come from the Guides spine, and corner marks frame the table. It's built from Table and Guides, with a CSS entrance on the header and the table and your theme's tokens for every colour. For an about page that should show who was in which round, not a logo wall. The funds and the notes are example copy.
FAQ
How do I change the backers and the rounds?
The rounds are ROUNDS (Seed, Series A, Series B) and the backers are INVESTORS. Each backer has a name, a kind such as "Fund", a kindLabel such as "a fund", a thesis and a parts object. A part is "joined" or "lead" on seed, a or b. Leave a round out of parts and that cell reads as sat out. The first backer is picked when the page loads. The header counts both arrays.
What do the dot and the ring mean?
A filled dot is "Joined" and a ring with a centre dot is "Lead". An empty cell says "Sat out", heard and not seen. The legend above the table repeats the two marks as decoration, with the words beside them, so the marks in the cells stay the named ones. Each round in the example has one lead.
How do I pick a backer from the keyboard?
Picking a row replaces the quotation under the table and a polite status reads the name, the kind and the note.
The name is a button with aria-pressed. Tab moves between the names, and Enter or Space picks one. The table has a visually hidden caption.
How is the matrix read by a screen reader?
The heading is the section's only h2. Each cell is named by its column (the round) and its row (the backer). The kind, "Fund" or "Angel", sits under the name. The quotation is a figure whose caption names the backer. The lines are drawn by a layer hidden from assistive technology.
Related
- 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
A framed table of seven company figures for an open-startup tracker: last quarter, this quarter, the computed change and a thin bar toward each target, sortable by metric, change or progress.
- Pro
A payroll co-op's report of seven measures over four quarters in Financial and Operational groups, a sparkline on every row, footnotes, and a quarter picker that rings one column.
- Pro
Advisory Board About
Team and leadersAn advisory board for a legal-software company: five advisors in an accordion, each with the practices they cover, why they advise, and one piece of advice.
- Pro
Sortable Skills Matrix About
Team and officesA framed matrix of seven skills by five departments for a learning platform, each cell four dots, sortable by skill or department, with computed department averages in the footer row.
- Pro
A framed, sortable table of a product-feedback tool's seven-member customer council, with expertise badges, the year each member joined and an apply band with a Shine Button.