Activity stream
An animated event feed with insertion and dismiss controls.
LIVE FEED
LiveRecent activity
- Maya published a component
Comparison reveal is ready for review
- Jordan updated tokens
Refined the ocean accent scale
- Avery left feedback
Three notes on the motion pass
Implementation
1"use client";2 3import { X } from "lucide-react";4 5export type ActivityItem = {6 id: string;7 title: string;8 detail: string;9 time: string;10 initials: string;11 tone?: "blue" | "violet" | "mint" | "coral";12};13 14export type ActivityStreamProps = {15 items: ActivityItem[];16 title?: string;17 maxVisible?: number;18 onDismiss?: (id: string) => void;19 className?: string;20};21 22/** A live activity surface; the owner controls insertion and dismissal. */23export function ActivityStream({24 items,25 title = "Recent activity",26 maxVisible = 4,27 onDismiss,28 className = "",