Rate Limit
73 / 100
Requests availableResets in 45s
Rate Limit
15 / 100
Requests availableResets in 44s
Rate Limit
0 / 100
Rate limit exceededResets in 44s
Overview
Display @upstash/ratelimit responses with a visual progress bar, remaining count, and countdown timer until reset.
Installation
npx shadcn@latest add @elements/upstash-ratelimitUsage
import { UpstashRatelimit } from "@/components/elements/upstash/upstash-ratelimit";
export function RateLimitStatus() {
const { success, limit, remaining, reset } = await ratelimit.limit("user_123");
return (
<UpstashRatelimit
limit={limit}
remaining={remaining}
reset={reset}
success={success}
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
limit | number | - | Maximum requests allowed |
remaining | number | - | Requests remaining |
reset | number | - | Unix timestamp (ms) when limit resets |
success | boolean | true | Whether request was allowed |
showResetTimer | boolean | true | Show countdown timer |
size | "sm" | "md" | "lg" | "md" | Component size |
className | string | - | Additional CSS classes |
Features
- Color-coded status (green/yellow/orange/red)
- Live countdown to reset
- Progress bar visualization
- Multiple size variants