Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Contributor Leaderboard Changelog Block for Vue

A framed, sortable table of eight contributors with rank by impact, commits, reviews, an impact bar and a streak; the top three keep a ringed avatar and the headings are buttons that set aria-sort.

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 contributor leaderboard for Vue with Ark UI, written for Commitboard, a fictional engineering-metrics tool. A header whose sentence is counted from the typed rows sits over a framed table of eight contributors for the quarter. Each row has the rank (by impact, where a review counts as two commits), the contributor's initials and name, commits, reviews, an impact bar with its number and a streak in weeks. The three best keep a ring around their avatar wherever the sort puts them. The column headings are buttons: one sorts the rows (names A to Z, the others high to low) and pressing it again reverses them, aria-sort marks the sorted column and a polite status line says what changed. On a phone the reviews and streak columns and the bar drop, names shorten to a first name and an initial and the contributor column stays put. It's built from Guides, Avatar and Progress in a native table. For engineering dashboards and release pages. The people and numbers are example data.

FAQ

How do I change the people and how impact is scored?

Edit PEOPLE at the top of the file (commits, reviews, streak) and REVIEW_WEIGHT for how many commits a review is worth. Impact is each person's weighted total scaled so the best scores 100, and the rank is their place in that order, so the bars, numbers and rank always agree.

How does sorting work?

Each column heading holds a button. The first press sorts names A to Z and numbers from high to low; pressing the same one reverses it. A tie goes to the better rank. The heading of the sorted column has aria-sort and a status line says "Sorted by Commits, low to high." The rank column doesn't change: it is always the impact rank.

Why a native table?

A native table has a caption, row headers and scoped column headings on every base, and the same markup works across all seven targets. It sits in a labelled region you can focus, so the keyboard can scroll it on a narrow screen.

Are the impact bars accessible?

The bar only repeats the number beside it, so assistive technology skips it and reads the number. The ring around the top three avatars is decoration too: the rank is in text.

How does it fit a phone and a right-to-left layout?

On a phone the table keeps rank, name, commits and the impact number and fits without scrolling; at very narrow widths it scrolls with the name column fixed. In a right-to-left layout the table mirrors and the bars fill from the other side.

All 200 changelog blocks