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 {Card, ScrollShadow} from "@heroui/react";

export default function Default() {
  return (
    <Card className="w-full p-0 sm:max-w-sm">
      <ScrollShadow className="max-h-[240px] p-4">
        <div className="space-y-4">
          {Array.from({length: 10}).map((_, idx) => (
            <p key={`scroll-shadow-lorem-content-${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.
            </p>
          ))}
        </div>
      </ScrollShadow>
    </Card>
  );
}

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",
  "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/docs/oranges.jpeg",
];

export default function Orientation() {
  const getRandomImage = (idx: number) => {
    return images[idx % images.length];
  };

  return (
    <div className="flex flex-col gap-8">
      <div>
        <h4 className="mb-2 text-sm font-semibold">Vertical</h4>
        <Card className="w-full p-0 sm:max-w-sm">
          <ScrollShadow className="max-h-[240px] p-4" orientation="vertical">
            <div className="space-y-4">
              {Array.from({length: 10}).map((_, idx) => (
                <p key={`scroll-shadow-lorem-content-${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.
                </p>
              ))}
            </div>
          </ScrollShadow>
        </Card>
      </div>

      <div>
        <h4 className="mb-2 text-sm font-semibold">Horizontal</h4>
        <Card className="w-full p-0 sm:max-w-sm">
          <ScrollShadow className="p-4" orientation="horizontal">
            <div className="flex flex-row gap-4">
              {Array.from({length: 10}).map((_, idx) => (
                <Card
                  key={`scroll-shadow-lorem-cards-${idx}`}
                  className="flex min-w-[200px] flex-row gap-3 p-1"
                  variant="transparent"
                >
                  <img
                    alt="Lorem Card"
                    className="aspect-square h-16 w-16 shrink-0 select-none rounded-xl object-cover sm:h-20 sm:w-20"
                    loading="lazy"
                    src={getRandomImage(idx)}
                  />
                  <div className="flex flex-1 flex-col justify-center gap-1">
                    <Card.Title className="text-sm">Bridging the Future</Card.Title>
                    <Card.Description className="text-xs">Today, 6:30 PM</Card.Description>
                  </div>
                </Card>
              ))}
            </div>
          </ScrollShadow>
        </Card>
      </div>
    </div>
  );
}

Hide Scroll Bar

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

export default function HideScrollBar() {
  return (
    <Card className="w-full p-0 sm:max-w-sm">
      <ScrollShadow hideScrollBar className="max-h-[240px] p-4">
        <div className="space-y-4">
          {Array.from({length: 10}).map((_, idx) => (
            <p key={`scroll-shadow-lorem-content-${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.
            </p>
          ))}
        </div>
      </ScrollShadow>
    </Card>
  );
}

On Surface

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

export default function OnSurface() {
  return (
    <Surface className="w-full rounded-3xl sm:max-w-sm">
      <ScrollShadow className="max-h-[240px] p-4">
        <div className="space-y-4">
          {Array.from({length: 10}).map((_, idx) => (
            <p key={`scroll-shadow-lorem-content-${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.
            </p>
          ))}
        </div>
      </ScrollShadow>
    </Surface>
  );
}

Custom Shadow Size

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

export default function CustomSize() {
  return (
    <Card className="w-full p-0 sm:max-w-sm">
      <ScrollShadow className="max-h-[240px] p-4" size={80}>
        <div className="space-y-4">
          {Array.from({length: 10}).map((_, idx) => (
            <p key={`scroll-shadow-lorem-content-${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.
            </p>
          ))}
        </div>
      </ScrollShadow>
    </Card>
  );
}

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";
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<ScrollShadowVisibility>("none");
  const [horizontalState, setHorizontalState] = useState<ScrollShadowVisibility>("none");

  const getRandomImage = (idx: number) => {
    return images[idx % images.length];
  };

  return (
    <div className="flex flex-col gap-8">
      <div className="mb-4 flex flex-col gap-4">
        <div className="bg-default rounded p-4">
          <p className="text-sm font-semibold">Vertical Shadow State: {verticalState}</p>
        </div>
        <Card className="w-full p-0 sm:max-w-sm">
          <ScrollShadow
            className="max-h-[240px] p-4"
            orientation="vertical"
            onVisibilityChange={(visibility) => setVerticalState(visibility)}
          >
            <div className="space-y-4">
              {Array.from({length: 10}).map((_, idx) => (
                <p key={`scroll-shadow-lorem-content-${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.
                </p>
              ))}
            </div>
          </ScrollShadow>
        </Card>
      </div>

      <div className="flex flex-col gap-4">
        <div className="bg-default rounded p-4">
          <p className="text-sm font-semibold">Horizontal Shadow State: {horizontalState}</p>
        </div>
        <Card className="w-full p-0 sm:max-w-sm">
          <ScrollShadow
            className="p-4"
            orientation="horizontal"
            onVisibilityChange={(visibility) => setHorizontalState(visibility)}
          >
            <div className="flex flex-row gap-4">
              {Array.from({length: 10}).map((_, idx) => (
                <Card
                  key={`scroll-shadow-lorem-cards-${idx}`}
                  className="flex min-w-[200px] flex-row gap-3 p-1"
                  variant="transparent"
                >
                  <img
                    alt="Lorem Card"
                    className="aspect-square h-16 w-16 shrink-0 select-none rounded-xl object-cover sm:h-20 sm:w-20"
                    loading="lazy"
                    src={getRandomImage(idx)}
                  />
                  <div className="flex flex-1 flex-col justify-center gap-1">
                    <Card.Title className="text-sm">Bridging the Future</Card.Title>
                    <Card.Description className="text-xs">Today, 6:30 PM</Card.Description>
                  </div>
                </Card>
              ))}
            </div>
          </ScrollShadow>
        </Card>
      </div>
    </div>
  );
}

With Card

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

export default function WithCard() {
  return (
    <Card className="max-w-[400px]">
      <Card.Header>
        <Card.Title>Terms and Conditions</Card.Title>
        <Card.Description>Please review before proceeding</Card.Description>
      </Card.Header>
      <Card.Content className="p-0">
        <ScrollShadow className="h-[300px] px-4" size={80}>
          <div className="space-y-4">
            {Array.from({length: 10}).map((_, idx) => (
              <p key={`scroll-shadow-lorem-content-${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.
              </p>
            ))}
          </div>
        </ScrollShadow>
      </Card.Content>
      <Card.Footer className="mt-4 flex flex-row gap-2">
        <Button className="w-full" variant="secondary">
          Cancel
        </Button>
        <Button className="w-full">Accept</Button>
      </Card.Footer>
    </Card>
  );
}

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 ShadowPreview

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