Scroll Fade

A scroll container with edge gradient fades and an optional 'more below' indicator pill, so long lists visibly communicate that they scroll.

$bunx shadcn@latest add @nx-ui/scroll-fade
Registry item
Installs withutils

Primary usage

Wrap any long list: gradient fades appear at whichever edge still has content beyond it and vanish at the ends. Pass the from-* token matching the surface behind the list — from-background here, from-sidebar in the app-shell gutter.

  • NX-48201 · Soil and stones
  • NX-48202 · Crushed concrete
  • NX-48203 · Green waste
  • NX-48204 · Mixed inert fill
  • NX-48205 · Road planings
  • NX-48206 · Topsoil (screened)
  • NX-48207 · Subsoil
  • NX-48208 · Recycled aggregate
  • NX-48209 · Compost oversize
  • NX-48210 · Gypsum offcuts
  • NX-48211 · Timber (grade A)
  • NX-48212 · Excavated clay
  • NX-48213 · Dredging spoil
  • NX-48214 · Glass cullet

With the indicator pill

indicator adds the explicit 'there's something down here' affordance: a chevron pill floating at the foot of the list while content remains below the fold. Clicking it scrolls a viewport; it fades out (and leaves the tab order) at the bottom, and respects prefers-reduced-motion throughout. indicatorLabel adds text — for example a count hint.

  • NX-48201 · Soil and stones
  • NX-48202 · Crushed concrete
  • NX-48203 · Green waste
  • NX-48204 · Mixed inert fill
  • NX-48205 · Road planings
  • NX-48206 · Topsoil (screened)
  • NX-48207 · Subsoil
  • NX-48208 · Recycled aggregate
  • NX-48209 · Compost oversize
  • NX-48210 · Gypsum offcuts
  • NX-48211 · Timber (grade A)
  • NX-48212 · Excavated clay
  • NX-48213 · Dredging spoil
  • NX-48214 · Glass cullet
  • NX-48201 · Soil and stones
  • NX-48202 · Crushed concrete
  • NX-48203 · Green waste
  • NX-48204 · Mixed inert fill
  • NX-48205 · Road planings
  • NX-48206 · Topsoil (screened)
  • NX-48207 · Subsoil
  • NX-48208 · Recycled aggregate
  • NX-48209 · Compost oversize
  • NX-48210 · Gypsum offcuts
  • NX-48211 · Timber (grade A)
  • NX-48212 · Excavated clay
  • NX-48213 · Dredging spoil
  • NX-48214 · Glass cullet

In a sidebar nav

The canonical app-shell wiring: inside AppSidebar, ScrollFade wraps the SidebarNav so a long navigation tree fades against the gutter surface (fadeFrom defaults to from-sidebar). The showcase's own sidebar is composed exactly this way — see the Sidebar Nav block for the full pattern.

API reference

Exported parts and their props, extracted from the component source.

PropTypeDefaultDescription
classNamestring——
fadeFromstring"from-sidebar"from-* token utility for the fade colour (defaults to the sidebar bg).
indicatorbooleanfalseShow the "there's more down here" pill while content remains below the fold. Clicking it scrolls down one viewport.
indicatorLabelReact.ReactNode—Optional pill text beside the chevron — e.g. "More" or "4 more".
children*React.ReactNode——