Data & collectionsBrick 0.1.2

Feed

Feed presents a styled dynamic stream of rich, focusable articles. Atom owns Feed semantics, positions, busy state, focus, and keyboard movement; Brick owns article separation, density, surfaces, focus paint, and customization hooks.

Live example

Built from the published package

Interactive

Release published

Brick 0.1.0 is ready.

Review requested

Morgan requested review.

Choose with confidence

Know when Feed is the right part

Use it when

Use Feed for activity, news, social posts, or rich notifications that may be added or removed while a person reads and where article-by-article keyboard navigation is useful.

Choose another path when

Use List for a static meaningful sequence, Data Grid for interactive tabular data, Tree for hierarchy, and ordinary Stack/Grid for repeated visual layout without Feed semantics. Timeline remains a separate chronological visual; Feed does not become a timeline merely because Items have timestamps.

Installation and imports

tsx

import { Feed } from "@flowstack-ui/brick";
// or import { Feed } from "@flowstack-ui/brick/feed";
import "@flowstack-ui/brick/styles.css";

The complete stylesheet above is the recommended default. For a measured route-aware build, replace it with the shared foundation and this component's stylesheet:

tsx

import "@flowstack-ui/brick/styles/core.css"; // once at the application root
import "@flowstack-ui/brick/styles/feed.css";

Add the modular stylesheet for every other Brick component the route renders. Do not combine modular styles with styles.css or tokens.css.

Quick start

tsx

const updates = [
  { id: "publish", title: "Release published", summary: "Version 2 is ready." },
  { id: "review", title: "Review requested", summary: "Morgan requested review." },
];

<Feed.Root aria-label="Release activity" setSize={updates.length}>
  {updates.map((update, index) => (
    <Feed.Item
      aria-describedby={`${update.id}-summary`}
      aria-labelledby={`${update.id}-title`}
      index={index}
      key={update.id}
    >
      <h2 id={`${update.id}-title`}>{update.title}</h2>
      <p id={`${update.id}-summary`}>{update.summary}</p>
    </Feed.Item>
  ))}
</Feed.Root>

Visual recipes and states

Plain separates transparent Items with a gap. Divided creates a continuous stream with logical rules between adjacent Items. Outline gives every Item its own bordered, rounded surface and gap so backgrounds and focus rings are not clipped by a shared root.

Compact reduces only Item padding and root gap. Busy state does not add opacity, overlays, spinners, or geometry. Items have no whole-article hover or active affordance. An Item receives the Feed focus outline only when the article itself is focus-visible; links and buttons inside retain their own focus paint.

Examples

Application-owned busy update

tsx

<section aria-labelledby="activity-title">
  <h2 id="activity-title">Activity</h2>
  <Feed.Root aria-labelledby="activity-title" busy={updating} setSize="unknown">
    {updates.map((update, index) => (
      <Feed.Item aria-label={update.title} index={index} key={update.id}>
        {update.content}
      </Feed.Item>
    ))}
  </Feed.Root>
  <p aria-live="polite">{updating ? "Updating activity…" : "Activity current"}</p>
</section>

Public contract

API

Start with the public parts and root options below. Components with multiple parts separate each area into its own named subsection.

Exports

Feed, FeedRootProps, FeedItemProps, FeedVariant, and FeedDensity are available from the root package and Feed subpath.

Root recipes

Prop	Values	Default
`variant`	`plain`, `divided`, `outline`	`divided`
`density`	`compact`, `comfortable`	`comfortable`

Root also preserves Atom busy, setSize, render, asChild, native attributes/events, className, style, custom data-slot, and an HTMLElement ref. busy defaults to false; setSize="unknown" exposes an unknown total to assistive technology.

Item preserves Atom position, index, local setSize, render, asChild, tabIndex, native article attributes/events, className, style, custom data-slot, and an HTMLElement ref. Item defaults tabIndex to 0.

Feed has no items, loading, size, tone, shape, unread, selection, whole-row press, pagination, fetching, or virtualization prop.

Shared responsibility

Accessibility

Give Root a stable accessible name and each Item a useful heading or other name. Reference the primary summary with aria-describedby without including repetitive action labels. PageDown and PageUp move between Items and reveal the destination with nearest scrolling. Control/Command+Home moves before Root and Control/Command+End moves after it. An authored onKeyDown can call preventDefault() to cancel built-in movement.

Set busy only while adding or replacing Feed DOM. Supply accurate positions and totals for paged or virtualized slices. Forced colors retain article boundaries and focus, and reduced motion removes the incidental border transition.

Responsive behavior

Feed is one column, fills its containing inline size, and has no component maximum measure. Long localized and user-generated content wraps without component horizontal scrolling. Logical padding and separators follow RTL; the application owns article reading direction and action layout.

Stable visual contract

Styling and tokens

Customization

Choose a variant first, then override public variables on a local Root. Use plain when authored Item content deliberately supplies its own surface. Custom backgrounds remain contained by each outline Item rather than a clipped shared root.

Tokens and CSS hooks

Stable classes are .brick-feed and .brick-feed__item; default slots are feed and feed-item. Root exposes data-variant and data-density, while Atom exposes data-busy, data-position, and data-setsize when applicable.

Public variables:

--brick-feed-gap
--brick-feed-item-padding-block
--brick-feed-item-padding-inline
--brick-feed-background
--brick-feed-foreground
--brick-feed-border-color
--brick-feed-border-width
--brick-feed-radius
--brick-feed-divider-color
--brick-feed-focus-color
--brick-feed-focus-width
--brick-feed-focus-offset
--brick-feed-transition-duration

Advanced reference

Open these details only when you need to inspect DOM ownership, native forwarding, or lower-level composition.

Maintainer resources

Tests, playground evidence, source notes, and release history remain available without crowding the plug-and-play guide.

Source docs Changelog Playground