4e:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 4f:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 50:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 51:Tec5,"use client"; import { useEffect, useState } from "react"; import { cn } from "@/lib/utils"; interface UpstashRatelimitProps { limit: number; remaining: number; reset: number; success?: boolean; showResetTimer?: boolean; size?: "sm" | "md" | "lg"; className?: string; } function ShieldIcon({ className }: { className?: string }) { return ( ); } function formatTimeRemaining(ms: number): string { if (ms <= 0) return "0s"; const seconds = Math.floor(ms / 1000); const minutes = Math.floor(seconds / 60); const hours = Math.floor(minutes / 60); if (hours > 0) return `${hours}h ${minutes % 60}m`; if (minutes > 0) return `${minutes}m ${seconds % 60}s`; return `${seconds}s`; } const SIZE_CLASSES = { sm: { container: "p-3 gap-2", icon: "w-4 h-4", text: "text-xs", bar: "h-1.5" }, md: { container: "p-4 gap-3", icon: "w-5 h-5", text: "text-sm", bar: "h-2" }, lg: { container: "p-5 gap-4", icon: "w-6 h-6", text: "text-base", bar: "h-2.5" }, }; export function UpstashRatelimit({ limit, remaining, reset, success = true, showResetTimer = true, size = "md", className, }: UpstashRatelimitProps) { const [timeRemaining, setTimeRemaining] = useState(reset - Date.now()); const percentage = (remaining / limit) * 100; const sizes = SIZE_CLASSES[size]; useEffect(() => { if (!showResetTimer) return; const interval = setInterval(() => { const newTime = reset - Date.now(); setTimeRemaining(newTime > 0 ? newTime : 0); }, 1000); return () => clearInterval(interval); }, [reset, showResetTimer]); const getStatusColor = () => { if (!success) return "text-destructive"; if (percentage > 50) return "text-green-500"; if (percentage > 20) return "text-yellow-500"; return "text-orange-500"; }; const getBarColor = () => { if (!success) return "bg-destructive"; if (percentage > 50) return "bg-green-500"; if (percentage > 20) return "bg-yellow-500"; return "bg-orange-500"; }; return (

Rate Limit

{remaining} / {limit}

{success ? "Requests available" : "Rate limit exceeded"} {showResetTimer && timeRemaining > 0 && ( Resets in {formatTimeRemaining(timeRemaining)} )}

); } 4a:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","@upstash/ratelimit",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/%40upstash%2Fratelimit","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"@upstash/ratelimit"}]]}]}],["$","li","@upstash/redis",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/%40upstash%2Fredis","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"@upstash/redis"}]]}]}]]}],["$","$L4e",null,{"registryDependencies":[]}]]}],["$","$L4f",null,{"sourceUrl":"https://www.tryelements.dev/r/upstash-ratelimit.json","proxyUrl":"https://shadcnregistry.com/r/elements/upstash-ratelimit","itemId":"@elements/upstash-ratelimit"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L50",null,{"files":[{"path":"registry/default/blocks/upstash/upstash-ratelimit/components/elements/upstash-ratelimit.tsx","content":"$51","type":"registry:component"}]}]]}],"$L52"]}]

Upstash Ratelimit

Installation

Files

components

Styles