# Feed

> A stream of posts that loads more as people scroll.

- **Level**: organism · **Status**: stable · **Role**: content
- **Import**: `import { Feed } from "@rrios-forge/ui/organisms/feed";`
- **Source**: `packages/ui/src/organisms/feed`

Infinite-scroll content feed. Pure presentation: pass `items`, `hasMore`, `loading`, `onLoadMore` and `renderItem` — the Feed handles the sentinel, the loading shelf and the empty / end-of-feed states. Three layouts (single, grid, masonry); `role="feed"` ARIA pattern with `aria-busy` while loading. Pair with SWR / React Query / vanilla `useEffect` for the data layer.

## Use it for

- Feed card / infinite feed → `FeedCard` / `Feed`

## Axes

| Axis | Part | Values | Default | Meaning |
|---|---|---|---|---|
| `layout` | — | `single` `grid` `masonry` | `single` | Arrangement of a composite. |
| `columns` | — | `2` `3` `4` | `3` | How many columns a grid layout takes from its widest breakpoint (ADR-039). |

## Stories

- [Single Column](/?path=/story/components-organisms-feed--single-column) · frame: `/iframe.html?id=components-organisms-feed--single-column&viewMode=story`
- [Grid](/?path=/story/components-organisms-feed--grid) · frame: `/iframe.html?id=components-organisms-feed--grid&viewMode=story`
- [Masonry](/?path=/story/components-organisms-feed--masonry) · frame: `/iframe.html?id=components-organisms-feed--masonry&viewMode=story`
- [Empty](/?path=/story/components-organisms-feed--empty) · frame: `/iframe.html?id=components-organisms-feed--empty&viewMode=story`
- [Initial loading (skeleton)](/?path=/story/components-organisms-feed--initial-loading) · frame: `/iframe.html?id=components-organisms-feed--initial-loading&viewMode=story`
- [End of feed](/?path=/story/components-organisms-feed--end-of-feed) · frame: `/iframe.html?id=components-organisms-feed--end-of-feed&viewMode=story`
- [Content variety (any element)](/?path=/story/components-organisms-feed--content-variety) · frame: `/iframe.html?id=components-organisms-feed--content-variety&viewMode=story`
- [Headless data layer (consumer-owned)](/?path=/story/components-organisms-feed--swr-ready) · frame: `/iframe.html?id=components-organisms-feed--swr-ready&viewMode=story`
- [Chat mode (anchor=bottom)](/?path=/story/components-organisms-feed--chat-mode) · frame: `/iframe.html?id=components-organisms-feed--chat-mode&viewMode=story`

## Decisions that name it

- ADR-020 — Feed `anchor="bottom"` (conversation mode) instead of a ChatThread organism

## Always

- Tokens only (R04); variants are semantic axes, never appearance (R02).
- Typography and actions are Poesía atoms, never raw HTML with utilities.
- Vibrant panes need a ground and never nest (ADR-027).