Klyv Activity Feed

Component

About

A transaction feed grouped by day with sticky headers and rows that expand in place, so the reader keeps their position.

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

Code

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

Usage.tsx

import { Gamepad2, Gift, Music, Zap } from "lucide-react";
import { ActivityFeed } from "@/components/ui/klyv-activity-feed";
import { Card } from "@/components/ui/klyv-activity-feed-utils/components-Card-Card";
import { type ActivityEntry } from "@/components/ui/klyv-activity-feed";

const SourceExample = () => (
          <Card title="Activity" className="h-[420px] w-full max-w-[520px]">
            <div className="no-scrollbar mt-2 min-h-0 flex-1 overflow-y-auto">
              <ActivityFeed entries={FEED} label="Recent activity" showDailyTotals />
            </div>
          </Card>
        );
const FEED: ActivityEntry[] = [
  {
    id: '1',
    date: isoDaysAgo(0),
    title: 'Sarah Rosewood',
    subtitle: 'Incoming transfer',
    amount: 125,
    details: [
      { term: 'Reference', description: 'Rent share' },
      { term: 'Arrived', description: 'Today, 4:28 PM' },
      { term: 'Account', description: '**** 5199' },
    ],
  },
  { id: '2', date: isoDaysAgo(0), title: 'GumZone', subtitle: 'Monthly plan', amount: -35, icon: Gamepad2 },
  {
    id: '3',
    date: isoDaysAgo(1),
    title: 'Apple Music',
    subtitle: 'Monthly plan',
    amount: -4.99,
    icon: Music,
    details: [
      { term: 'Next payment', description: '14 November' },
      { term: 'Since', description: 'March 2024' },
    ],
  },
  { id: '4', date: isoDaysAgo(1), title: 'Jack Hammer', subtitle: 'Outgoing transfer', amount: -24.05 },
  { id: '5', date: isoDaysAgo(3), title: 'Electric Co.', subtitle: 'Utility bill', amount: -63.69, icon: Zap },
  {
    id: '6',
    date: isoDaysAgo(3),
    title: 'Cashback',
    subtitle: 'Partner reward',
    amount: 42.1,
    icon: Gift,
    details: [{ term: 'Partner', description: 'Mcdonalds' }, { term: 'Rate', description: '10%' }],
  },
]

function isoDaysAgo(days: number): string {
  const date = new Date()
  date.setDate(date.getDate() - days)
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
}

export default function Demo(){return <div data-component-demo className="flex min-h-screen w-full items-center justify-center bg-canvas p-8 text-ink"><div className="w-full max-w-[620px]"><SourceExample /></div></div>}