Feed

Overview

Scrollable chronological list of activity events with optional load-more pagination.

Usage

Feed is a compound component. Import the parent and compose Feed.Event via the namespace API.

<script lang="ts">
  import { Feed } from '@lostgradient/cinder/feed';
</script>

<Feed aria-label="Project activity">
  <Feed.Event datetime="2025-05-12T15:30:00Z" timestamp="2m ago">
    {#snippet icon()}
      <span aria-hidden="true">★</span>
    {/snippet}
    <p>Ada Lovelace starred the repository.</p>
  </Feed.Event>
</Feed>

The event body is the default child content. The visible time label is the timestamp string (use the timestampLabel snippet only when the label needs markup); if omitted, it falls back to the raw datetime value.

The leaf remains importable individually for à-la-carte builds — see @lostgradient/cinder/feed-event.

Live preview

When to use

Use when

Rendering an activity log, audit trail, or notification timeline.
Announcing newly appended entries to assistive technology via the live prop.

Avoid when

Displaying a one-off transient notice — use toast-region or banner instead.

Examples

Basic feed

A semantic feed of dated events. Uses the Feed namespace API: Feed.Event composes inside the parent Feed list. The event body is the default child content; the visible time label is a plain `timestamp` string.

Props

Props for feed
Name	Type	Default	Required	Bindable	Description
`live`	`boolean`	`false`			When true, the wrapper becomes an ARIA live region: `aria-live="polite"` and `aria-atomic="false"`. Use for feeds that mutate while the user is on the page (streaming notifications, log tails, chat-like activity). Defaults to false — a polite live region on a static feed is noise.
`children`	`snippet`		req		Feed events (typically `<FeedEvent>` children).