"use client"

import * as React from "react"
import { cn } from "@/registry/lib/utils"

interface ScrollFadeProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Show gradient skims at top and bottom edges */
  skim?: boolean
  /** Height of the fade gradient in pixels (default: 24) */
  skimHeight?: number
  /** Add vertical padding inside the scroll area so content clears the skim (default: true when skim is on) */
  skimPadding?: boolean
  /** Color the edges fade into — must match the surface behind the scroll area (default: var(--background)) */
  fadeColor?: string
}

function ScrollFade({
  className,
  skim = false,
  skimHeight = 24,
  skimPadding,
  fadeColor = "var(--background)",
  children,
  ...props
}: ScrollFadeProps) {
  const scrollRef = React.useRef<HTMLDivElement>(null)
  const [edges, setEdges] = React.useState({ top: false, bottom: false })
  const addPadding = skimPadding ?? skim

  React.useEffect(() => {
    const el = scrollRef.current
    if (!el || !skim) return

    function update() {
      if (!el) return
      const atTop = el.scrollTop <= 1
      const atBottom = el.scrollTop + el.clientHeight >= el.scrollHeight - 1
      setEdges({ top: !atTop, bottom: !atBottom })
    }

    update()
    el.addEventListener("scroll", update, { passive: true })
    const observer = new ResizeObserver(update)
    observer.observe(el)
    return () => {
      el.removeEventListener("scroll", update)
      observer.disconnect()
    }
  }, [skim])

  // Edges fade via overlay gradients above the content — the scroll region's
  // own pixels are never masked, so live content is not clipped (Emil: do not
  // apply a fade mask to scrollable content).
  return (
    <div data-slot="scroll-fade" className={cn("relative min-h-0 overflow-hidden", className)} {...props}>
      <div
        data-slot="scroll-fade-viewport"
        ref={scrollRef}
        className={cn(
          "min-h-0 h-full overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
          addPadding && "pt-5 pb-5"
        )}
      >
        {children}
      </div>
      {skim && edges.top && (
        <div
          aria-hidden
          className="pointer-events-none absolute inset-x-0 top-0"
          style={{ height: skimHeight, background: `linear-gradient(to bottom, ${fadeColor}, transparent)` }}
        />
      )}
      {skim && edges.bottom && (
        <div
          aria-hidden
          className="pointer-events-none absolute inset-x-0 bottom-0"
          style={{ height: skimHeight, background: `linear-gradient(to top, ${fadeColor}, transparent)` }}
        />
      )}
    </div>
  )
}

export { ScrollFade }
Search documentation

Scroll Fade

Installation

Usage

Examples

Default
