A smooth infinite scrolling component with customizable grid layout and image display.
Features
"use client"
import { InfiniteScroll } from "@/components/ui/infinite-scroll"
const images = [
"https://cdn.21st.dev/assets/mirror/03/03b9a30c5d1fd748b9db2b9a2863f79d89f24e03f9bfd74303271059ecb4bf4a.jpg",
"https://cdn.21st.dev/assets/mirror/29/298482dbc3bccb089897be4cd58229c1c4a2ecb0f5b92d8f3034a2df21193543.jpg",
"https://cdn.21st.dev/assets/mirror/1a/1aa0abe0739fe000c815c34a6a0cae018fdeafce8934d413ffa458aa0c368246.jpg",
"https://cdn.21st.dev/assets/mirror/a1/a1589cba4618aa6dba7a5db0e10741b4e743fefbcfbac4fd816ac11640434d7a.jpg",
"https://cdn.21st.dev/assets/mirror/1c/1c5ee59e6ff3a4e99c1c4efa14703cfde56162a5226cfa929297578f59776492.jpg",
"https://cdn.21st.dev/assets/mirror/ba/babc15f4baa016fc394aa7c8d608841b2eac7592c867ae6931a6ed379db1252b.jpg",
]
function DefaultScrollDemo() {
return (
<div className="min-h-screen bg-background">
<h2 className="py-8 text-center text-2xl font-semibold">
Default Infinite Scroll
</h2>
<InfiniteScroll images={images} />
</div>
)
}
function CustomScrollDemo() {
return (
<div className="min-h-screen bg-background">
<h2 className="py-8 text-center text-2xl font-semibold">
Custom Infinite Scroll
</h2>
<InfiniteScroll
images={images}
columns={4}
size="lg"
gap="lg"
imageHeight="40vh"
repeat={3}
lenisOptions={{
duration: 2,
wheelMultiplier: 1.5
}}
/>
</div>
)
}
export { DefaultScrollDemo, CustomScrollDemo }Part of Edil Ozi — browse the full library on 21st.dev.