Scroll vertically
1
2
3
4
Installation
Examples
Horizontal
Scroll horizontally
1
2
3
4
Vertical
Scroll vertically
1
2
3
4
With Images
Scroll vertically
Usage
import { SnapScroll } from "@/components/sillybitsui/snap-scroll";<SnapScroll
items={Array.from({ length: 5 }, (_, i) => (
<div className="h-full bg-red-500 flex items-center justify-center text-white text-5xl font-black">
{i}
</div>
))}
direction="x"
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | React.ReactNode[] | - | Array of React elements (e.g. <div>, <img>, custom components) to display inside the scroll container. |
direction | "x" | "y" | "y" | Scroll direction — "x" for horizontal or "y" for vertical scrolling. |
containerHeight | string | "400px" | Height of the scroll container (used for vertical scroll). |
containerWidth | string | "auto" | Width of the scroll container (used for horizontal scroll). |
itemClassName | string | "" | Additional Tailwind or custom classes applied to each scroll item. |