Skip to main content

​
ItemCarousel

A horizontally scrollable carousel that displays a row of product cards. Used for featured items, recommendations, or category highlights.

​
Preview

View in Storybook

​
Import

import { ItemCarousel } from '@/components/ItemCarousel'

​
Usage

<ItemCarousel
  items={featuredProducts}
  title="Popular Items"
  onItemClick={handleItemClick}
/>

​
Props

​
items
Product[]
required
Array of products to display in the carousel.
​
title
string
Optional heading displayed above the carousel.
​
onItemClick
(product: Product) => void
required
Callback fired when a carousel item is clicked.

​
Behavior

  • Touch-friendly horizontal scrolling on mobile
  • Peek effect showing partial next card to indicate scrollability
  • Renders each item using the vertical Item component