Free · MITFeedsfeedactivitylive

Live feed

A live activity feed where events slide in at the top, with relative timestamps, a pulsing live indicator, and pause on hover.

Full preview

Preview

Resize it, switch the theme, replay the entrance — or read the source.

Live activity

Live

Signups, upgrades and payments as they happen.

Mosaic HR
Paid invoice #1720
$1,720just now
Fernway
Upgraded to Growth
+$9940s ago
Coralline
Started the Scale plan
1m ago
Liam O'Connor
Refunded the Growth plan
−$1,1803m ago
Brightloom
Paid invoice #4120
$4,1208m ago
Quillfeather
Added 6 seats
+$8415m ago

Installation

Add the block to a project that already uses shadcn/ui.

bash

npx shadcn@latest add https://prequelui.terravidhal.me/r/live-feed.json

Requires a project that already uses shadcn/ui on React and Tailwind CSS v4. The block is copied into your project as a single file you own and can edit.

Usage

Import the named export and render it with your own data.

Every prop is optional and ships with deterministic demo data, so a bare render shows the block at its default. Pass props to plug in your own data and formatters.

import { LiveFeed } from "@/components/prequel/live-feed/live-feed";

export default function DashboardPage() {
  return <LiveFeed />;
}

import { LiveFeed } from "@/components/prequel/live-feed/live-feed";

export default function DashboardPage() {
  return <LiveFeed />;
}

Props

Every prop is optional and ships with demo-data defaults.

Prop	Type	Description
`className`	`string`	Extra classes merged onto the root element.
`title`	`string`	—
`description`	`string`	—
`interval`	`number`	Seconds between events. Defaults to 3.
`maxItems`	`number`	Maximum number of events kept visible. Defaults to 6.
`events`	`LiveFeedEvent[]`	Deterministic list of events, cycled in order.
`formatAmount`	`(amount: number) => string`	—

Accessibility

The rules every PrequelUI block follows, verified against this block's source.

Charts and graphics expose a text summary via role="img" and an aria-label describing the data.

Interactive charts respond to arrow keys, Home and End, and show tooltips on keyboard focus.

Every button carries a visible focus ring so keyboard users can always see where they are.

The block honours prefers-reduced-motion: animations are skipped and content is fully visible.

Live updates run on timers inside effects and pause when the block is off-screen or hovered.

More blocks

PreviousKPI counter

NextPricing toggle