Rate Limit Cooldown

A full-height 429 screen: a square eyebrow and status code over a hairline rule, an accent headline, three bordered usage cells (requests used, limit, resets in), and a real live countdown that ticks down every second and swaps itself for a retry button once it reaches zero.

By Staaarter Team

Error

Docs

Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/rate-limit-cooldown.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/error/error25.tsx instead.

Usage

The file also exports error25Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Error25, error25Demo } from "@/components/blocks/error/error25";

export default function Page() {
  return <Error25 {...error25Demo} />;
}

Props

Prop	Type	Default	Description
eyebrow	string	none	Small square-marker label above the status code, e.g. "Rate limited".
statusCode	string	none	Status line shown under the eyebrow, e.g. "429 Too Many Requests".
heading	ReactNode	none	Main headline, can include an inline accent span.
description	string	none	Supporting copy under the headline.
cells	UsageCell[]	none	Three bordered usage stat cells, e.g. Requests used / Limit / Resets in.
cooldownSeconds	number	none	Seconds the live cooldown counter starts from.
retryLabel	string	none	Label for the retry button shown once the cooldown reaches zero.
className	string	none	Extra classes for the outer section element.

Types

interface UsageCell {
  label: string;
  value: string;
}

Behavior notes

The cooldown is a real setTimeout-driven countdown started from cooldownSeconds and re-armed each second in a useEffect keyed on secondsLeft, cleared on unmount.
Once secondsLeft reaches 0, the countdown text is replaced with a real, enabled retry Button; clicking it does not actually retry a request against a backend.
The three usage cells are static demo data with no live connection to real request counts.

More Error Blocks

View all →

centered-404-message

Centered 404 Message

Minimal centered 404 with two CTAs and a divided row of popular page links.

404-with-site-search

404 With Site Search

404 screen with a working search box and a bordered list of suggested pages.

split-404-with-image

Split 404 With Image

Two-column 404 with the message on one side and a full-bleed photo that scales on hover on the other.

404-with-destination-cards

404 With Destination Cards

404 screen with a grid of icon destination cards plus fallback CTA buttons.

404-support-panel

404 Support Panel

Card-style 404 echoing the requested URL, with a real back button and a support/status link row.

inline-404-line

Inline 404 Line

The smallest possible 404: code and message on one divided line with one button underneath.