shadcn.io is not affiliated with official shadcn/ui
Tabbed Rate Limit Changes Changelog Block for React
A tabbed window of rate-limit changes by plan: one tab per plan, a table of endpoints with the old limit struck through, the new one in bold, the change as an arrow, a word and a percentage, and a pair of bars.
Installation
Overview
A rate-limit changelog for React with Base UI, written for Meterbound, a fictional API platform. A start-aligned header counts every raised and lowered limit from the data. Under it, an inset window sits on the page's lines with a tab list across its top: Free, Pro and Scale, each naming how many of its limits went up and down. Choosing a tab swaps the table under it: one row per endpoint with its method and path, the limit per minute as the old figure struck through and the new one in bold, the change as an arrow, a word and a percentage (Raised, Lowered or Unchanged), and a pair of bars, the old one pale and the new one solid, drawn to the larger of the two. It's built from Tabs, Badge and Guides, with CSS only for the bars and your theme's tokens for every colour. For API changelogs and plan pages. The limits are example data.
FAQ
How do I change the limits?
Edit TIERS at the top of the file: each plan has an id, a name and a list of limits with a method, a path, the was and now requests per minute. The change word, the percentage, the bars, the tab summaries and the numbers in the title are all computed from those two figures.
Is a raised or lowered limit shown by colour?
No. A raise is an up arrow with the word "Raised" and a plus percentage, a cut is a down arrow with "Lowered" and a true minus, no change is a dash. The old limit is struck through and the new one is bold. Nothing depends on colour, and on a phone the word is kept for screen readers only while the arrow and the percentage stay.
How do the tabs work with the keyboard?
The tab list is a single tab stop; the arrow keys move between plans, Home and End jump to the first and last, and the open panel follows. Focus moves with the arrow keys and selects as it goes.
Does the block move when I switch tabs?
No. Every plan's table is also rendered once, unseen and inert, in the same grid cell as the open panel, so the cell is always as tall as the tallest table. A polite line names the plan and its summary when you change tab.
What changes on a phone and in a right-to-left layout?
Below md the pair of bars is dropped, so the endpoint, the two limits and the change fit without scrolling sideways at 320 pixels. Methods, paths and signed percentages keep their own left-to-right direction in a right-to-left layout; the arrow between the old and new limit mirrors.
Related
- Pro
Plan Cells Rate Limit Dashboard Changelog
APIs and integrationsThree plan cells showing usage against a new hourly limit: a rolling count of requests, a progress bar with a tick at 80%, the remaining requests, the share used, the new limit with the old one struck through and the pace, with a toggle between the current hour and the peak hour.
- Pro
Permission Changes Changelog
Security and auditsAn audit of permission changes as diffs in an inset frame: each role with who changed it and when, inserted and struck-out permission rows with a sign and a word, how many people it reaches, and a toggle group that keeps only granted or revoked rows.
- Pro
Tabbed Window Uptime History
Incidents and uptimeA tabbed window of ninety-day uptime for an uptime monitor: one tab per service, a large uptime figure that rolls to the new service, a strip of ninety daily bars and a three-row table of incidents.
- $Pro
Breaking Changes Changelog
APIs and integrationsA framed table of four breaking calls: the old call in a del row, the new in an ins row, who it affects and the day to migrate by, with a codemod command in a terminal strip and a Copy button.
- Pro
API Deprecation Timeline Changelog
APIs and integrationsA v2 API retired in four phases as read-only Steps in cells that share their hairlines, then a framed table of the five deprecated endpoints with a Copy button on each replacement.
- Pro
Rate Limit Table Stats
TablesA framed table of API endpoints with method badges, calls used against each limit, a bar with a tick at the 80% line and a countdown to each window's reset.