Feed
Activity feed items.
import { Bot, CheckCircle2 } from "lucide-react";import { Feed, FeedItem,} from "@/registry/new-york/items/manpowerhub-feed/components/feed";export function ManpowerhubFeedBasic() { return ( <div className="w-full max-w-md rounded-lg border border-border bg-card p-3"> <Feed> <FeedItem icon={<Bot />} iconClassName="bg-[var(--brand-subtle)] text-[var(--brand)]" title="142 workers → Site Alpha" subtitle="Planning Agent" time="2m" /> <FeedItem icon={<CheckCircle2 />} iconClassName="bg-[var(--green-bg)] text-[var(--green)]" title="Payroll cycle complete" subtitle="$284K · 0 errors" time="1h" /> </Feed> </div> );}Installation
Section titled “Installation”This installation provides support for all official Shadcn icon libraries. The component is otherwise identical to the non-experimental installation.
Icon support is experimental and may not be fully stable since it uses internal Shadcn APIs.
This component relies on other items which must be installed first.
Copy and paste the following code into your project.
components/ui/feed.tsx
import * as React from "react";
import { cn } from "@/lib/utils";
function Feed({ className, ...props }: React.ComponentProps<"div">) { return ( <div data-slot="feed" className={cn("flex flex-col", className)} {...props} /> );}
export interface FeedItemProps extends Omit< React.ComponentProps<"div">, "title"> { icon?: React.ReactNode; iconClassName?: string; title: React.ReactNode; subtitle?: React.ReactNode; time?: React.ReactNode;}
function FeedItem({ className, icon, iconClassName, title, subtitle, time, ...props}: FeedItemProps) { return ( <div data-slot="feed-item" className={cn( "flex items-start gap-2.25 border-b border-[var(--color-border-subtle)] py-2.25 last:border-b-0", className, )} {...props} > {icon ? ( <div className={cn( "mt-0.5 grid size-[26px] shrink-0 place-items-center rounded-[var(--r-sm)] [&_svg]:size-3.25", iconClassName, )} > {icon} </div> ) : null} <div className="min-w-0 flex-1"> <div className="mb-px text-[12.5px] font-medium text-foreground"> {title} </div> {subtitle ? ( <div className="text-[11.5px] text-[var(--text-3)]">{subtitle}</div> ) : null} </div> {time ? ( <span className="shrink-0 text-[11px] whitespace-nowrap text-[var(--text-3)]"> {time} </span> ) : null} </div> );}
export { Feed, FeedItem };Update the import paths to match your project setup.
Install the ManpowerHub theme first, then add this feed:
npx shadcn@latest add @woxcn/manpowerhub-feed