shadcn.io is not affiliated with official shadcn/ui
Data Pipeline Changes Changelog Block for React
Four changes to a data pipeline as pressable rows, newest first, beside a framed diagram of two sources, a transform and two destinations: choosing a change rings its box, thickens its curve and explains it in a line.
Installation
Overview
A pipeline changelog for React with Base UI, written for Streambed, a fictional ETL service. It is a split: at the start a headline, a sentence and four changes as a list of buttons, newest first, each with its version, its day, a type tag (an icon and a word) and a title; the newest is pressed on load. Past a divider, a framed diagram draws the pipeline as boxes joined by curves: two sources, one transform, two destinations. Choosing a change rings the box it touched and thickens the curve it travels on, and a line under the diagram says what changed. Every possible line sits in one cell, so the page never moves. On a phone the diagram becomes a vertical run of stages with an arrow between them. It's built from Badge, Guides and hand-built SVG and CSS, with CSS transitions for the entrance and your theme's tokens for every colour. For ETL and data-platform release notes. The pipeline and its changes are example data.
FAQ
How do I change the pipeline and its changes?
Edit the boxes (ORDERS, CLICKS, ENRICH, WAREHOUSE, SEARCH), the curves (IN_EDGES and OUT_EDGES, each a path in a 100 by 296 box) and CHANGES at the top of the file. A change has an id, a version, a date, a kind, a title, the detail line, and which nodes and edges it touches by id.
How do the change buttons work?
They are plain buttons in a list, and the pressed one has aria-pressed. Press one and its boxes get a ring (and a hidden "touched by this change" for screen readers), its curve turns heavier and the line under the diagram swaps to its detail. The line is also a polite status region, so the new text is read out. Nothing leaves the page.
Why doesn't the block move when I choose a change?
The detail lines of every change are stacked in one grid cell and only the chosen one is visible, so the cell is as tall as the longest. The diagram has a fixed height from md, and its boxes, curves and labels never change size.
What happens on a phone?
The split stacks: header and changes first, a rule with + marks, then the diagram. Below md the three stages become a vertical list (sources, transform, destinations), each under its label with a chevron between them, and the curves are hidden. The boxes still ring when you choose a change.
Related
- Pro
Data Migration Changelog
Data and configFive backfill jobs in a framed table: records, duration and a status as an icon, a word, a progress bar and a percentage, with a total in the headline and a Retry button for the failed job.
- Pro
Database Schema Changelog
Data and configA relations diagram after one release: five table cards joined by foreign-key lines, the new table, the new column and the changed column each tagged with an icon and a word, and the three migrations behind it as a list.
- Pro
Build Pipeline Matrix Changelog
Deploys and rolloutsA run-by-stage matrix of the last six builds with a result and a time in every cell, a failed run that explains itself, and a stage lens that tints a column.
- Pro
Service Dependency Map Changelog
Incidents and uptimeA 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.
- Pro
Deployment Log Tabs Changelog
Deploys and rolloutsTabs by environment with counts over a framed table of deploys: environment, commit with Copy, message, deployer, a duration micro-bar and a status word.
- Pro
Lanes With Gates Release Train
Deploys and rolloutsA release-train table: a lane per train, a column per station (Dev, Staging, Canary, Production), each cell a gate shape and word with a hover card of its checks, and the departure time at the end of the lane.