React Dialog Block Rate Limit

Rate limit warning dialog with countdown timer, request quota display, upgrade prompt, and retry functionality

Looking to implement shadcn/ui blocks?

Join our Discord community for help from other developers.

Handle API rate limits gracefully with clear feedback. This React rate limit dialog provides countdown timer until quota resets, visual display of requests used versus allowed, upgrade prompt for higher limits, and automatic retry when limit resets. Built with shadcn/ui Dialog, Button, Progress, Badge, and Card components using Tailwind CSS, users understand rate limit status and next steps clearly. See remaining time, understand limits, upgrade if needed—perfect for API consumers, developer tools, data sync applications, or any Next.js application where users may encounter rate limiting and need clear guidance on when they can retry.

"use client";

import { useState, useEffect } from "react";
import { Clock, AlertTriangle, Loader2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Progress } from "@/components/ui/progress";

export const title = "React Dialog Block Rate Limit";

export default function DialogRateLimit() {
  const [open, setOpen] = useState(false);
  const [seconds, setSeconds] = useState(67);
  const [isRetrying, setIsRetrying] = useState(false);

  const formatTime = (s: number) => {
    const mins = Math.floor(s / 60);
    const secs = s % 60;
    return `${mins}:${secs.toString().padStart(2, "0")}`;
  };

  useEffect(() => {
    if (!open || seconds <= 0) return;
    const interval = setInterval(() => {
      setSeconds((s) => Math.max(0, s - 1));
    }, 1000);
    return () => clearInterval(interval);
  }, [open, seconds]);

  const handleRetry = async () => {
    setIsRetrying(true);
    await new Promise((r) => setTimeout(r, 1500));
    setIsRetrying(false);
    setOpen(false);
  };

  const isReady = seconds === 0;

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <div className="flex min-h-[350px] items-center justify-center">
        <DialogTrigger asChild>
          <Button variant="outline">
            <AlertTriangle className="mr-2 h-4 w-4" />
            Rate Limit
          </Button>
        </DialogTrigger>
      </div>
      <DialogContent className="sm:max-w-sm">
        <DialogHeader>
          <DialogTitle>Rate Limit Exceeded</DialogTitle>
          <DialogDescription>
            You've reached the request limit. Please wait.
          </DialogDescription>
        </DialogHeader>

        <div className="space-y-4 py-4">
          <div className="flex flex-col items-center justify-center py-4">
            <Clock className="h-8 w-8 text-muted-foreground" />
            <p className="mt-3 text-3xl font-bold font-mono tabular-nums">
              {isReady ? "Ready!" : formatTime(seconds)}
            </p>
            <p className="text-sm text-muted-foreground mt-1">
              {isReady ? "You can retry now" : "until reset"}
            </p>
          </div>

          <div className="space-y-2">
            <div className="flex items-center justify-between text-sm">
              <span className="text-muted-foreground">Requests used</span>
              <span className="font-medium">100 / 100</span>
            </div>
            <Progress value={100} className="h-1.5" />
          </div>
        </div>

        <DialogFooter>
          <Button variant="outline" onClick={() => setOpen(false)}>
            Cancel
          </Button>
          <Button onClick={handleRetry} disabled={!isReady || isRetrying}>
            {isRetrying ? (
              <>
                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                Retrying...
              </>
            ) : (
              "Retry"
            )}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

"use client";import { useState, useEffect } from "react";import { Clock, AlertTriangle, Loader2 } from "lucide-react";import { Button } from "@/components/ui/button";import {  Dialog,  DialogContent,  DialogDescription,  DialogFooter,  DialogHeader,  DialogTitle,  DialogTrigger,} from "@/components/ui/dialog";import { Progress } from "@/components/ui/progress";export const title = "React Dialog Block Rate Limit";export default function DialogRateLimit() {  const [open, setOpen] = useState(false);  const [seconds, setSeconds] = useState(67);  const [isRetrying, setIsRetrying] = useState(false);  const formatTime = (s: number) => {    const mins = Math.floor(s / 60);    const secs = s % 60;    return `${mins}:${secs.toString().padStart(2, "0")}`;  };  useEffect(() => {    if (!open || seconds <= 0) return;    const interval = setInterval(() => {      setSeconds((s) => Math.max(0, s - 1));    }, 1000);    return () => clearInterval(interval);  }, [open, seconds]);  const handleRetry = async () => {    setIsRetrying(true);    await new Promise((r) => setTimeout(r, 1500));    setIsRetrying(false);    setOpen(false);  };  const isReady = seconds === 0;  return (    <Dialog open={open} onOpenChange={setOpen}>      <div className="flex min-h-[350px] items-center justify-center">        <DialogTrigger asChild>          <Button variant="outline">            <AlertTriangle className="mr-2 h-4 w-4" />            Rate Limit          </Button>        </DialogTrigger>      </div>      <DialogContent className="sm:max-w-sm">        <DialogHeader>          <DialogTitle>Rate Limit Exceeded</DialogTitle>          <DialogDescription>            You've reached the request limit. Please wait.          </DialogDescription>        </DialogHeader>        <div className="space-y-4 py-4">          <div className="flex flex-col items-center justify-center py-4">            <Clock className="h-8 w-8 text-muted-foreground" />            <p className="mt-3 text-3xl font-bold font-mono tabular-nums">              {isReady ? "Ready!" : formatTime(seconds)}            </p>            <p className="text-sm text-muted-foreground mt-1">              {isReady ? "You can retry now" : "until reset"}            </p>          </div>          <div className="space-y-2">            <div className="flex items-center justify-between text-sm">              <span className="text-muted-foreground">Requests used</span>              <span className="font-medium">100 / 100</span>            </div>            <Progress value={100} className="h-1.5" />          </div>        </div>        <DialogFooter>          <Button variant="outline" onClick={() => setOpen(false)}>            Cancel          </Button>          <Button onClick={handleRetry} disabled={!isReady || isRetrying}>            {isRetrying ? (              <>                <Loader2 className="mr-2 h-4 w-4 animate-spin" />                Retrying...              </>            ) : (              "Retry"            )}          </Button>        </DialogFooter>      </DialogContent>    </Dialog>  );}

Pro membership required for block code

Installation

npx shadcn@latest add https://www.shadcn.io/registry/dialog-rate-limit.json

npx shadcn@latest add https://www.shadcn.io/registry/dialog-rate-limit.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/dialog-rate-limit.json

bunx shadcn@latest add https://www.shadcn.io/registry/dialog-rate-limit.json

Pro block — Sign in to install

React Dialog Block API Error

API errors

React Dialog Block Warning

Warning states

React Dialog Block Countdown Timer

Timer display

React Dialog Block Upgrade Plan

Upgrade prompts

React Dialog Block Retry

Retry actions

React Dialog Block Loading

Loading states

Questions you might have

"use client"; import { useState, useEffect } from "react"; import { Clock, AlertTriangle, Loader2 } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog"; import { Progress } from "@/components/ui/progress"; export const title = "React Dialog Block Rate Limit"; export default function DialogRateLimit() { const [open, setOpen] = useState(false); const [seconds, setSeconds] = useState(67); const [isRetrying, setIsRetrying] = useState(false); const formatTime = (s: number) => { const mins = Math.floor(s / 60); const secs = s % 60; return `${mins}:${secs.toString().padStart(2, "0")}`; }; useEffect(() => { if (!open || seconds <= 0) return; const interval = setInterval(() => { setSeconds((s) => Math.max(0, s - 1)); }, 1000); return () => clearInterval(interval); }, [open, seconds]); const handleRetry = async () => { setIsRetrying(true); await new Promise((r) => setTimeout(r, 1500)); setIsRetrying(false); setOpen(false); }; const isReady = seconds === 0; return ( <Dialog open={open} onOpenChange={setOpen}> <div className="flex min-h-[350px] items-center justify-center"> <DialogTrigger asChild> <Button variant="outline"> <AlertTriangle className="mr-2 h-4 w-4" /> Rate Limit </Button> </DialogTrigger> </div> <DialogContent className="sm:max-w-sm"> <DialogHeader> <DialogTitle>Rate Limit Exceeded</DialogTitle> <DialogDescription> You've reached the request limit. Please wait. </DialogDescription> </DialogHeader> <div className="space-y-4 py-4"> <div className="flex flex-col items-center justify-center py-4"> <Clock className="h-8 w-8 text-muted-foreground" /> <p className="mt-3 text-3xl font-bold font-mono tabular-nums"> {isReady ? "Ready!" : formatTime(seconds)} </p> <p className="text-sm text-muted-foreground mt-1"> {isReady ? "You can retry now" : "until reset"} </p> </div> <div className="space-y-2"> <div className="flex items-center justify-between text-sm"> <span className="text-muted-foreground">Requests used</span> <span className="font-medium">100 / 100</span> </div> <Progress value={100} className="h-1.5" /> </div> </div> <DialogFooter> <Button variant="outline" onClick={() => setOpen(false)}> Cancel </Button> <Button onClick={handleRetry} disabled={!isReady || isRetrying}> {isRetrying ? ( <> <Loader2 className="mr-2 h-4 w-4 animate-spin" /> Retrying... </> ) : ( "Retry" )} </Button> </DialogFooter> </DialogContent> </Dialog> ); }

React Dialog Block Rate Limit

Installation

Related blocks you will also like

React Dialog Block API Error

React Dialog Block Warning

React Dialog Block Countdown Timer

React Dialog Block Upgrade Plan

React Dialog Block Retry

React Dialog Block Loading

Questions you might have

How should I show time until reset?

How do I display request quota?

Should I prompt for upgrade?

How should retry work?

Should I explain why limited?

How can users avoid limits?