Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Segmented Bar Latency Budget Block for Radix UI

A single bar that slices a 250 ms request budget by hop (edge, auth, database, render), a switch between two releases that re-slices it, and a four-cell band with each hop's milliseconds and its change.

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 latency budget for React with Radix UI. A start-aligned header carries a two-way switch (v8.3 and v8.4) at its end. Under it, one inset frame shows the request's total time and a verdict computed from the hops ("Within budget by 21 ms"), then a single bar sliced by hop, Edge, Auth, Database and Render, in four weights of the foreground with 1 px gaps, drawn against a hairline track that stands for the longest the request may run, with a tick at the budget. Under the bar a four-cell band names each hop with its milliseconds, rolled in place, and a signed change against the release before. Switching re-slices the bar with a CSS transition, which is off with reduced motion, and nothing moves on the page. No timer runs: every figure is typed and the total, the margin and the scale are computed. It's built from Segment Group, Sliding Number, Status and Guides.

FAQ

How do I change the budget, the hops or the releases?

Edit BUDGET (milliseconds), HOPS (the hops in the order the request travels, each with a fill) and RELEASES: each has a ms list for its hops and a before list for the release before it. The total, the margin to the budget, the verdict, the scale of the bar and its ticks (up to the next hundred above the longest total) and every signed change are computed from those lists. The numbers are example data.

What does the block show when a release is over budget?

Choose v8.3: its hops add up to 269 ms, so the bar runs past the budget tick, the verdict reads "Over budget by 19 ms" and a destructive dot appears beside it. The words carry the meaning, so the dot is never the only signal, and it is the only warning mark in the block.

How is the bar accessible?

The bar is an image with a text alternative that lists every hop's milliseconds, the total and the budget; the same numbers are in the four-cell band, which is a description list. A polite live region announces the verdict when you switch release. The switch is a radio group: arrow keys move between releases.

What changes on a phone?

The switch moves under the header and the four cells go two by two, with the same hairlines. The bar keeps its proportions, the budget label sits on the start side of its tick, and nothing scrolls sideways at 320 pixels.

What moves, and what happens with reduced motion?

The frame fades up once on load. Switching release slides the segments to their new widths and rolls the changed digits. With reduced motion the bar and the numbers change in place with no transition.

Does it work in a right-to-left layout?

Yes. The bar and its scale are a measurement, so they keep a left-to-right direction; the labels, the milliseconds and the signed changes are isolated so a minus or a plus stays beside its number.

All 200 changelog blocks