Offer Carousel

Component 774

About

Offer Carousel This component provides a sleek, horizontally scrollable display for showcasing offers or featured items. It includes custom navigation arrows and smooth-scrolling functionality, with cards that animate on hover for an engaging user experience.

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

Code

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

Usage.tsx

import { OfferCarousel, type Offer } from "@/components/ui/offer-carousel";

// Sample data for the carousel
const sampleOffers: Offer[] = [
  {
    id: 1,
    imageSrc: "https://cdn.21st.dev/assets/mirror/44/44405b1bc4b52fe9213a51e7506ccd884dca4f8bcf9769b15ed0f97548a4c7e9.jpg",
    imageAlt: "International travel landmarks collage",
    tag: "Discount",
    title: "Up to ₹3000 OFF",
    description: "On International Flights.",
    brandLogoSrc: "https://cdn.21st.dev/assets/mirror/c7/c768e9a969001f656c9e4ebdce0733c11c3274f4397b2d455b9f0ca052450dbb.png",
    brandName: "Ease My Trip",
    promoCode: "EMTWID",
    href: "#",
  },
  {
    id: 2,
    imageSrc: "https://cdn.21st.dev/assets/mirror/50/501d70c695995f15249d41160727cab416b6474bb6df4f567593958d9fee4f88.jpg",
    imageAlt: "A delicious looking burger",
    tag: "Discount",
    title: "Snack more. Save more.",
    description: "Get ₹75 OFF on purchases of ₹299 or more.",
    brandLogoSrc: "https://cdn.21st.dev/assets/mirror/ef/ef5f1f14c2e8a7f4769344a9ded9c376bf2693e9e054d3184eb2085af2d63da4.png",
    brandName: "McD",
    promoCode: "TWID75",
    href: "#",
  },
  {
    id: 3,
    imageSrc: "https://cdn.21st.dev/assets/mirror/7c/7cbc4c04ce69283da9b591d3daa162bca247beb2049ac692d1a0c0167870b18a.jpg",
    imageAlt: "Logos of popular streaming services",
    tag: "Discount",
    title: "Flat ₹550 OFF on Timesprime",
    description: "Exclusive offer on Times Prime Membership.",
    brandLogoSrc: "https://cdn.21st.dev/assets/mirror/8f/8ffda60317c2dfd4837850a5e443955682a3714a426e53f73056db2a2d76e84d.png",
    brandName: "Timesprime",
    promoCode: "TWID550",
    href: "#",
  },
  {
    id: 4,
    imageSrc: "https://cdn.21st.dev/assets/mirror/79/79495924c35e852d948f0f77bb6871963500ade402426413f8734a731d7a91d8.jpg",
    imageAlt: "A person holding a phone with a payment app",
    tag: "Cashback",
    title: "10% Instant Cashback",
    description: "On RuPay Credit Card transactions.",
    brandLogoSrc: "https://cdn.21st.dev/assets/mirror/20/205887c88317dd3303635c07f71c21a577ca2b13acadf0933572b0f92d598650.png",
    brandName: "Rupay CC",
    promoCode: "RCC10",
    href: "#",
  },
    {
    id: 5,
    imageSrc: "https://cdn.21st.dev/assets/mirror/60/60952923145c9a1fdd89dcc93d9c6c8210b28998a4c617b17fdcd2a8a296369f.jpg",
    imageAlt: "Gourmet food on a plate",
    tag: "Offer",
    title: "Flat 20% OFF",
    description: "On dining at partner restaurants.",
    brandLogoSrc: "https://cdn.21st.dev/assets/mirror/e0/e0eb14e63928706b17756fa40178cb62ae256135667f53eaaa8d41f69f084602.webp",
    brandName: "Dineout",
    promoCode: "DINE20",
    href: "#",
  },
];


// The demo component
export default function OfferCarouselDemo() {
  return (
    <div className="w-full min-h-screen bg-background flex flex-col items-center justify-center p-4 md:p-10">
      <div className="w-full max-w-6xl">
        <h2 className="text-3xl font-bold mb-6 text-foreground">Deals of the Day</h2>
        <OfferCarousel offers={sampleOffers} />
      </div>
    </div>
  );
}