Reward Partners Section

Component

About

Reward Partners Section Description A responsive and theme-adaptive section component to showcase partner logos in a continuous, infinite scroll animation. It's designed to be easily configurable with props for the title, subtitle, and a list of partners.

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

Code

How Reward Partners Section is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { RewardPartners, Partner } from "@/components/ui/reward-partners-section";

// Define the list of partners with their names and logo URLs
const partnersData: Partner[] = [
  {
    name: "Flipkart SuperCoin",
    logoUrl: "https://cdn.21st.dev/assets/mirror/7a/7abcc28aa9c9062a5c2838e7636534524492f455ff502c2bb120c76bef2ffd6e.svg",
  },
  {
    name: "Zillion",
    logoUrl: "https://cdn.21st.dev/assets/mirror/ee/ee116d2eec4f17ac4fe30ed0cecc1e718c703f5ccc12bb7c9b08f686a38aaddb.svg",
  },
  {
    name: "Flash.co",
    logoUrl: "https://cdn.21st.dev/assets/mirror/93/9377507b749d95f8b198b925e669c23f40fcbdf4ec0ae3a619b10b1aff97a2c8.svg",
  },
  {
    name: "GoSats",
    logoUrl: "https://cdn.21st.dev/assets/mirror/44/44385e603aa13705c5575d42fb0822c97d09f2d35938c5ff0d7320949b5704bc.svg",
  },
  {
    name: "IndusInd Bank",
    logoUrl: "https://cdn.21st.dev/assets/mirror/b0/b008e48dc834516fb8269e9d970ae3b57c16d90ebd30a29584a1432c4ae39c7f.svg",
  },
  {
    name: "Yes Bank",
    logoUrl: "https://cdn.21st.dev/assets/mirror/72/72504740de44739d1ff61575737bdac7636946ba4b43c6360fb0ee78b455729a.svg",
  },
  {
    name: "TimesPoints",
    logoUrl: "https://cdn.21st.dev/assets/mirror/8b/8b22dda1a811388111bf76a85adaeed3a5b1546406f87f6b4f5e812f9c51f857.svg",
  },
  {
    name: "Yono SBI",
    logoUrl: "https://cdn.21st.dev/assets/mirror/07/071b8e8f0cb50b15fa2501d149ca87a90025712975988ba04724100f819fcdb9.svg",
  },
];

// The demo component that renders the RewardPartners section
export default function RewardPartnersDemo() {
  return (
    <div className="w-full">
      <RewardPartners
        title="Our Reward Partners make each day rewarding for you!"
        subtitle="Elevate your Payments — Pay effortlessly with reward points for a seamless experience!"
        partners={partnersData}
      />
    </div>
  );
}