Components
Loading preview...
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.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/product-carousel// 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.grofers.com/cdn-cgi/image/f=auto,fit=scale-down,q=70,metadata=none,w=270/da/cms-assets/cms/product/0bf8ede5-de99-41a2-bdbc-274c1f87b728.png", // Replace with actual image URL
},
{
id: 2,
name: "Verka Double Toned Milk",
quantity: "500 ml",
price: 26,
deliveryTime: "20 MINS",
imageUrl: "https://cdn.grofers.com/cdn-cgi/image/f=auto,fit=scale-down,q=70,metadata=none,w=270/da/cms-assets/cms/product/f46c49b3-7cc4-4208-bc82-396301ee33f5.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.grofers.com/cdn-cgi/image/f=auto,fit=scale-down,q=70,metadata=none,w=270/da/cms-assets/cms/product/613787ac-f983-4cfb-b534-e219c8d47b39.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.grofers.com/cdn-cgi/image/f=auto,fit=scale-down,q=70,metadata=none,w=270/da/cms-assets/cms/product/a501e65f-194b-4db2-abc9-6b7bb515349c.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.grofers.com/cdn-cgi/image/f=auto,fit=scale-down,q=70,metadata=none,w=270/da/cms-assets/cms/product/7e06a843-ff97-4c6a-9c94-a9da352dc8c2.png", // Replace with actual image URL
},
{
id: 6,
name: "Amul Masti Pouch Curd",
quantity: "390 g",
price: 35,
deliveryTime: "20 MINS",
imageUrl: "https://cdn.grofers.com/cdn-cgi/image/f=auto,fit=scale-down,q=70,metadata=none,w=270/da/cms-assets/cms/product/628c97e0-5ed4-425d-a667-1d3bfa6f0bde.png", // Replace with actual image URL
},
{
id: 7,
name: "Amul Sterilised Cream",
quantity: "500 ml",
price: 32,
deliveryTime: "20 MINS",
imageUrl: "https://cdn.grofers.com/cdn-cgi/image/f=auto,fit=scale-down,q=70,metadata=none,w=270/da/cms-assets/cms/product/eb2ba2ce-96fd-43cb-acc0-2a04ff6b810d.png", // Replace with actual image URL
},
{
id: 8,
name: "Nestle a+ Nourish Dahi",
quantity: "400g",
price: 70,
deliveryTime: "20 MINS",
imageUrl: "https://cdn.grofers.com/cdn-cgi/image/f=auto,fit=scale-down,q=70,metadata=none,w=270/da/cms-assets/cms/product/3af56c86-9a93-4d0c-a8d5-cf38493e4120.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;