ScrollFade

A scroll container that fades whichever edge still has more content to reveal, instead of cutting content off abruptly.

Installation

npx dafink-ui add scroll-fade

Demo

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7
  • Item 8
  • Item 9
  • Item 10
  • Item 11
  • Item 12

Props

NameTypeDefaultDescription
direction'vertical' | 'horizontal''vertical'Which axis scrolls. Vertical fades top/bottom; horizontal fades left/right.
fadeSizestring'h-10' / 'w-10'Tailwind size class for how deep the fade extends from the edge.
fadeFromstring'from-surface'Tailwind gradient-from color class. Match the scrolling content's actual background or the fade won't blend.
classNamestring''Additional CSS classes merged onto the scrollable element.
wrapperClassNamestring''Additional CSS classes merged onto the outer wrapper; use for flex-sizing (e.g. flex-1 min-h-0) when ScrollFade must grow inside a flex-col parent.
childrenReactNodeundefinedThe scrollable content.

Accessibility

Both edge overlays are aria-hidden and pointer-events-none, purely decorative fade indicators. Their cross-fade is a CSS-only motion-safe:transition-opacity transition, so prefers-reduced-motion is handled via Tailwind's motion-safe variant tied to the global reduced-motion rule rather than a separate JS check — there is no JS-driven animation loop here. ScrollFade adds no ARIA roles, tabindex, or focus handling of its own to the scrollable region or its children.