A long activity feed that only renders the rows in view, with a pinned date header pushed away by the next day. A date scrubber on the edge jumps through weeks and shows the current day in a bubble while scrolling.
npx shadcn@latest add https://hyperblur.dev/r/list-feed-windowed.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/list-feed-windowed.tsx.
import { ListFeedWindowed } from "@/components/hyperblur/list-feed-windowed"
<ListFeedWindowed height={360} onItemClick={(item) => console.log(item.id)} />| Prop | Type | Default | Description |
|---|---|---|---|
| items | FeedEntry[] | 45 days of sample events | Entries with id, day label, time, kind (deploy, comment, payment, alert, signup, merge), actor, text and meta. Entries of one day must be adjacent. |
| height | number | 320 | Viewport height in pixels. |
| rowHeight | number | 54 | Fixed row height used for windowing. |
| headerHeight | number | 30 | Height of each date header. |
| overscan | number | 6 | Extra rows rendered above and below the viewport. |
| accent | string | "#2f7bff" | Color of the active scrubber tick, thumb and focus edge. |
| showScrubber | boolean | true | Shows the date scrubber rail. |
| onItemClick | (item: FeedEntry) => void | Called when a row is clicked. |