Scroll Fade

Playground

<div className="overflow-hidden rounded-2xl border bg-card"> <ScrollFade className="h-72" hideScrollbar> {/* scrollable content */} </ScrollFade></div>

Usage

Add ScrollFade to the element that scrolls, and put the border/background on a wrapper when needed so the fade dissolves content rather than the card frame.

import { ScrollFade } from "@sophic/portal-ui/components/ui/scroll-fade";

<div className="overflow-hidden rounded-2xl border">
  <ScrollFade className="h-72" hideScrollbar>{/* … */}</ScrollFade>
</div>

Use axis="x" for horizontal scrollers. Props cover edge, size, disabled, and hideScrollbar. Unset size keeps the default fade depth. Further modifiers can go on className — see the shadcn scroll-fade docs.

Props

ScrollFade also accepts every native <div> attribute.

Changelog

• 15 July 2026 — Demo playgrounds sit on a card surface so the fade reads cleanly on the tinted page. Full notes