# ScrollShadow **Category**: react **URL**: https://www.heroui.com/docs/react/migration/scroll-shadow **Source**: https://raw.githubusercontent.com/heroui-inc/heroui/refs/heads/v3/apps/docs/content/docs/react/migration/(components)/scroll-shadow.mdx > Migration guide for ScrollShadow from HeroUI v2 to v3 *** 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. ## Structure Changes In v2, `ScrollShadow` was a wrapper component: ```tsx import { ScrollShadow } from "@heroui/scroll-shadow"; export default function App() { return ( {/* scrollable content */} ); } ``` In v3, `ScrollShadow` has the same basic structure but with more configuration options: ```tsx import { ScrollShadow } from "@heroui/react"; export default function App() { return ( {/* scrollable content */} ); } ``` ## 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 ```tsx {/* Shadow size was fixed */} ``` ```tsx {/* Large shadow */} ``` ### Enhanced Visibility Control ```tsx {/* content */} ``` ```tsx import { useState } from "react"; import { ScrollShadow } from "@heroui/react"; function App() { const [visibility, setVisibility] = useState("none"); return ( <>

Shadow state: {visibility}

{/* content */} ); } ``` ### Variant ```tsx {/* v2 used theme variants (e.g. orientation, hideScrollBar) */} ``` ```tsx {/* Shadow effect controlled by variant (default: fade) */} ``` ## 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