Product Carousel

Component 162

About

Product Carousel This component displays a horizontally scrollable list of products with a title and navigation controls. It's built to be highly reusable, accepting all content and configuration via props.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Product Carousel to your project and fits it to your theme.

Code

How Product Carousel is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

// demo.tsx
import React from "react";
import { ProductCarousel, Product } from "@/components/ui/product-carousel"; // Adjust the import path

// --- MOCK DATA ---
const dairyProducts: Product[] = [
  {
    id: 1,
    name: "Verka Standard Fresh Milk",
    quantity: "1 ltr",
    price: 63,
    deliveryTime: "20 MINS",
    imageUrl: "https://cdn.21st.dev/assets/mirror/9d/9d7969c1234b53b1c951382dea0b1722e0fbf3c81eac57845b917ce6e87c43ce.png", // Replace with actual image URL
  },
  {
    id: 2,
    name: "Verka Double Toned Milk",
    quantity: "500 ml",
    price: 26,
    deliveryTime: "20 MINS",
    imageUrl: "https://cdn.21st.dev/assets/mirror/df/dfdde8c5b118d544c10f7a39c927162d40e1117d233a0149f7826d6a5ba12788.png", // Replace with actual image URL
  },
  {
    id: 3,
    name: "Amul Salted Butter",
    quantity: "100 g",
    price: 58,
    originalPrice: 62,
    discount: "6% OFF",
    deliveryTime: "20 MINS",
    imageUrl: "https://cdn.21st.dev/assets/mirror/1c/1cad68b4175629f5cdee3c855edfe8d775e6bcf6fc5e8932fc82583c6c3bcafc.png", // Replace with actual image URL
  },
  {
    id: 4,
    name: "Amul Gold Full Cream Milk",
    quantity: "500 ml",
    price: 35,
    deliveryTime: "20 MINS",
    imageUrl: "https://cdn.21st.dev/assets/mirror/33/33068a23f44b8052e76ed3fd51ca284b6a2705d0ed25b9ded4b256eac67d9ca9.png", // Replace with actual image URL
  },
  {
    id: 5,
    name: "Amul Moti Toned Milk (90 Days Shelf Life)",
    quantity: "450 ml",
    price: 31,
    originalPrice: 33,
    discount: "6% OFF",
    deliveryTime: "20 MINS",
    imageUrl: "https://cdn.21st.dev/assets/mirror/bf/bf796b7e5b10e98f03f113993ca7088ef47d1a9560c7e3d67ed301027928ca0e.png", // Replace with actual image URL
  },
  {
    id: 6,
    name: "Amul Masti Pouch Curd",
    quantity: "390 g",
    price: 35,
    deliveryTime: "20 MINS",
    imageUrl: "https://cdn.21st.dev/assets/mirror/a2/a237213139854640457c5589a134229dc000ab42fe17af5ee2cde8d9844ec2e3.png", // Replace with actual image URL
  },
  {
    id: 7,
    name: "Amul Sterilised Cream",
    quantity: "500 ml",
    price: 32,
    deliveryTime: "20 MINS",
    imageUrl: "https://cdn.21st.dev/assets/mirror/f5/f54391ec512ec7a88ffed37019e6c369bbc7560d6f7e6cf1140dc7d7865b9638.png", // Replace with actual image URL
  },
    {
    id: 8,
    name: "Nestle a+ Nourish Dahi",
    quantity: "400g",
    price: 70,
    deliveryTime: "20 MINS",
    imageUrl: "https://cdn.21st.dev/assets/mirror/da/da81c12bb78882d4f201b5ecd091314c33d79d8b5435571dbc04c543c2480358.png", // Replace with actual image URL
  },
];


const ProductCarouselDemo = () => {
  return (
    <div className="w-full bg-background">
      <ProductCarousel
        title="Dairy, Bread & Eggs"
        products={dairyProducts}
        viewAllHref="/products/dairy"
      />
    </div>
  );
};

export default ProductCarouselDemo;