Back to components
Sync Pulse Card React component

What is this?

A dark list of connected sources that syncs one row at a time. The active row gets a soft sweep and a pulsing ring, then flips to a check with “Last synced just now” before the next row starts. The loop pauses off screen and stops under reduced motion. Swap the sources and timestamps, then drop it into an integrations or data-pipeline feature block.

Component

Sync Pulse Card

A dark list of connected sources that syncs one row at a time. The active row gets a soft sweep and a pulsing ring, then flips to a check with “Last synced just now” before the next row starts. The loop pauses off screen and stops under reduced motion. Swap the sources and timestamps, then drop it into an integrations or data-pipeline feature block.

Checking access…
Live Preview

Verified Technical Spec

Animation
CSS / Tailwind
Reduced motion
Verified
Keyboard focus
Not detected in source
Compatibility
Tailwind CSS v3.4 + v4 · React 19 / Next.js 15 App Router + Vite / Remix compatible

Included

  • Copy source into Cursor or Claude for agent install
  • Finished React · TypeScript · Tailwind CSS · Lucide UI

Dependencies

  • React 19.0.0
  • Typescript 5.7.2
  • Tailwindcss 3.4.16
  • Lucide-react 1.23.0

Tech Stack

  • React
  • TypeScript
  • Tailwind CSS
  • Lucide

Version 1.0.0