ScrollShadow
A scrollable container with gradient shadow indicators for better scroll awareness
Installation
Usage
Basic Usage
A scrollable container with bottom shadow indicator.
Item 1 - Scroll to see the shadow effect at the bottom
Item 2 - Scroll to see the shadow effect at the bottom
Item 3 - Scroll to see the shadow effect at the bottom
Item 4 - Scroll to see the shadow effect at the bottom
Item 5 - Scroll to see the shadow effect at the bottom
Item 6 - Scroll to see the shadow effect at the bottom
Item 7 - Scroll to see the shadow effect at the bottom
Item 8 - Scroll to see the shadow effect at the bottom
Item 9 - Scroll to see the shadow effect at the bottom
Item 10 - Scroll to see the shadow effect at the bottom
Item 11 - Scroll to see the shadow effect at the bottom
Item 12 - Scroll to see the shadow effect at the bottom
Item 13 - Scroll to see the shadow effect at the bottom
Item 14 - Scroll to see the shadow effect at the bottom
Item 15 - Scroll to see the shadow effect at the bottom
Item 16 - Scroll to see the shadow effect at the bottom
Item 17 - Scroll to see the shadow effect at the bottom
Item 18 - Scroll to see the shadow effect at the bottom
Item 19 - Scroll to see the shadow effect at the bottom
Item 20 - Scroll to see the shadow effect at the bottom
import { ScrollShadow } from "@/ui";const ids = Array.from({ length: 20 }, (_, i) => i);export default function ScrollShadowBasicDemo() { return ( <ScrollShadow className={"h-64 border rounded-md"}> {ids.map((id) => { const text = `Item ${id + 1} - Scroll to see the shadow effect at the bottom`; return ( <p key={id} className="p-4 border-b last:border-b-0"> {text} </p> ); })} </ScrollShadow> );}Shadow Position
Control where the shadow appears: top, bottom, left, or right.
Top
Item 1 - Shadow appears at different positions
Item 2 - Shadow appears at different positions
Item 3 - Shadow appears at different positions
Item 4 - Shadow appears at different positions
Item 5 - Shadow appears at different positions
Item 6 - Shadow appears at different positions
Item 7 - Shadow appears at different positions
Item 8 - Shadow appears at different positions
Item 9 - Shadow appears at different positions
Item 10 - Shadow appears at different positions
Item 11 - Shadow appears at different positions
Item 12 - Shadow appears at different positions
Item 13 - Shadow appears at different positions
Item 14 - Shadow appears at different positions
Item 15 - Shadow appears at different positions
Item 16 - Shadow appears at different positions
Item 17 - Shadow appears at different positions
Item 18 - Shadow appears at different positions
Item 19 - Shadow appears at different positions
Item 20 - Shadow appears at different positions
Bottom
Item 1 - Shadow appears at different positions
Item 2 - Shadow appears at different positions
Item 3 - Shadow appears at different positions
Item 4 - Shadow appears at different positions
Item 5 - Shadow appears at different positions
Item 6 - Shadow appears at different positions
Item 7 - Shadow appears at different positions
Item 8 - Shadow appears at different positions
Item 9 - Shadow appears at different positions
Item 10 - Shadow appears at different positions
Item 11 - Shadow appears at different positions
Item 12 - Shadow appears at different positions
Item 13 - Shadow appears at different positions
Item 14 - Shadow appears at different positions
Item 15 - Shadow appears at different positions
Item 16 - Shadow appears at different positions
Item 17 - Shadow appears at different positions
Item 18 - Shadow appears at different positions
Item 19 - Shadow appears at different positions
Item 20 - Shadow appears at different positions
import { ScrollShadow } from "@/ui";const ids = Array.from({ length: 20 }, (_, i) => i);export default function ScrollShadowPositionDemo() { return ( <div className="grid grid-cols-2 gap-4"> <div> <h3 className="text-sm font-medium mb-2">Top</h3> <ScrollShadow edges="top" className={"h-48 border rounded-md"}> {ids.map((id) => ( <p key={id} className="p-4 border-b last:border-b-0"> Item {id + 1} - Shadow appears at different positions </p> ))} </ScrollShadow> </div> <div> <h3 className="text-sm font-medium mb-2">Bottom</h3> <ScrollShadow edges="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} - Shadow appears at different positions </p> ))} </ScrollShadow> </div> </div> );}Custom Size
Adjust the shadow gradient size for different visual effects — override the built-in h-16 / w-16 through classNames.edge.
Small (h-8)
Item 1 - Custom shadow size demonstration
Item 2 - Custom shadow size demonstration
Item 3 - Custom shadow size demonstration
Item 4 - Custom shadow size demonstration
Item 5 - Custom shadow size demonstration
Item 6 - Custom shadow size demonstration
Item 7 - Custom shadow size demonstration
Item 8 - Custom shadow size demonstration
Item 9 - Custom shadow size demonstration
Item 10 - Custom shadow size demonstration
Item 11 - Custom shadow size demonstration
Item 12 - Custom shadow size demonstration
Item 13 - Custom shadow size demonstration
Item 14 - Custom shadow size demonstration
Item 15 - Custom shadow size demonstration
Item 16 - Custom shadow size demonstration
Item 17 - Custom shadow size demonstration
Item 18 - Custom shadow size demonstration
Item 19 - Custom shadow size demonstration
Item 20 - Custom shadow size demonstration
Large (h-32)
Item 1 - Custom shadow size demonstration
Item 2 - Custom shadow size demonstration
Item 3 - Custom shadow size demonstration
Item 4 - Custom shadow size demonstration
Item 5 - Custom shadow size demonstration
Item 6 - Custom shadow size demonstration
Item 7 - Custom shadow size demonstration
Item 8 - Custom shadow size demonstration
Item 9 - Custom shadow size demonstration
Item 10 - Custom shadow size demonstration
Item 11 - Custom shadow size demonstration
Item 12 - Custom shadow size demonstration
Item 13 - Custom shadow size demonstration
Item 14 - Custom shadow size demonstration
Item 15 - Custom shadow size demonstration
Item 16 - Custom shadow size demonstration
Item 17 - Custom shadow size demonstration
Item 18 - Custom shadow size demonstration
Item 19 - Custom shadow size demonstration
Item 20 - Custom shadow size demonstration
import { ScrollShadow } from "@/ui";const ids = Array.from({ length: 20 }, (_, i) => i);export default function ScrollShadowSizeDemo() { return ( <div className="grid grid-cols-2 gap-4"> <div> <h3 className="text-sm font-medium mb-2">Small (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} - Custom shadow size demonstration </p> ))} </ScrollShadow> </div> <div> <h3 className="text-sm font-medium mb-2">Large (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} - Custom shadow size demonstration </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 |
Each shadow overlay carries a data-position attribute (top / bottom / left / right), so single edges can be targeted with variants like data-[position=top]:. The overlays are purely visual — pointer-events: none keeps them from blocking scroll or click interactions.
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 not managed by the part itself; the composite ScrollShadow toggles it based on scroll position.