shadcn.io is not affiliated with official shadcn/ui
Service Dependency Map Changelog Block for React Aria
A three-column graph of one service's blast radius: what it depends on, the chosen service in the middle, what uses it, joined by curves in one SVG, with a warning glyph on each edge a release breaks and a toggle group to pick the service.
Installation
Overview
A dependency map for React with React Aria, written for Tangleless, a fictional service-ownership tool. A toggle group at the end of the header picks the service (Orders, Billing, Search). A framed figure draws three columns: "Depends on" at the start, the chosen service in the middle as a dark chip with its next version, and "Used by" at the end, joined by curves in one SVG. Which services sit in each column comes from a typed adjacency; the services that break when the release ships are marked on their edge with a warning glyph, say what breaks in words ("Breaks: reads legacyTotal") and are counted in the figure's caption ("3 downstream services affected"). The figure always has room for four services a side, so choosing another service redraws the curves without moving the page. On a phone and a tablet the SVG is gone and the three columns become three labelled lists. It's built from Toggle Group, Guides and a custom SVG, with CSS transitions for the entrance and your theme's tokens for every colour. For release notes of platform teams, ownership dashboards and "who does this break" explainers. The services and their dependencies are example data.
FAQ
How do I change the services and their edges?
Edit FOCI at the top of the file. Each entry is a service you can pick: its name, the next version, a change clause for the caption, and two typed lists, dependsOn and usedBy, of links (id, a note, and breaking for an edge the release breaks). The curves, the glyphs, the column counts and the "3 downstream services affected" line are all computed from those lists. A side can hold up to four services; raise SLOTS for more.
How is a breaking edge shown without colour?
Three ways, none of them a colour: its curve is heavier, a round chip with a warning glyph sits on it, and the service's own box has a foreground outline, a glyph and the words "Breaks: …" in its note. Screen readers hear "Breaking change" on those services, and the caption says how many there are.
Is the SVG accessible?
The SVG and the chips are decoration, hidden from assistive technology: every fact in the drawing is in the three lists as text, in reading order (Depends on, Changing, Used by). The figure keeps its left-to-right layout in a right-to-left page, since the columns are a picture of direction, while text inside the boxes follows the page.
How does the service toggle work?
It is a single-choice Toggle Group: the arrow keys move between Orders, Billing and Search and Space or Enter picks one; pressing the chosen item again does nothing, so a service is always shown. The caption is a polite live region, so the new count is read when you switch.