ScrollShadow
A scrollable container with gradient shadow indicators for better scroll awareness
Installation
- $npx litefy@latest add scroll-shadow
- $pnpm dlx litefy@latest add scroll-shadow
- $yarn dlx litefy@latest add scroll-shadow
- $bun --bun litefy@latest add scroll-shadow
Usage
A scrollable container with gradient shadow indicators — edges picks the side(s), classNames.edge overrides the built-in h-16 / w-16 gradient size.
Bottom (default)
Item 1 - Scroll to see the shadow effect
Item 2 - Scroll to see the shadow effect
Item 3 - Scroll to see the shadow effect
Item 4 - Scroll to see the shadow effect
Item 5 - Scroll to see the shadow effect
Item 6 - Scroll to see the shadow effect
Item 7 - Scroll to see the shadow effect
Item 8 - Scroll to see the shadow effect
Item 9 - Scroll to see the shadow effect
Item 10 - Scroll to see the shadow effect
Item 11 - Scroll to see the shadow effect
Item 12 - Scroll to see the shadow effect
Item 13 - Scroll to see the shadow effect
Item 14 - Scroll to see the shadow effect
Item 15 - Scroll to see the shadow effect
Item 16 - Scroll to see the shadow effect
Item 17 - Scroll to see the shadow effect
Item 18 - Scroll to see the shadow effect
Item 19 - Scroll to see the shadow effect
Item 20 - Scroll to see the shadow effect
Top + bottom
Item 1 - Scroll to see the shadow effect
Item 2 - Scroll to see the shadow effect
Item 3 - Scroll to see the shadow effect
Item 4 - Scroll to see the shadow effect
Item 5 - Scroll to see the shadow effect
Item 6 - Scroll to see the shadow effect
Item 7 - Scroll to see the shadow effect
Item 8 - Scroll to see the shadow effect
Item 9 - Scroll to see the shadow effect
Item 10 - Scroll to see the shadow effect
Item 11 - Scroll to see the shadow effect
Item 12 - Scroll to see the shadow effect
Item 13 - Scroll to see the shadow effect
Item 14 - Scroll to see the shadow effect
Item 15 - Scroll to see the shadow effect
Item 16 - Scroll to see the shadow effect
Item 17 - Scroll to see the shadow effect
Item 18 - Scroll to see the shadow effect
Item 19 - Scroll to see the shadow effect
Item 20 - Scroll to see the shadow effect
Small edge (h-8)
Item 1 - Scroll to see the shadow effect
Item 2 - Scroll to see the shadow effect
Item 3 - Scroll to see the shadow effect
Item 4 - Scroll to see the shadow effect
Item 5 - Scroll to see the shadow effect
Item 6 - Scroll to see the shadow effect
Item 7 - Scroll to see the shadow effect
Item 8 - Scroll to see the shadow effect
Item 9 - Scroll to see the shadow effect
Item 10 - Scroll to see the shadow effect
Item 11 - Scroll to see the shadow effect
Item 12 - Scroll to see the shadow effect
Item 13 - Scroll to see the shadow effect
Item 14 - Scroll to see the shadow effect
Item 15 - Scroll to see the shadow effect
Item 16 - Scroll to see the shadow effect
Item 17 - Scroll to see the shadow effect
Item 18 - Scroll to see the shadow effect
Item 19 - Scroll to see the shadow effect
Item 20 - Scroll to see the shadow effect
Large edge (h-32)
Item 1 - Scroll to see the shadow effect
Item 2 - Scroll to see the shadow effect
Item 3 - Scroll to see the shadow effect
Item 4 - Scroll to see the shadow effect
Item 5 - Scroll to see the shadow effect
Item 6 - Scroll to see the shadow effect
Item 7 - Scroll to see the shadow effect
Item 8 - Scroll to see the shadow effect
Item 9 - Scroll to see the shadow effect
Item 10 - Scroll to see the shadow effect
Item 11 - Scroll to see the shadow effect
Item 12 - Scroll to see the shadow effect
Item 13 - Scroll to see the shadow effect
Item 14 - Scroll to see the shadow effect
Item 15 - Scroll to see the shadow effect
Item 16 - Scroll to see the shadow effect
Item 17 - Scroll to see the shadow effect
Item 18 - Scroll to see the shadow effect
Item 19 - Scroll to see the shadow effect
Item 20 - Scroll to see the shadow effect
import { ScrollShadow } from "@/ui";const ids = Array.from({ length: 20 }, (_, i) => i);export default function ScrollShadowBasicDemo() { return ( <div className="grid w-full max-w-2xl grid-cols-1 gap-4 sm:grid-cols-2"> <div> <h3 className="mb-2 text-sm font-medium">Bottom (default)</h3> <ScrollShadow className="h-48 border rounded-md"> {ids.map((id) => ( <p key={id} className="p-4 border-b last:border-b-0"> Item {id + 1} - Scroll to see the shadow effect </p> ))} </ScrollShadow> </div> <div> <h3 className="mb-2 text-sm font-medium">Top + bottom</h3> <ScrollShadow edges={["top", "bottom"]} className="h-48 border rounded-md"> {ids.map((id) => ( <p key={id} className="p-4 border-b last:border-b-0"> Item {id + 1} - Scroll to see the shadow effect </p> ))} </ScrollShadow> </div> <div> <h3 className="mb-2 text-sm font-medium">Small edge (h-8)</h3> <ScrollShadow className="h-48 border rounded-md" classNames={{ edge: "h-8" }}> {ids.map((id) => ( <p key={id} className="p-4 border-b last:border-b-0"> Item {id + 1} - Scroll to see the shadow effect </p> ))} </ScrollShadow> </div> <div> <h3 className="mb-2 text-sm font-medium">Large edge (h-32)</h3> <ScrollShadow className="h-48 border rounded-md" classNames={{ edge: "h-32" }}> {ids.map((id) => ( <p key={id} className="p-4 border-b last:border-b-0"> Item {id + 1} - Scroll to see the shadow effect </p> ))} </ScrollShadow> </div> </div> );}API Reference
ScrollShadow
A scrollable container with gradient shadow indicators.
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | - | Scrollable content |
edges | 'top' | 'bottom' | 'left' | 'right' | Array<'top' | 'bottom' | 'left' | 'right'> | 'bottom' | Edge(s) where the shadow indicator appears |
onScroll | React.UIEventHandler<HTMLDivElement> | - | Attached to the viewport — e.g. for infinite-scroll triggers |
className | ClassNameValue | - | Custom classes, applied to the root container |
style | React.CSSProperties | - | Inline styles, applied to the root container |
classNames | { viewport?, edge? } | - | Custom classes for the scroll viewport and shadow overlays (override the built-in h-16 / w-16 edge size here) |
styles | { viewport?, edge? } | - | Inline styles for the scroll viewport and shadow overlays |
Composable Components
ScrollShadowRoot
The outer container that hides overflow and anchors the shadow overlays.
| Prop | Type | Default | Description |
|---|---|---|---|
className | ClassNameValue | - | Custom CSS class |
Supports all native <div> attributes.
ScrollShadowViewport
The scrollable viewport filling the root.
| Prop | Type | Default | Description |
|---|---|---|---|
className | ClassNameValue | - | Custom CSS class |
Supports all native <div> attributes, including ref.
ScrollShadowEdge
A single gradient shadow overlay for one edge.
| Prop | Type | Default | Description |
|---|---|---|---|
edge | 'top' | 'bottom' | 'left' | 'right' | 'bottom' | Edge the gradient points from |
className | ClassNameValue | - | Custom CSS class (built-in size is h-16 / w-16) |
Supports all native <div> attributes; visibility is toggled by the composite ScrollShadow based on scroll position.