Scroll Shadow

Applies top and bottom shadows when content overflows on scroll.

Storybook@nextui-org/scroll-shadowSourceStyles source
Zigma by NextUI (YC S24) - Connect your design files to production code in minutes | Product Hunt

We're live on Product Hunt! Join the conversation and help us get to #1 Product of the day 🚀


Installation

npx nextui-cli@latest add scroll-shadow
The above command is for individual installation only. You may skip this step if @nextui-org/react is already installed globally.

Import

Usage

Hide Scrollbar

You can use the hideScrollBar property to hide vertical and horizontal scrollbars.

Custom Shadow Size

By default, the shadow size is 40 in pixels, but you can change it using the size property.

Horizontal Orientation

In case you need to apply the shadow on the horizontal scroll, you can set the orientation property to horizontal.

Shadow Offset

By default the shadow offset is 0 in pixels, but you can change it using the offset property. This allows you to apply the shadow on a specific position.

API

ShadowScroll Props

AttributeTypeDescriptionDefault
sizenumberThe shadow size in pixels.40
offsetnumberThe scroll offset to show the shadow in pixels.0
hideScrollBarbooleanWhether to hide the scrollbar or not.false
orientationhorizontal | verticalThe scroll orientation.vertical
isEnabledbooleanWhether the shadow is enabled or not.true
visibilityScrollShadowVisibilityThe shadow visibility. (controlled)auto

ShadowScroll Events

AttributeTypeDescription
onVisibilityChange(visibility: ScrollShadowVisibility) => voidCallback invoked when the shadow visibility changes.

Types

Scroll Shadow Visibility

type ScrollShadowVisibility = "auto" | "top" | "bottom" | "left" | "right" | "both" | "none";