# ScrollShadow · HeroUI

> Migration guide for ScrollShadow from HeroUI v2 to v3

- Page: https://jiguang132.com/systems/heroui/docs/migration/scroll-shadow
- Based on: HeroUI documentation (Apache-2.0) @ 60edd8ed751b1d2a270623fbb182bbcfa8baa9af

> 
  Refer to the [v3 ScrollShadow documentation](/systems/heroui/docs/components/scroll-shadow) 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:

```tsx
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:

```tsx
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


  

#### v2


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

#### v3


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


### Enhanced Visibility Control


  

#### v2


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

#### 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]"
          >
            {/* content */}
          </ScrollShadow>
        </>
      );
    }
    ```
  


### Variant


  

#### v2


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

#### v3


    ```tsx
    <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

---

Index of all JGuang resources: https://jiguang132.com/llms.txt