ScrollFade

Wraps a scrollable region and overlays a gradient fade at the edges where content is clipped — top fade appears once you've scrolled down, bottom fade hides when you reach the end.

Vertical (default)

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20

<ScrollFade className="max-h-[200px]" surface="var(--background)">
  <ul className="divide-y divide-border">
    {items.map((label) => (
      <li key={label} className="px-3 py-2">{label}</li>
    ))}
  </ul>
</ScrollFade>

Horizontal

Item 1Item 2Item 3Item 4Item 5Item 6Item 7Item 8Item 9Item 10Item 11Item 12Item 13Item 14Item 15Item 16Item 17Item 18Item 19Item 20

<ScrollFade direction="horizontal" className="max-w-[280px]" surface="var(--background)">
  <div className="flex gap-2 p-2">
    {items.map((label) => (
      <span key={label} className="rounded-md bg-muted px-3 py-1 whitespace-nowrap">{label}</span>
    ))}
  </div>
</ScrollFade>

Disabled (toggle off)

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20

<ScrollFade enabled={false} className="max-h-[200px]">
  …
</ScrollFade>

Props

Prop	Type	Default
direction	"vertical" \| "horizontal"	"vertical"
surface	string (CSS color)	"var(--background)"
size	number (px)	24
enabled	boolean	true
className	string — passed to the overflow container	—

Source

packages/react/src/components/scroll-fade.tsx