shadcn.io is not affiliated with official shadcn/ui
Tabbed Rate Limit Changes Changelog Block for Svelte
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 Svelte with Ark 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. Arrow keys move focus and select the tab together.
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.