ScrollShadow
Apply visual shadows to indicate scrollable content overflow with automatic detection of scroll position.
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:
| 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 |
