Thumbnail Scroller

A horizontal scrolling gallery with snap points and touch-friendly navigation.

Preview

Usage

import { ThumbnailScroller } from "@/components/profile"

const items = [
  { id: "1", image: "/photo1.jpg", title: "Photo 1" },
  { id: "2", image: "/photo2.jpg", title: "Photo 2" },
]

<ThumbnailScroller 
  items={items} 
  variant="rounded" 
  showTitles 
/>

Variants

Rounded

Square

Portrait

Sizes

Small

Medium

Large

Props

Prop	Type	Default	Description
items	ThumbnailItem[]	-	Array of items to display
variant	"rounded" \| "square" \| "portrait"	"rounded"	Thumbnail shape
size	"sm" \| "md" \| "lg"	"md"	Thumbnail size
showTitles	boolean	false	Show item titles below thumbnails
onItemClick	(item: ThumbnailItem) => void	-	Click handler for items

Item Type

interface ThumbnailItem {
  id: string
  image: string
  title?: string
  subtitle?: string
}