StorybookGitHub

scroll-fade

Utilities for adding a fade effect to the edges of a scroll container.

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

Installation

npx shadcn@latest add https://reactdocs.canceydejean.dev/r/scroll-fade.json

Usage

Scroll-aware edge fades for overflow containers. Classes ship in shadcn/tailwind.css — import that in your global CSS (or install the design system styles item).

@import "tailwindcss";
@import "shadcn/tailwind.css";
import { scrollFadeClass } from "@/lib/scroll-fade";

<div className={`${scrollFadeClass} max-h-48`}>
  {/* long content */}
</div>

Or use the utilities directly:

<div className="scroll-fade max-h-48 overflow-y-auto">{/* ... */}</div>
<div className="scroll-fade-x overflow-x-auto">{/* ... */}</div>
<div className="scroll-fade-b overflow-y-auto">{/* ... */}</div>
ClassEffect
scroll-fade / scroll-fade-yTop + bottom edges, vertical scroll
scroll-fade-xStart + end edges, horizontal scroll (RTL-aware)
scroll-fade-t / b / l / rSingle physical edge
scroll-fade-s / eLogical inline edges (mirror in RTL)
scroll-fade-<n>Fixed fade depth on the spacing scale
scroll-fade-noneDisable the fade

Put the background and border on a wrapper; put scroll-fade on the inner scroller so the mask dissolves content, not the chrome.