---
title: ScrollShadow
description: Migration guide for ScrollShadow from HeroUI v2 to v3
---

<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>
      {/* 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

<Tabs items={["v2", "v3"]}>
  <Tab value="v2">
    ```tsx
    <ScrollShadow>
      {/* Shadow size was fixed */}
    </ScrollShadow>
    ```
  </Tab>
  <Tab value="v3">
    ```tsx
    <ScrollShadow size={80} className="max-h-[400px]">
      {/* Large shadow */}
    </ScrollShadow>
    ```
  </Tab>
</Tabs>

### Enhanced Visibility Control

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

### Variant

<Tabs items={["v2", "v3"]}>
  <Tab value="v2">
    ```tsx
    <ScrollShadow>
      {/* v2 used theme variants (e.g. orientation, hideScrollBar) */}
    </ScrollShadow>
    ```
  </Tab>
  <Tab value="v3">
    ```tsx
    <ScrollShadow variant="fade" className="max-h-[400px]">
      {/* Shadow effect controlled by variant (default: fade) */}
    </ScrollShadow>
    ```
  </Tab>
</Tabs>

## 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
