Scroll Fade
A scroll area whose edges fade only where there's more to scroll, so the fade itself tells people which way to go. Vertical or horizontal.
- Category: React Card, Accordion and Display Components
- Licence: Free, MIT
- Built with: React 19, Tailwind CSS 4, Motion
- Dependencies: motion, clsx, tailwind-merge
Examples
Scroll Fade
API reference
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | |
orientation | "vertical" | "horizontal" | "vertical" | |
size | number | 40 | Fade length in px. |
className | string | — |
About Scroll Fade
Scroll Fade softens the edges of a scrolling area, but only where there is more content to see. At the top there is no top fade, at the bottom no bottom fade, so the fade itself tells people which way to go.
Scroll Fade is a display component for React 19, styled with Tailwind CSS 4 and animated with Motion. It drops into Next.js, Vite, Remix or Astro through the shadcn CLI as a single file you own.
When to use Scroll Fade
- Long lists in cards and popovers.
- Horizontal chip rows.
- Chat and comment panels.
- Sidebars with many links.
How it works
A CSS mask gradient is updated from the scroll position, growing over the first stretch of scrolling. A ResizeObserver keeps it right when content changes, and the area is focusable for keyboard scrolling.
Interactive parts are buttons or links with accessible names, decorative layers are hidden from assistive tech, and everything is reachable by keyboard. With prefers-reduced-motion on, it holds still or settles instantly instead of animating.
Customizing Scroll Fade
Every prop is documented in the API reference above with its type and default. The ones you will reach for first are listed here.
The Customize panel next to the preview lets you change size live, and the Code tab updates to match, so the snippet you copy already carries your values.
- orientation ("vertical" | "horizontal", default "vertical").
- size (number, default 40): Fade length in px.
Goes well with Scroll Fade
These display pieces share its tokens and motion language, so they sit together on one page without clashing.
- Accordion: An animated React accordion: height springs open, the chevron flips, content fades in
- Number Ticker: An animated React number ticker: each digit rolls on its own wheel
- Marquee: A CSS-only infinite React marquee with faded edges and pause on hover
- Avatar Group: Overlapping React avatars that fan apart on hover with names that spring up
- Theme Toggle: A React dark mode toggle: the sun eclipses into a moon and the theme spreads out
Install Scroll Fade
npx shadcn@latest add https://charcoalui.com/r/scroll-fade.jsonScroll Fade is free and MIT licensed. The command copies scroll-fade.tsx into components/ui and installs clsx, tailwind-merge; you can also copy the source from the Code tab by hand.
Charcoal UI Pro adds 393 more showpiece components, 112 sections and 100 templates built the same way.
Frequently asked questions
- How do I install Scroll Fade?
- Run npx shadcn@latest add https://charcoalui.com/r/scroll-fade.json. The shadcn CLI copies scroll-fade.tsx into components/ui and installs motion, clsx, tailwind-merge. You can also copy the source from this page by hand.
- Is Scroll Fade free for commercial use?
- Yes. Scroll Fade is MIT licensed: use it in any personal or commercial project and change it however you like.
- Does Scroll Fade work with Next.js?
- Yes. It is a client component for React 19 styled with Tailwind CSS 4, so it works in the Next.js App Router and Pages Router, Vite, Remix and Astro.
- Can an AI coding agent install Scroll Fade?
- Yes. Connect the Charcoal UI MCP server (https://charcoalui.com/mcp) to Claude Code, Cursor or any MCP client; get_component returns Scroll Fade's props and source and get_install_command returns the exact command.