ScrollShadow

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 "@heroui/react";

export default function App() {
  return (
    <ScrollShadow>
      {/* scrollable content */}
    </ScrollShadow>
  );
}

Key Changes

1. Import Path

v2: Imported from @heroui/scroll-shadow package
v3: Imported from @heroui/react 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>

<ScrollShadow size={80} className="max-h-[400px]">
  {/* Large shadow */}
</ScrollShadow>

Enhanced Visibility Control

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

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

function App() {
  const [visibility, setVisibility] = useState("none");

  return (
    <>
      <p>Shadow state: {visibility}</p>
      <ScrollShadow
        onVisibilityChange={setVisibility}
        className="max-h-[400px]"
      >
        {/* content */}
      </ScrollShadow>
    </>
  );
}

Variant

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

<ScrollShadow variant="fade" className="max-h-[400px]">
  {/* Shadow effect controlled by variant (default: fade) */}
</ScrollShadow>

Summary

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