Klyv Retry Queue

Component

About

A list that shows writes still waiting to reach the server, separating changes that will retry automatically (with a live backoff countdown) from ones that ran out of attempts and need a manual retry or discard decision.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Klyv Retry Queue to your project and fits it to your theme.

Code

How Klyv Retry Queue is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import RetryQueue, {
  type QueuedChange,
} from "@/components/ui/klyv-retry-queue";
import { useState } from "react";

const initialItems: QueuedChange[] = [
  {
    id: "1",
    label: "Raise your daily limit to $5,000",
    state: "sending",
    attempts: 1,
  },
  {
    id: "2",
    label: "Add Sarah Rosewood as a payee",
    detail: "Sort code 04-00-04 · 5199",
    state: "waiting",
    attempts: 2,
    nextAttemptIn: 18,
  },
  {
    id: "3",
    label: "Cancel the Halo Fitness subscription",
    error: "The provider rejected the request. Nothing was cancelled.",
    state: "failed",
    attempts: 5,
    terminal: true,
  },
];

export default function RetryQueueDemo() {
  const [items, setItems] = useState<QueuedChange[]>(initialItems);

  return (
    <div className="w-full max-w-md p-6 bg-[var(--color-surface,var(--background))] text-[var(--color-ink,var(--foreground))] rounded-xl">
      <RetryQueue
        items={items}
        label="Pending changes"
        onRetry={(id) =>
          setItems((prev) =>
            prev.map((item) =>
              item.id === id ? { ...item, state: "sending" } : item,
            ),
          )
        }
        onDiscard={(id) =>
          setItems((prev) => prev.filter((item) => item.id !== id))
        }
        onRetryAll={() =>
          setItems((prev) =>
            prev.map((item) =>
              item.state === "failed" ? { ...item, state: "sending" } : item,
            ),
          )
        }
      />
    </div>
  );
}