Scroll Edge Cues
A free scroll storytelling component that quietly marks the remaining edges of a native overflow region.
Edition workshop / materials desk
Choose the paper before the ink
Cotton rag. 300 gsm, archival matte.
Baryta gloss. 310 gsm, high density.
Japanese kozo. 90 gsm, long fibre.
Translucent vellum. 110 gsm, smooth.
Customise
Code
<ScrollEdgeCues
label="Paper specifications"
className="h-40 w-64"
>
<nav className="min-w-max space-y-6"><a href="#cotton-rag">Cotton rag, 300 gsm</a><a href="#vellum">Vellum, 110 gsm</a></nav>
</ScrollEdgeCues>Scroll Edge Cues adds a subtle indicator to a native scrolling region in React and Next.js. Give it a descriptive label and your own links, text or records. It measures the remaining overflow and shows a cue only where more content can be reached.
The scrollport keeps its browser scrollbar, keyboard behaviour and content order. Cues sit outside the interaction layer, disappear around focused descendants and need no JavaScript for the content to remain readable. Use the horizontal axis for a specification strip or the default vertical axis for a long transcript.
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/scroll-edge-cuesUsage
import { ScrollEdgeCues } from "@/components/scroll-edge-cues";
export default function PaperPage() {
return (
<ScrollEdgeCues label="Paper specifications" axis="horizontal" className="w-full">
<nav className="flex w-max gap-6">
<a href="#cotton">Cotton rag, 300 gsm</a>
<a href="#baryta">Baryta gloss, 310 gsm</a>
<a href="#vellum">Vellum, 110 gsm</a>
</nav>
</ScrollEdgeCues>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | required | Semantic content in its original document order. |
| label | string | required | Nonblank accessible name for the scroll region. Give each instance a distinct name. |
| axis | "vertical" | "horizontal" | "vertical" | Physical edge pair whose remaining content is indicated. |
| className | string | undefined | Additional root classes for sizing and appearance, merged with cn(). |
Customisation
Set the component tokens on an ancestor or the root. The surface colour defaults to the page background; override it inside a scoped surface. Size is capped at 1.25rem so cues stay quiet.
.paper-strip {
--scroll-edge-cue-surface: var(--background);
--scroll-edge-cue-size: 1rem;
--scroll-edge-cue-duration: 120ms;
}Frequently asked questions
- Is Scroll Edge Cues free for commercial use?
- Yes. Scroll Edge Cues is MIT licensed and can be used in personal or commercial projects without attribution.
- Does it replace native scrolling or keyboard input?
- No. Your content stays in a normal focusable overflow region with its native scrollbar, wheel, touch and keyboard behaviour. The decorative cues ignore pointer input and disappear while focus is inside the region.
- What happens without JavaScript or in print?
- The named scroll region and its full content render on the server. Without JavaScript the cues remain absent. Print expands the region and hides the cues so the complete content can be read.