Back to components
Event Stream Card React component

What is this?

A dark webhook feed: event names like invoice.paid and charge.failed, each with a tone dot, its age, and an HTTP status. A new row eases in at the top every few seconds while the oldest slides out under a fade. It pauses off screen and under reduced motion. Swap the events, endpoint, and interval, then drop it into an API or payments feature block.

Component

Event Stream Card

A dark webhook feed: event names like invoice.paid and charge.failed, each with a tone dot, its age, and an HTTP status. A new row eases in at the top every few seconds while the oldest slides out under a fade. It pauses off screen and under reduced motion. Swap the events, endpoint, and interval, then drop it into an API or payments 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