Scroll Shadow | HeroUI v3 (Previously NextUI) - Beautiful by default, customizable by design.

Import

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

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.

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

export default function Default() {
  return (
    <div className="w-full p-0 sm:max-w-sm">

Orientation

Vertical

Horizontal

Bridging the Future

Today, 6:30 PM

Bridging the Future

Today, 6:30 PM

Bridging the Future

Today, 6:30 PM

Bridging the Future

Today, 6:30 PM

Bridging the Future

Today, 6:30 PM

Bridging the Future

Today, 6:30 PM

Bridging the Future

Today, 6:30 PM

Bridging the Future

Today, 6:30 PM

Bridging the Future

Today, 6:30 PM

Bridging the Future

Today, 6:30 PM

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",

Hide Scroll Bar

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

export default function HideScrollBar() {
  return (
    <div className="w-full p-0 sm:max-w-sm">

On Surface

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

export default function OnSurface() {
  return (
    <Surface className="w-full rounded-3xl sm:max-w-sm">

Custom Shadow Size

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

export default function CustomSize() {
  return (
    <div className="w-full p-0 sm:max-w-sm">

Visibility Change

Vertical Shadow State: none

Horizontal Shadow State: none

Bridging the Future

Today, 6:30 PM

Bridging the Future

Today, 6:30 PM

Bridging the Future

Today, 6:30 PM

Bridging the Future

Today, 6:30 PM

Bridging the Future

Today, 6:30 PM

Bridging the Future

Today, 6:30 PM

Bridging the Future

Today, 6:30 PM

Bridging the Future

Today, 6:30 PM

Bridging the Future

Today, 6:30 PM

Bridging the Future

Today, 6:30 PM

"use client";

import type {ScrollShadowVisibility} from "@heroui/react";

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

With Card

import {Button, Card, ScrollShadow} from "@heroui/react";

export default function WithCard() {
  return (
    <Card className="max-w-[400px]">

Styling

Passing Tailwind CSS classes

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

function CustomScrollShadow() {
  return (
    <Card className="w-full p-0 sm:max-w-md">
      <ScrollShadow className="max-h-[300px] p-6 bg-gradient-to-b from-purple-50 to-pink-50">
        <div className="space-y-4">
          {Array.from({length: 10}).map((_, idx) => (
            <p key={idx}>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non
              risus hendrerit venenatis.
            </p>
          ))}
        </div>
      </ScrollShadow>
    </Card>
  );
}

Customizing the component classes

To customize the ScrollShadow component classes, you can use the @layer components directive.
Learn more.

@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 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):

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
.scroll-shadow--on-surface - Optimized for use on Surface components

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
`isOnSurface`	`boolean`	`false`	Whether the component is used on a Surface
`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

Scroll ShadowNew

Vertical

Horizontal

Bridging the Future

Bridging the Future

Bridging the Future

Bridging the Future

Bridging the Future

Bridging the Future

Bridging the Future

Bridging the Future

Bridging the Future

Bridging the Future

Bridging the Future

Bridging the Future

Bridging the Future

Bridging the Future

Bridging the Future

Bridging the Future

Bridging the Future

Bridging the Future

Bridging the Future

Bridging the Future

Terms and Conditions

On this page