Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

About blocks

Pro

Backer Round Matrix About Block for Radix UI

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.

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

A backer matrix for React with Radix 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.

How does it fit on a phone?

The table scrolls sideways inside a labelled region that a keyboard can focus, and the backer names stay pinned at the start. The quotation wraps under the table at the full width of the column. In a right-to-left layout the pinned column moves to the other side.

What moves, and what happens with reduced motion?

The header and the table fade up once on load. The quotation sits lower, so it does not animate, and picking a row swaps the note without an animation. With reduced motion the entrance is off. Nothing loops and nothing plays on its own.

All 150 about blocks