184 Components
Rate Limit Meter
CardsToken bucket and sliding-window rate limit visualizer with burst request simulation, spring-physics capacity transitions, real-time quota reset countdowns, and 429 Too Many Requests retry-after badges.
Rate Limit & Quota Meter
Sliding window token-bucket capacity monitor with retry telemetry.
api_key_live_948a**
Pro Plan (Global Edge)
92/ 120 req
Healthy Throughput
Capacity remaining: 77% Resets in 60s
Test live rate limiter behavior:
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/rate-limit-meter.json"
Props
TypeScript props supported by <RateLimitMeter />.
| Prop | Type | Default | Description |
|---|---|---|---|
| maxLimit | number | 120 | Maximum number of requests permitted within the window. |
| initialRemaining | number | 92 | Initial available capacity tokens. |
| windowSeconds | number | 60 | Sliding window duration in seconds before token replenish. |
| tierLabel | string | "Pro Plan (Global Edge)" | Identifier for the active API tier or subscription plan. |
Key Features
- Animated token bucket capacity bar with spring-weighted updates.
- Interactive single request and burst (-15) simulation triggers.
- Automatic sliding window replenishment timer ticking in real-time.
- Dynamic color shifts for Healthy (green), Warning (amber), and 429 Exceeded (red).
Keyboard & Accessibility
- Clear numeric percentage labels alongside progress meters.
- Accessible color contrast with distinct iconography for state changes.