Skip to content
Lenso UI

ScrollShadow

Migration guide for ScrollShadow from HeroUI v2 to v3

Refer to the v3 ScrollShadow documentation for complete API reference, styling guide, and advanced examples. This guide only focuses on migrating from HeroUI v2.

Structure Changes

In v2, ScrollShadow was a wrapper component:

import { ScrollShadow } from "@heroui/scroll-shadow";
export default function App() {  return (    <ScrollShadow>      {/* scrollable content */}    </ScrollShadow>  );}

In v3, ScrollShadow has the same basic structure but with more configuration options:

import { ScrollShadow } from "@lenso/ui";
export default function App() {  return (    <ScrollShadow>      {/* scrollable content */}    </ScrollShadow>  );}

Key Changes

1. Import Path

v2: Imported from @heroui/scroll-shadow package
v3: Imported from @lenso/ui unified package

2. Visibility Control

v2: visibility prop controlled shadow placement
v3: Enhanced visibility prop with more options and onVisibilityChange callback

3. Shadow Size Control

v2: Shadow size was fixed or limited customization
v3: size prop allows custom shadow size in pixels

4. Enhanced Props

v3: New props available:

  • size - Shadow size in pixels (default: 40)
  • offset - Scroll offset before showing shadows (default: 0)
  • isEnabled - Enable/disable shadow detection (default: true)
  • hideScrollBar - Hide scrollbar while maintaining scroll functionality
  • variant - Shadow effect type (default: fade)
  • onVisibilityChange - Callback when shadow visibility changes

Migration Examples

Custom Shadow Size

<ScrollShadow>  {/* Shadow size was fixed */}</ScrollShadow>

Enhanced Visibility Control

<ScrollShadow visibility="bottom">  {/* content */}</ScrollShadow>

Variant

<ScrollShadow>  {/* v2 used theme variants (e.g. orientation, hideScrollBar) */}</ScrollShadow>

Summary

  • Update import from @heroui/scroll-shadow to @lenso/ui
  • Enhanced API with more configuration options
  • Better shadow detection and visibility control
  • Same orientation support (vertical / horizontal); import from @lenso/ui
  • Customizable shadow size and variant (e.g. fade)
  • Improved performance and accessibility