Scroll area with fade effect
For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.
Best for: Edges that fade only while content is hidden past them, over a photo column with a tinted round thumb
When to use
- Fixed height lists and photo columns that scroll inside their own box with a custom scrollbar
- Sideways strips of cards or photos kept to the width of their container
- Wide tables that pan on both axes without widening the page around them
When not to use
- Section links that light up as the reader scrolls past each heading: use the Scrollspy component
- A chat transcript that opens on the newest turn and follows streamed replies: use the Message Scroller component
- Shoppers weighing rival products on price, star rating and specs: use the Comparison blocks
Agent notes
- The masks read overflow CSS variables Base UI sets on the viewport; the radix
ScrollAreasets none, so compute them or drop the masks there - Give the
ScrollArearoot a bounded height or width throughclassName, or it grows with its content and never scrolls ScrollAreadraws only the verticalScrollBar; for sideways scrolling pass aScrollBarwithorientationhorizontal as a child
https://reui.io/components/scroll-area/c-scroll-area-4.mdget_example("c-scroll-area-4")npx shadcn@latest add @reui/c-scroll-area-4Shadcn Components in Scroll Area Fade Edges
Dependencies
- cn
About Shadcn Scroll Area Fade Edges
Scroll area with fade effect. Built with the Scroll Area component. Uses cn alongside the shadcn primitives. A free, open source shadcn scroll area example you can install with npx shadcn@latest add @reui/c-scroll-area-4 and edit as your own code.
What You Can Build With Shadcn Scroll Area Fade Edges
- Composes Scroll Area, so it drops into any project already using those components.
- Install it with the shadcn CLI: npx shadcn@latest add @reui/c-scroll-area-4
- Open source and free, with the full source on this page to copy or adapt.
More Shadcn Scroll Area Examples
- Basic Basic scroll area
- Horizontal Scroll area with horizontal scrollbar
- Both Scrollbars Scroll area with both scrollbars
- Scrollbar Gutter Scroll area with scrollbar gutter
Related Shadcn Component Categories
Open-source shadcn scrollspy components for docs navigation, active table of contents, and long-form sections.
Open-source shadcn select components for form selection, settings menus, and filter controls.
Open-source shadcn separator components for content grouping, toolbar dividers, and section breaks.
Open-source shadcn sheet components for slide-over details, side panels, and task flows.
Open-source shadcn sidebar components for app shells, collapsible side navigation, and dashboard layouts.
Open-source shadcn signature pad components for e-signature forms, agreements, and proof of delivery.
Frequently Asked Questions
When should I use Shadcn Scroll Area Fade Edges?
Use it for edges that fade only while content is hidden past them, over a photo column with a tinted round thumb.
Shadcn Scroll Area as a whole fits:
- Fixed height lists and photo columns that scroll inside their own box with a custom scrollbar
- Sideways strips of cards or photos kept to the width of their container
- Wide tables that pan on both axes without widening the page around them
For section links that light up as the reader scrolls past each heading, use the Scrollspy component. For a chat transcript that opens on the newest turn and follows streamed replies, use the Message Scroller component. For shoppers weighing rival products on price, star rating and specs, use the Comparison blocks.
How do I install Shadcn Scroll Area Fade Edges?
Is Shadcn Scroll Area Fade Edges free to use?
Which components does Shadcn Scroll Area Fade Edges use?
Start building with ReUI Pro today.
Every Pro block, every style, and every future addition, with one license for unlimited projects.
From $249, once. Lifetime updates.