ScrollShadow

Usage

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

Examples

Orientation

Shadow Size

With Card

Hide Scroll Bar

Visibility Change

Customization

Tailwind CSS

Global CSS

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;
  }
}

Styling Reference

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:

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
• Shadow Mode: [data-scroll-shadow-mode] - "auto" when the fade is derived from the scroll position, "manual" when visibility is controlled or isEnabled is false

Scroll-Driven Fade

In auto mode, browsers that support scroll-driven animations derive the fade from the scroll position in CSS. The mask is therefore correct on the very first paint, with no measurement and no flash of unfaded content during hydration. Browsers without support fall back to the [data-*-scroll] attributes above, which are written after hydration. Two things to keep in mind when customizing:

• In auto mode the root always resolves a mask-image, even when there is nothing to scroll. That makes it a stacking context and a containing block for position: fixed descendants. Set visibility explicitly if you need to opt out.
• The scroll-driven fade uses the animation property on the root. Applying an animate-* utility to the same element replaces it and leaves no fade. Animate a wrapper instead.

API Reference

ScrollShadow

Related Components