ScrollShadow

Import

import { ScrollShadow } from "@heroui/react";

Usage

Orientation

Hide Scroll Bar

Custom Shadow Size

Visibility Change

With Card

Styling

Passing Tailwind CSS classes

import {ScrollShadow, Card} from "@heroui/react";

function CustomScrollShadow() {
  return (
    <Card className="w-full p-0 sm:max-w-md">
      <ScrollShadow className="max-h-[300px] p-6 bg-gradient-to-b from-purple-50 to-pink-50">
        <div className="space-y-4">
          {Array.from({length: 10}).map((_, idx) => (
            <p key={idx}>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non
              risus hendrerit venenatis.
            </p>
          ))}
        </div>
      </ScrollShadow>
    </Card>
  );
}

Customizing the component classes

To customize the ScrollShadow component classes, you can use the @layer components directive.

Learn more.

@layer components {
  .scroll-shadow {
    @apply rounded-xl border border-default-200;
  }

  .scroll-shadow--vertical {
    @apply pr-2; /* Add padding for custom scrollbar styling */
  }

  .scroll-shadow--horizontal {
    @apply pb-2;
  }
}

HeroUI follows the BEM methodology to ensure component variants and states are reusable and easy to customize.

CSS Classes

The ScrollShadow component uses these CSS classes (View source styles):

Base Classes

• .scroll-shadow - Root container element

Orientation Variants

• .scroll-shadow--vertical - Vertical scrolling (default)
• .scroll-shadow--horizontal - Horizontal scrolling

State Modifiers

• .scroll-shadow--hide-scrollbar - Hides native scrollbar

CSS Variables

The ScrollShadow component uses CSS variables to size the fade mask and reserve space for visible native scrollbars:

Variable	Default	Description
--scroll-shadow-size	40px	Controls the fade gradient size. This is set from the size prop.
--scroll-shadow-scrollbar-size	10px (0px when hideScrollBar)	Reserves a solid mask gutter for the native scrollbar so the fade does not cover it. Override for wider scrollbars.

Data Attributes

The component uses data attributes to control shadow visibility:

• Scroll States: [data-top-scroll], [data-bottom-scroll], [data-left-scroll], [data-right-scroll] - Applied when content can be scrolled in that direction
• Combined States: [data-top-bottom-scroll], [data-left-right-scroll] - Applied when content can be scrolled in both directions
• Orientation: [data-orientation="vertical"] or [data-orientation="horizontal"] - Indicates scroll direction
• Size: [data-scroll-shadow-size] - Contains the shadow gradient size value

API Reference

ScrollShadow

Prop	Type	Default	Description
orientation	"vertical" | "horizontal"	"vertical"	The scroll direction
variant	"fade"	"fade"	The visual shadow effect style
size	number	40	The shadow gradient size in pixels
offset	number	0	The scroll offset before showing shadows (in pixels)
hideScrollBar	boolean	false	Whether to hide the native scrollbar
isEnabled	boolean	true	Whether scroll shadow detection is enabled
visibility	"auto" | "both" | "top" | "bottom" | "left" | "right" | "none"	"auto"	Controlled shadow visibility state
onVisibilityChange	(visibility: ScrollShadowVisibility) => void	-	Callback invoked when shadow visibility changes
className	string	-	Additional CSS classes to apply to the root element
children	ReactNode	-	The scrollable content