ScrollShadow - Heroui

<Callout type="info"> Refer to the [v3 ScrollShadow documentation](/docs/react/components/scroll-shadow) for complete API reference, styling guide, and advanced examples. This guide only focuses on migrating from HeroUI v2. </Callout>

Structure Changes

In v2, ScrollShadow was a wrapper component:

tsx

import { ScrollShadow } from "@heroui/scroll-shadow";

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

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

tsx

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

export default function App() {
  return (
    <ScrollShadow>
    </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

Enhanced Visibility Control

<Tabs items={["v2", "v3"]}> <Tab value="v2"> tsx <ScrollShadow visibility="bottom"> </ScrollShadow> </Tab> <Tab value="v3"> ```tsx 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]"
      >
      </ScrollShadow>
    </>
  );
}
```

</Tab> </Tabs>

Variant

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