Infinite List

Loads additional records while scrolling.

html

<div class="infinite-list" style="--accent:#BFD9F2;">
  <h3 class="infinite-list__heading">Activity feed</h3>
  <ul class="infinite-list__items" data-count="4">
    <li>Priya updated the roadmap</li>
    <li>New comment on Q3 plan</li>
    <li>Marcus joined the workspace</li>
    <li>Budget approved</li>
    <li>Release 4.2 shipped</li>
    <li>Weekly digest sent</li>
    <li>Priya updated the roadmap</li>
    <li>New comment on Q3 plan</li>
  </ul>
  
  
  <p class="infinite-list__status" role="status">Showing 4 of 48 items — scroll to load more.</p>
  
</div>
<style>
.infinite-list { font: 14px/1.4 system-ui, sans-serif; color: #241430; background: #FAF7F2; max-width: 320px; width: 320px; padding: 16px; border-radius: 12px; box-sizing: border-box; }
.infinite-list__heading { margin: 0 0 10px; font-size: 15px; font-weight: 700; }
.infinite-list__items { list-style: none; margin: 0; padding: 0; max-height: 220px; overflow: auto; }
.infinite-list__items li { padding: 8px 10px; border-bottom: 1px solid #24143014; border-left: 3px solid var(--accent); margin-bottom: 4px; background: #fff; border-radius: 0 6px 6px 0; }
ul[data-count="4"] li:nth-child(n+5) { display: none; }
ul[data-count="6"] li:nth-child(n+7) { display: none; }
ul[data-count="8"] li:nth-child(n+9) { display: none; }
.infinite-list__status { margin: 10px 0 0; font-size: 12px; color: #241430a0; text-align: center; }
</style>

tailwind

<div class="infinite-list-tw font-sans text-sm text-[#241430] bg-[#FAF7F2] max-w-[320px] w-[320px] p-4 rounded-xl box-border" style="--accent:#BFD9F2;">
  <h3 class="m-0 mb-2.5 text-[15px] font-bold">Activity feed</h3>
  <ul class="infinite-list-tw__items list-none m-0 p-0 max-h-[220px] overflow-auto" data-count="4">
    <li class="py-2 px-2.5 border-b border-[#24143014] mb-1 bg-white rounded-r-md" style="border-left:3px solid #BFD9F2">Priya updated the roadmap</li>
    <li class="py-2 px-2.5 border-b border-[#24143014] mb-1 bg-white rounded-r-md" style="border-left:3px solid #BFD9F2">New comment on Q3 plan</li>
    <li class="py-2 px-2.5 border-b border-[#24143014] mb-1 bg-white rounded-r-md" style="border-left:3px solid #BFD9F2">Marcus joined the workspace</li>
    <li class="py-2 px-2.5 border-b border-[#24143014] mb-1 bg-white rounded-r-md" style="border-left:3px solid #BFD9F2">Budget approved</li>
    <li class="py-2 px-2.5 border-b border-[#24143014] mb-1 bg-white rounded-r-md" style="border-left:3px solid #BFD9F2">Release 4.2 shipped</li>
    <li class="py-2 px-2.5 border-b border-[#24143014] mb-1 bg-white rounded-r-md" style="border-left:3px solid #BFD9F2">Weekly digest sent</li>
    <li class="py-2 px-2.5 border-b border-[#24143014] mb-1 bg-white rounded-r-md" style="border-left:3px solid #BFD9F2">Priya updated the roadmap</li>
    <li class="py-2 px-2.5 border-b border-[#24143014] mb-1 bg-white rounded-r-md" style="border-left:3px solid #BFD9F2">New comment on Q3 plan</li>
  </ul>
  
  
  <p role="status" class="mt-2.5 mb-0 text-xs text-[#241430a0] text-center">Showing 4 of 48 items — scroll to load more.</p>
  
</div>
<style>
ul[data-count="4"] li:nth-child(n+5) { display: none; }
ul[data-count="6"] li:nth-child(n+7) { display: none; }
ul[data-count="8"] li:nth-child(n+9) { display: none; }
</style>

react

export function InfiniteList({
  heading = "Activity feed",
  accent = "#BFD9F2",
  visibleCount = "4",
  loading = false,
  total = 48,
}) {
  const items = [
    "Priya updated the roadmap", "New comment on Q3 plan", "Marcus joined the workspace",
    "Budget approved", "Release 4.2 shipped", "Weekly digest sent",
    "Priya updated the roadmap", "New comment on Q3 plan",
  ].slice(0, Number(visibleCount));
  return (
    <div style={{ fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430", background: "#FAF7F2", maxWidth: 320, width: 320, padding: 16, borderRadius: 12, boxSizing: "border-box" }}>
      <h3 style={{ margin: "0 0 10px", fontSize: 15, fontWeight: 700 }}>{heading}</h3>
      <ul style={{ listStyle: "none", margin: 0, padding: 0, maxHeight: 220, overflow: "auto" }}>
        {items.map((item, i) => (
          <li key={i} style={{ padding: "8px 10px", borderBottom: "1px solid #24143014", borderLeft: `3px solid ${accent}`, marginBottom: 4, background: "#fff", borderRadius: "0 6px 6px 0" }}>{item}</li>
        ))}
      </ul>
      <p role="status" style={{ margin: "10px 0 0", fontSize: 12, color: "#241430a0", textAlign: "center" }}>
        {loading ? "Loading more items…" : `Showing ${visibleCount} of ${total} items — scroll to load more.`}
      </p>
    </div>
  );
}