Scroll fade

A fade effect overlay component that provides visual indication of scrollable content.

Installation

npx shadcn@latest add https://spoke.georgedrury.co.uk/r/scroll-fade

Lineage

Spoke

Usage

The ScrollFade component works as an overlay positioned at the edges of scrollable content. It uses sticky positioning and gradient effects to indicate there's more content to scroll to.

With ScrollArea

import { ScrollArea } from "@/registry/spoke/scroll-area"
import { ScrollFade } from "@/registry/spoke/scroll-fade"

export function Example() {
	return (
		<ScrollArea className="h-[400px]">
			<ScrollFade side="top" />

			<div className="p-4 space-y-4">{/* Your scrollable content */}</div>

			<ScrollFade side="bottom" />
		</ScrollArea>
	)
}

With Custom Container

<div className="relative h-64 overflow-auto">
	<ScrollFade side="top" />

	<div className="p-4">{/* Your scrollable content */}</div>

	<ScrollFade side="bottom" />
</div>

Horizontal Scrolling

<ScrollArea className="w-[600px]">
	<ScrollFade side="left" />

	<div className="flex gap-4 w-max p-4">{/* Wide horizontal content */}</div>

	<ScrollFade side="right" />
</ScrollArea>

Spoke utility classes

Class	Variable chain	Description
`--background`	`var(--background)`	Base color for gradient effect