Data Display
Activity Feed
A chronological activity feed with icons, actor avatars, and action links.
by mcpSkills
Framework
nextjs
UI Library
shadcntailwind
Difficultybeginner
English Prompt
Create an activity feed component showing a chronological list of events. Each item includes an actor avatar, an icon indicating the action type, a description line with clickable user and object names, and a relative timestamp. Use shadcn/ui Avatar and Tailwind CSS. Group items by date headers (Today, Yesterday) and add hover states on interactive parts.
Chinese Prompt
创建一个按时间顺序显示事件列表的活动流组件。每个项目包含参与者头像、表示操作类型的图标、带可点击用户和对象名称的描述行以及相对时间戳。使用 shadcn/ui Avatar 和 Tailwind CSS。按日期分组（Today、Yesterday）并为交互部分添加悬停状态。
## Overview
An activity feed for dashboards and social apps. Shows what happened, who did it, and when.
## Features
- Chronological event list
- Actor avatars
- Action type icons
- Clickable entity links
- Relative timestamps
- Date group headers
- Hover states
## Usage
Copy the prompt into v0 or Cursor. Connect the feed to your activity log API.
## Customization
Modify the prompt to:
- Add load more pagination
- Include filter by activity type
- Show inline actions per event
- Add real-time updates