Shadcn Scroll Fade
React scroll fade for overflowing lists and carousels. Built with TypeScript and Tailwind CSS for Next.js using Base UI — mask edges that track the scroll.
A scroll fade dissolves the content at the edge of a scroller. Put scroll-fade on the element with overflow-y-auto. No overlay color — the mask is the content itself.
Usage
<div className="scroll-fade overflow-y-auto">{/* … */}</div>scroll-fade or scroll-fade-y for vertical. scroll-fade-x for a horizontal strip.
Composition
These are CSS utilities from the shadcn package. No component file.
No Overflow, No Fade
If the list fits, the fade stays off. You can leave the class on every list.
Horizontal Scrolling
scroll-fade-x on overflow-x-auto. In RTL the crisp edge follows the start.
Edge Fades
One edge only: scroll-fade-b, scroll-fade-t, or scroll-fade-s / scroll-fade-e for logical inline.
Fade Size
scroll-fade-24 sets a fixed depth. Default is 12% of the box, capped at 40px.
Disabling the Fade
scroll-fade-none wins in any class order. Use it at a breakpoint.
RTL
scroll-fade-x follows reading direction. At rest the start edge is crisp.
API
| Class | What it does |
|---|---|
scroll-fade | Vertical fade, scroll-aware |
scroll-fade-x | Horizontal fade, RTL-aware |
scroll-fade-t / b / s / e | One edge |
scroll-fade-<n> | Fixed size on the spacing scale |
scroll-fade-none | Turn it off |
Notes
Put the class on the scroller
The element with overflow-auto gets the mask. A card wrapper keeps its border; the fade lives on the inner list.
Pair with no-scrollbar if a visible bar should not fade with the content.
With other components
Custom scrollbar plus fade
Message ScrollerFade on the transcript
CommandLong result list
SelectA tall menu
SidebarNav that overflows
CarouselHorizontal strip
Questions
Related
Was this page helpful?
Sign in to leave feedback.
Typography
React typography for headings, paragraphs, and lists. Built with TypeScript and Tailwind CSS for Next.js using Base UI — utility classes, no extra component file.
Shimmer
React shimmer for loading labels and live status text. Built with TypeScript and Tailwind CSS for Next.js using Base UI — a highlight that sweeps currentColor.