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:

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