Feed

The Feed component displays a vertical activity log or timeline. Each item includes an icon, description, link target, and date — ideal for notifications or recent activity sections.

Basic Example

A simple chronological feed showing recent user and system activities.

Color Variants

Each feed item can use a different iconBackground for visual grouping or type differentiation.

Props

Properties for customizing the Feed component.

  • items: FeedItem[] — Required. An array of feed event objects.
  • FeedItem.id: number — Unique identifier for the item.
  • FeedItem.content: string — Main text describing the action or event.
  • FeedItem.target: string — Text for the linked target or reference.
  • FeedItem.href: string — Destination URL for the target link.
  • FeedItem.date: string — Display-friendly date (e.g., “2 hours ago”).
  • FeedItem.datetime: string — Machine-readable date for accessibility.
  • FeedItem.icon: ComponentType<SVGProps<SVGSVGElement>> — Lucide or custom icon for the event type.
  • FeedItem.iconBackground: string — Tailwind background color utility, such as bg-primary or bg-success.

Integration Example

Combine Feed inside dashboards or profile pages to show activity history.