HeroUI Scroll Shadow

Component 20

About

HeroUI v3 ScrollShadow — adds a fade/shadow to scrollable overflow containers, with orientation, hidden scrollbar, custom shadow size, visibility change and card usage.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds HeroUI Scroll Shadow to your project and fits it to your theme.

Code

How HeroUI Scroll Shadow is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { ScrollShadow } from "@/components/ui/heroui-scroll-shadow"

export default function Default() {
  return (
    <div 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>
    </div>
  )
}