HeroUI Scroll Shadow

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

by Hero Ui

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

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