Activity Feed Card

A stacked activity feed where each row carries a tinted icon chip, a title and meta line, and a relative timestamp.

Activity

Rowan Blake confirmed

Intake · 09:00

Invoice #4821 paid

$1,240 · Card

18m

Renewal due soon

3 members this week

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use

import { Notification18 } from "@/components/beste/piece/notification18";

<Notification18
  title="Activity"
  items={[
    {
      "icon": {
        "displayName": "CalendarCheck"
      },
      "title": "Rowan Blake confirmed",
      "meta": "Intake · 09:00",
      "time": "2m",
      "tone": "emerald"
    },
    {
      "icon": {
        "displayName": "CreditCard"
      },
      "title": "Invoice #4821 paid",
      "meta": "$1,240 · Card",
      "time": "18m",
      "tone": "primary"
    },
    {
      "icon": {
        "displayName": "Bell"
      },
      "title": "Renewal due soon",
      "meta": "3 members this week",
      "time": "1h",
      "tone": "amber"
    }
  ]}
/>