# ScrollShadow **Category**: react **URL**: https://www.heroui.com/docs/react/components/scroll-shadow **Source**: https://raw.githubusercontent.com/heroui-inc/heroui/refs/heads/v3/apps/docs/content/docs/react/components/(utilities)/scroll-shadow.mdx > Apply visual shadows to indicate scrollable content overflow with automatic detection of scroll position. *** ## Import ```tsx import { ScrollShadow } from "@heroui/react"; ``` ## Usage ```tsx import {ScrollShadow} from "@heroui/react"; export default function Default() { return (

{Array.from({length: 10}).map((_, idx) => (

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor quam. Morbi accumsan cursus enim, sed ultricies sapien.

))}

); } ``` ## Orientation ```tsx import {Card, ScrollShadow} from "@heroui/react"; const images = [ "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/docs/robot1.jpeg", "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/docs/avocado.jpeg", "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/docs/oranges.jpeg", ]; export default function Orientation() { const getRandomImage = (idx: number) => { return images[idx % images.length]; }; return (

Vertical

{Array.from({length: 10}).map((_, idx) => (

))}

Horizontal

{Array.from({length: 10}).map((_, idx) => ( Lorem Card

Bridging the Future Today, 6:30 PM

))}

); } ``` ## Hide Scroll Bar ```tsx import {ScrollShadow} from "@heroui/react"; export default function HideScrollBar() { return (

{Array.from({length: 10}).map((_, idx) => (

))}

); } ``` ## Custom Shadow Size ```tsx import {ScrollShadow} from "@heroui/react"; export default function CustomSize() { return (

{Array.from({length: 10}).map((_, idx) => (

))}

); } ``` ## Visibility Change ```tsx "use client"; import type {ScrollShadowVisibility} from "@heroui/react"; import {Card, ScrollShadow} from "@heroui/react"; import {useState} from "react"; const images = [ "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/docs/robot1.jpeg", "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/docs/avocado.jpeg", "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/docs/oranges.jpeg", ]; export default function VisibilityChange() { const [verticalState, setVerticalState] = useState("none"); const [horizontalState, setHorizontalState] = useState("none"); const getRandomImage = (idx: number) => { return images[idx % images.length]; }; return (

Vertical Shadow State: {verticalState}

setVerticalState(visibility)} >

{Array.from({length: 10}).map((_, idx) => (

))}

Horizontal Shadow State: {horizontalState}

setHorizontalState(visibility)} >

{Array.from({length: 10}).map((_, idx) => ( Lorem Card

Bridging the Future Today, 6:30 PM

))}

); } ``` ## With Card ```tsx import {Button, Card, ScrollShadow} from "@heroui/react"; export default function WithCard() { return ( Terms and Conditions Please review before proceeding

{Array.from({length: 10}).map((_, idx) => (

))}

); } ``` ## Styling ### Passing Tailwind CSS classes ```tsx import {ScrollShadow, Card} from "@heroui/react"; function CustomScrollShadow() { return (

{Array.from({length: 10}).map((_, idx) => (

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non risus hendrerit venenatis.

))}

); } ``` ### Customizing the component classes To customize the ScrollShadow component classes, you can use the `@layer components` directive.
[Learn more](https://tailwindcss.com/docs/adding-custom-styles#adding-component-classes). ```css @layer components { .scroll-shadow { @apply rounded-xl border border-default-200; } .scroll-shadow--vertical { @apply pr-2; /* Add padding for custom scrollbar styling */ } .scroll-shadow--horizontal { @apply pb-2; } } ``` HeroUI follows the [BEM](https://getbem.com/) methodology to ensure component variants and states are reusable and easy to customize. ### CSS Classes The ScrollShadow component uses these CSS classes ([View source styles](https://github.com/heroui-inc/heroui/blob/v3/packages/styles/components/scroll-shadow.css)): #### Base Classes - `.scroll-shadow` - Root container element #### Orientation Variants - `.scroll-shadow--vertical` - Vertical scrolling (default) - `.scroll-shadow--horizontal` - Horizontal scrolling #### State Modifiers - `.scroll-shadow--hide-scrollbar` - Hides native scrollbar ### Data Attributes The component uses data attributes to control shadow visibility: - **Scroll States**: `[data-top-scroll]`, `[data-bottom-scroll]`, `[data-left-scroll]`, `[data-right-scroll]` - Applied when content can be scrolled in that direction - **Combined States**: `[data-top-bottom-scroll]`, `[data-left-right-scroll]` - Applied when content can be scrolled in both directions - **Orientation**: `[data-orientation="vertical"]` or `[data-orientation="horizontal"]` - Indicates scroll direction - **Size**: `[data-scroll-shadow-size]` - Contains the shadow gradient size value ## API Reference ### ScrollShadow | Prop | Type | Default | Description | | -------------------- | ----------------------------------------------------------------------------- | ------------ | ------------------------------------------------------- | | `orientation` | `"vertical"` \| `"horizontal"` | `"vertical"` | The scroll direction | | `variant` | `"fade"` | `"fade"` | The visual shadow effect style | | `size` | `number` | `40` | The shadow gradient size in pixels | | `offset` | `number` | `0` | The scroll offset before showing shadows (in pixels) | | `hideScrollBar` | `boolean` | `false` | Whether to hide the native scrollbar | | `isEnabled` | `boolean` | `true` | Whether scroll shadow detection is enabled | | `visibility` | `"auto"` \| `"both"` \| `"top"` \| `"bottom"` \| `"left"` \| `"right"` \| `"none"` | `"auto"` | Controlled shadow visibility state | | `onVisibilityChange` | `(visibility: ScrollShadowVisibility) => void` | - | Callback invoked when shadow visibility changes | | `className` | `string` | - | Additional CSS classes to apply to the root element | | `children` | `ReactNode` | - | The scrollable content |