Scroll Shadow

Utilities

A scroll container component that displays gradient shadows to indicate scrollable content. Helps users understand there is more content above or below.

Import

import { ScrollShadow } from "@/components/ui/scroll-shadow";

Usage

Vertical Scroll

Shadow indicators for vertical scrolling

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20

Scroll to see the shadow indicators appear

Horizontal Scroll

Shadow indicators for horizontal scrolling

Card 1
Card 2
Card 3
Card 4
Card 5
Card 6
Card 7
Card 8
Card 9
Card 10
Card 11
Card 12
Card 13
Card 14
Card 15

Shadow Sizes

Different shadow gradient sizes. Shadows automatically reduce on mobile for better proportions.

Small

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10

Medium

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10

Large

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10

Hidden Scrollbar

Scrollable content without visible scrollbar

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20

The scrollbar is hidden but scrolling still works

Responsive Behavior

Shadow sizes automatically reduce on mobile screens for better proportions

The ScrollShadow component detects screen size and adjusts shadow intensity:

  • Mobile (<640px): Smaller shadows (sm: 12px, md: 24px, lg: 36px)
  • Desktop (≥640px): Standard shadows (sm: 20px, md: 40px, lg: 60px)
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20

Resize your browser to see the shadow size change

API Reference

orientation"vertical"
"horizontal" | "vertical" | "both"

Direction of the scroll shadows

size"md"
"sm" | "md" | "lg"

Size of the gradient shadow

hideScrollbarfalse
boolean

Hide the native scrollbar

children*—
ReactNode

Scrollable content

Related Components

DividerSpacer