Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

API Usage Metrics Changelog Block for Ark UI

Six weeks of requests as stacked columns by API version, the legend and title reading the latest week's shares from the data, a Requests or Share toggle, and a three-cell band of requests, error rate and p95 latency with their changes.

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

An API usage changelog for React with Ark UI, written for Countwell, a fictional API gateway. The title is computed from the data ("v1 is down to 8% of Countwell traffic"), with a toggle group (Requests, Share) at the header's end. A framed figure sits on the page's lines with + marks on its corners: a legend of the three versions with their share of the latest week (whole numbers that add up to 100), then six stacked columns, one segment per version (v1 hatched, v2 a mid grey, v3 solid, so none relies on tone alone), each with its total or v1's share above and its week under it. Under the chart a three-cell band gives the latest week's requests, error rate and p95 latency, each with its change as an arrow and a sign. Share redraws every column to full height so the segments read as shares. The drawing is hidden from assistive technology and an unseen table holds every number. On a phone the oldest week drops and the three cells stay in a row. It's built from Toggle Group and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For usage reports, deprecation campaigns and release notes about adoption. The traffic is example data.

FAQ

How do I change the weeks and versions?

Edit WEEKS at the top of the file: each week is an iso day, a label and the millions of requests for each entry of VERSIONS (v1, v2, v3), in that order. The column heights, the totals, the legend shares and the title are all computed from those numbers, and CEILING sets the chart's top, so keep every weekly total below it. The three figures under the chart sit in VITALS.

How are the shares worked out?

Each version's share of the latest week is rounded down to a whole number and the points left over go to the largest remainders, so the three always add up to exactly 100. The title reads v1's share from the same list.

How are the versions told apart without colour?

By fill, not hue: v1 is hatched, v2 a mid grey and v3 solid, with the same fills in the legend beside each version's name and share, and the stacking order is always v1 at the bottom. The numbers are also in an unseen table, so nothing depends on seeing the fills.

What does the toggle do?

Requests draws each column at its real height with its total above it; Share draws every column at the same height, so the segments read as shares, with v1's share above each. A polite line says which one is showing. The change is a CSS transition, off with reduced motion.

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

Below sm the oldest week drops, leaving five columns, and the sentence under the title says five instead of six; the three cells stay in a row with smaller type. In a right-to-left layout the labels and figures stay left to right inside their own isolates, and the legend and cells follow the reading direction.

All 200 changelog blocks