Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Code Owners Changelog Block for React Aria

A path tester: type a file path and see which team owns it, the pattern that matched and the number of reviewers, with the owning row ringed in a framed table of teams, patterns, reviewers and wait times.

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

A code-owners changelog for React with React Aria, written for Stewardly, a fictional code-review product. A header whose sentence is counted from the rules sits over a band with one field, "Path to check", and beside it (under it on a phone) the answer: "Owned by @billing. Last match wins; 2 reviewers", with the pattern that matched. Below, a framed table lists the six owning teams in file order, each with its path patterns in mono, the reviewers' initials, the reviews waiting and the average first response. The row that owns the path in the field is ringed and marked "Owns this path", and it moves as you type. The matching is a small helper over the typed patterns: * stops at a slash, ** doesn't, and a pattern with no slash matches a name at any depth; the last matching rule wins. On a phone the response column drops and the team column stays put. Nothing is sent: it's a calculator over example rules. It's built from Guides, Field, Input, Avatar and Badge in a native table. For code-review tools and contributor guides. The teams and patterns are example data.

FAQ

How do I change the teams and the patterns?

Edit RULES at the top of the file, in the order of your file: each rule has a team, a name, its globs, the reviewers, the reviews pending and the average response. When two rules match a path the later one owns it, so put the general rule first.

Which patterns does it understand?

* matches anything except a slash, ** matches across slashes, ? matches one character, a pattern without a slash matches a file name at any depth (*.md) and one with a slash is anchored at the root (src/billing/**). A leading ./ or / on the path is ignored. It is a small teaching matcher, not a full CODEOWNERS parser: swap ownerOf for your own when you need negation or escapes.

How is the answer announced?

The answer sits in a polite status region, so a screen reader hears it when the owner changes. The ringed row also has aria-current and the words "Owns this path", so it doesn't rely on the ring.

What happens with an empty path?

No row is ringed and the answer asks you to type a path.

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

On a phone the table drops the response column and keeps the team column fixed while it scrolls. In a right-to-left layout the table mirrors; paths, handles and the field stay left to right.