Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dashboard blocks

Pro

Rate Limiter Stats Dashboard Block for Vue

Four clients and 30 minutes of requests as small multiples, a limit field and a fixed window or token bucket switch, and the number of requests each client would have lost under each algorithm.

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

Replay a busy half hour against a limit with this rate limiter panel for Vue with Ark UI. A hairline frame with a plus mark on each corner holds four Throttlewell clients (Anonymous, Free, Pro and Enterprise) as small multiples of their requests a minute for 30 minutes. A Number Input sets the limit per minute and a Segment Group picks the algorithm. Each column splits into what got through (solid) and what would have been refused (hollow), with a dashed line at the limit, and the header compares both: how many requests a fixed window would refuse and how many a token bucket would. A token bucket holds twice the limit, so a burst after quiet minutes fits. Pressing a client reads its throttled minutes in a polite line. It's built from Number Input, Segment Group and Guides. For API teams choosing a limit.

FAQ

How do I replay my own traffic?

Replace the requests of each client in CLIENTS with your requests a minute, in order. The bursts are typed in seriesOf, and everything else (the columns, the counts, the header comparison and the reading) is worked out from those arrays and the limit.

How are the two algorithms worked out?

A fixed window refuses every request over the limit within its minute. The token bucket starts full at twice the limit, refills the limit at the start of each minute, serves what it can and carries the rest forward. BUCKET_MINUTES sets the capacity; both functions are plain and sit at the top of the file.

How does the limit field behave?

It accepts whole numbers from 10 to 1,000 and the charts follow as you type. On blur, a value outside the range is written back as the nearest limit. Arabic-Indic digits are read too.

What stays local, and how do I wire it for real?

Everything: the request counts are seeded and typed and nothing is limited. To wire it, load per-client counts from your gateway logs and compare them with your real limit, then ship the algorithm you chose in your gateway config.

How do I use it with the keyboard?

The limit field and the two algorithm options are in the tab order, and each client's heading is a toggle button. The charts are decorative: the throttled counts are in each heading and the minutes are read in the status line.

How does it look on a phone?

The four multiples stack as one row each, and the limit field and the algorithm control wrap onto their own lines.

All 200 dashboard blocks