Componentfeedback0.8 KB gzipZero dependencies

Sync Status

Sync status chip with spinning icon and last-sync timestamp.

Preview

Live Preview

Synced· 2m ago

Installation

Tokens guide →

Add to your project via CLI (zero dependencies, code you own):

npx bigbullui add sync-status

Or install the full npm package:

npm install bigbullui

Usage

Open in StackBlitz

import { SyncStatus } from "@/components/ui/sync-status";

<SyncStatus />

Usage guidance

Use Sync Status when a ticket stub surface needs Sync status chip with spinning icon and last-sync timestamp. Keep props minimal and prefer composition with sibling stubs.

Avoid Sync Status for long form flows or dense data grids where a dedicated layout block fits better.

Source code

sync-status.tsx

Zero dependencies (only React + utils). Copy and paste directly into your project:

"use client";

import * as React from "react";
import { cn } from "./lib/utils";

export interface SyncStatusProps extends React.HTMLAttributes<HTMLSpanElement> {
  /** idle | syncing | synced | error */
  status?: "idle" | "syncing" | "synced" | "error";
  lastSync?: string;
}

/** Sync status badge: spinning sync icon + last synced timestamp. */
export function SyncStatus({ status = "idle", lastSync, className, ...props }: SyncStatusProps) {
  const meta = {
    idle: { text: "Ready", icon: "text-muted-foreground", spin: false },
    syncing: { text: "Syncing…", icon: "text-accent", spin: true },
    synced: { text: "Synced", icon: "text-success", spin: false },
    error: { text: "Sync error", icon: "text-destructive", spin: false },
  }[status];

  return (
    <span className={cn("inline-flex items-center gap-1.5 rounded-full border border-border bg-card px-2 py-0.5 font-mono text-[10px] uppercase tracking-wider text-muted-foreground", className)} role="status" {...props}>
      <svg
        width="11"
        height="11"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        strokeWidth="2.5"
        strokeLinecap="round"
        strokeLinejoin="round"
        className={cn(meta.icon, meta.spin && "animate-spin motion-reduce:animate-none")}
        aria-hidden="true"
      >
        {status === "synced"
          ? <path d="M20 6L9 17l-5-5" />
          : <><path d="M21 12a9 9 0 1 1-2.64-6.36" /><path d="M21 3v6h-6" /></>}
      </svg>
      {meta.text}
      {lastSync && status !== "syncing" && <span className="opacity-60">· {lastSync}</span>}
    </span>
  );
}

Props

Prop	Type	Description
status	"idle" \| "syncing" \| "synced" \| "error"	idle \| syncing \| synced \| error
lastSync	string