# Scroll Fade List

> A scrollable list with gradient fade edges that appear to signal there is more content above or below. The top and bottom fades grow and shrink based on scroll position (measured on scroll and via a ResizeObserver, batched with requestAnimationFrame), leaving a stable scrollbar gutter. It is fully generic over the item type via getKey/items/renderItem, with a configurable max fade height and a themeable background color. Dependency-free.

- Author: [dqnamo](https://21st.dev/@dqnamo)
- License: mit
- Tags: List, Gradient, Scroll, Fade
- Live preview: https://21st.dev/@dqnamo/components/scroll-fade-list

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/dqnamo/scroll-fade-list?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt · More like this: https://21st.dev/community/components/s/list.md