Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Git Review Activity Dashboard Block for Svelte

A matrix of six authors by five reviewers with the reviews each gave in eight weeks, a Reviews or Approvals switch, the share done by the top two reviewers, and the pull requests behind a pressed cell.

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

Overview

See who reviews whom on your team with this review matrix for Svelte with Ark UI. A hairline frame with a plus mark on each corner holds a Hashwork grid of six authors in rows and five reviewers in columns. Each cell is the number of reviews that reviewer gave on that author's merged pull requests in eight weeks, in a five-step ramp of the foreground colour with the number inside, and the row and column totals are written out. The header works out how concentrated the reviewing is ("Two reviewers did 70% of the reviews") and names them. A Toggle Group switches every cell between Reviews and Approvals. Pressing a cell lists that pair's pull requests in the side cell, with the title, the size as added and removed lines and the days to approval. It's built from Toggle Group, Empty and Guides, with the matrix as a native table. For engineering leads, review culture and onboarding.

FAQ

How do I use my own counts?

Edit AUTHORS, REVIEWERS and REVIEWS, one row per author and one column per reviewer. Approvals are worked out from RATE, the share of each reviewer's reviews that were approvals; replace it with a second matrix if you have the figures. The concentration, the totals and the colour steps all follow.

How do I move around the matrix?

The matrix is a single tab stop. Arrow keys move one cell, Home and End jump to the ends of a row, and Enter or Space opens the pair in the side cell and reads it in the status line. Every cell is named with the reviewer, the author and the count.

Where do the listed pull requests come from?

In this demo they are drawn from a seeded series for each cell, so they read the same every time; the count is the cell's count, up to five are listed and the rest are counted. Replace pairOf with a lookup of the real pull requests for that author and reviewer.

What stays local, and how do I wire it for real?

Everything: the counts are typed and nothing is measured. To make it real, count review events per author and reviewer from your code host over a fixed window, and say the window in the header.

How does it look on a phone?

The matrix keeps the author column and all five reviewers in a scroll region of its own, and the pull request list stacks under it.