Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Team blocks

Pro

Reviewer Finder Team Block for Vue

A reviewer finder for a code-review assistant: an area Select ranks the three people who know it best by expertise with their open reviews as a small bar, and the one Shine Button names whoever is chosen.

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 reviewer picker for Vue with Ark UI, for Thornlea, a code-review assistant. A split with a hairline divider. On the start: the header, a Select for the area a change touches (Payments, Auth, Web app or Infrastructure) and, at its foot, the one Shine Button, "Request review from Noor", which names whoever is chosen. On the end: the three people who know that area best, ranked, each a radio row with an initials avatar, a name, a role, an expertise score and a small bar for the reviews they have open. Picking an area re-ranks the list and chooses its top reviewer; picking another row chooses them, and the button renames itself. On a phone the Select comes first, then the list, then the full-width button. It's built from Select, Progress, Shine Button, Avatar and Guides, with your theme's tokens. The scores and workloads are fictional example data. For code-review tools, engineering "who should look at this" pages and any block that routes a request to the right person.

FAQ

How do I change the people, the areas and the ranking?

Edit AREAS and PEOPLE at the top of the file. A person has a name, a role, open (the reviews waiting on them) and scores: one expertise number from 0 to 100 per area, in the order of AREAS. Each area lists the top three by score (SHOWN), and CAPACITY is what the open-reviews bar is measured against. Nothing else needs editing.

How do choosing an area and choosing a reviewer interact?

Choosing an area always chooses its top-ranked reviewer, so the button never names someone who isn't in the list. After that you can choose any of the three rows, and the button follows. Choosing the area again resets to the top. The button is a link: point #review at your own review request, with the chosen name added if you need it.

How does it work with a keyboard and a screen reader?

The Select is named "Area of the change" and works as your base's Select does. The three reviewers are native radio buttons in a group named Reviewer: Tab enters the group once and the arrow keys move between rows, choosing as they go. A row's name reads the person, their role, their expertise and their open reviews. A polite line above the list says which area it is ranked for.

What does the bar show?

How many reviews the person has open now, out of CAPACITY: a short bar is a person with room. The bar is decorative; the same figure is written beside it ("2 of 6"), and the expertise is a number too, so nothing depends on how the bar looks.

How does it fit on a phone?

Everything stacks in reading order: the header and the Select, then the ranked list, then the Shine Button full width, so it is the last thing you reach after choosing. The list keeps its three rows whatever the area, so the page doesn't move when you re-rank.

All 126 team blocks