ActivityFeed

activityfeed-1779394643266.tsx

'use client'
import { useState } from 'react'

const FEED = [
  { id:1, user:'Alice', action:'created component', target:'GradientButton', icon:'✨', time:'just now', color:'#6d28d9' },
  { id:2, user:'Bob', action:'starred', target:'Empire UI', icon:'⭐', time:'2 min ago', color:'#f59e0b' },
  { id:3, user:'Carol', action:'forked', target:'MCP template', icon:'🔀', time:'5 min ago', color:'#2563eb' },
  { id:4, user:'David', action:'commented on', target:'Issue #42', icon:'💬', time:'12 min ago', color:'#10b981' },
  { id:5, user:'Eve', action:'merged PR', target:'feat/dark-mode', icon:'✅', time:'1h ago', color:'#059669' },
]

export default function ActivityFeed({ items = FEED }) {
  const [feed, setFeed] = useState(items)
  return (
    <div style={{ maxWidth:'400px' }}>
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:'16px' }}>
        <h3 style={{ margin:0, fontSize:'16px', fontWeight:700, color:'#1e293b' }}>Activity Feed</h3>
        <div style={{ display:'flex', alignItems:'center', gap:'6px' }}>
          <div style={{ width:'8px', height:'8px', borderRadius:'50%', background:'#10b981', animation:'pulse 2s infinite' }}/>
          <span style={{ fontSize:'12px', color:'#10b981', fontWeight:600 }}>Live</span>
          <style>{'@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}'}</style>
        </div>
      </div>
      <div style={{ display:'flex', flexDirection:'column', gap:'4px' }}>
        {feed.map(item => (
          <div key={item.id} style={{
            display:'flex', gap:'12px', padding:'12px 14px',
            background:'#fff', borderRadius:'12px', alignItems:'flex-start',
            boxShadow:'0 1px 4px rgba(0,0,0,0.04)',
          }}>
            <div style={{
              width:'36px', height:'36px', borderRadius:'10px', flexShrink:0,
              background:item.color+'20', display:'flex', alignItems:'center', justifyContent:'center', fontSize:'18px',
            }}>{item.icon}</div>
            <div style={{ flex:1 }}>
              <div style={{ fontSize:'13px', color:'#374151', lineHeight:1.5 }}>
                <strong>{item.user}</strong> {item.action} <span style={{ color:item.color, fontWeight:600 }}>{item.target}</span>
              </div>
              <div style={{ fontSize:'11px', color:'#94a3b8', marginTop:'2px' }}>{item.time}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}

Component info

CategoryDashboard & App UI

Frameworkreact

TierFREE

Copies0

About

Real-time activity feed with icons, users and action descriptions

More from Dashboard & App UI

import React from 'react';

interface MetricCardProps {
  value: number;
  trend: 'up' | 'down';
  sparklineData: number[];
}

const MetricCard: React.FC<MetricCardProps> = ({ value, trend, sparklineData }) => {
  return (
    <div style={{ backgroun

MetricCard

Dashboard & App UI

import React from 'react';
import './ProgressRing.css';
interface ProgressRingProps {
  percentage: number;
}
const ProgressRing: React.FC<ProgressRingProps> = ({ percentage }) => {
  const circleDashArray = 2 * Math.PI * 50;
  const circleDashOffset

ProgressRing

Dashboard & App UI

'use client';

import React from 'react';

interface KPIWidgetProps {
  metric: number;
  label: string;
  target: number;
  progress: number;
  sparklineData: number[];
  periodComparison: string;
}

const KPIWidget: React.FC<KPIWidgetProps> = ({

KPIWidget

Dashboard & App UI

'use client'
import { useState, useEffect, useRef } from 'react'

const METRICS = [
  { label: 'Monthly Revenue', value: 48320, prev: 41200, prefix: '$', suffix: '', color: '#C9A84C', data: [22,28,24,32,28,38,35,42,40,48] },
  { label: 'Active Users'

KPICards

Dashboard & App UI