Components
Loading preview...
HeroUI v3 ScrollShadow — adds a fade/shadow to scrollable overflow containers, with orientation, hidden scrollbar, custom shadow size, visibility change and card usage.
npx shadcn@latest add https://21st.dev/r/hero_ui/heroui-scroll-shadowimport { 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>
)
}