Scroll Fade List

Component 301

About

A scrollable list with gradient fade edges that appear to signal there is more content above or below. The top and bottom fades grow and shrink based on scroll position (measured on scroll and via a ResizeObserver, batched with requestAnimationFrame), leaving a stable scrollbar gutter. It is fully generic over the item type via getKey/items/renderItem, with a configurable max fade height and a themeable background color. Dependency-free.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Scroll Fade List to your project and fits it to your theme.

Code

How Scroll Fade List is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { ScrollFadeList } from "@/components/ui/scroll-fade-list";

const teams = [
  { code: "za", flag: "🇿🇦", name: "South Africa" },
  { code: "ca", flag: "🇨🇦", name: "Canada" },
  { code: "br", flag: "🇧🇷", name: "Brazil" },
  { code: "jp", flag: "🇯🇵", name: "Japan" },
  { code: "de", flag: "🇩🇪", name: "Germany" },
  { code: "py", flag: "🇵🇾", name: "Paraguay" },
  { code: "nl", flag: "🇳🇱", name: "Netherlands" },
  { code: "ma", flag: "🇲🇦", name: "Morocco" },
  { code: "ci", flag: "🇨🇮", name: "Ivory Coast" },
  { code: "no", flag: "🇳🇴", name: "Norway" },
  { code: "fr", flag: "🇫🇷", name: "France" },
  { code: "se", flag: "🇸🇪", name: "Sweden" },
  { code: "mx", flag: "🇲🇽", name: "Mexico" },
  { code: "ec", flag: "🇪🇨", name: "Ecuador" },
  { code: "en", flag: "🏴", name: "England" },
  { code: "cd", flag: "🇨🇩", name: "DR Congo" },
  { code: "be", flag: "🇧🇪", name: "Belgium" },
  { code: "sn", flag: "🇸🇳", name: "Senegal" },
  { code: "us", flag: "🇺🇸", name: "United States" },
  { code: "ba", flag: "🇧🇦", name: "Bosnia and Herzegovina" },
  { code: "es", flag: "🇪🇸", name: "Spain" },
  { code: "at", flag: "🇦🇹", name: "Austria" },
  { code: "pt", flag: "🇵🇹", name: "Portugal" },
  { code: "hr", flag: "🇭🇷", name: "Croatia" },
  { code: "ch", flag: "🇨🇭", name: "Switzerland" },
  { code: "dz", flag: "🇩🇿", name: "Algeria" },
  { code: "au", flag: "🇦🇺", name: "Australia" },
  { code: "eg", flag: "🇪🇬", name: "Egypt" },
  { code: "ar", flag: "🇦🇷", name: "Argentina" },
  { code: "cv", flag: "🇨🇻", name: "Cabo Verde" },
  { code: "co", flag: "🇨🇴", name: "Colombia" },
  { code: "gh", flag: "🇬🇭", name: "Ghana" },
];

export default function Default() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-neutral-100 p-8">
      <div className="w-72">
        <ScrollFadeList
          getKey={(team) => team.code}
          items={teams}
          renderItem={(team) => (
            <span className="flex items-center gap-2">
              <span aria-hidden="true">{team.flag}</span>
              <span>{team.name}</span>
            </span>
          )}
        />
      </div>
    </div>
  );
}