Integration Showcase

Features 249

About

Integration Showcase This component displays a title, subtitle, an illustration, and a responsive grid of integrations. It's designed to be easily populated with your own data.

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

Code

How Integration Showcase 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 { IntegrationShowcase, Integration } from '@/components/ui/integration-showcase';

// Sample data for the integrations grid
const integrationsData: Integration[] = [
  {
    name: 'Notion',
    description: 'Send submissions to Notion.',
    iconSrc: 'https://cdn.21st.dev/assets/mirror/f0/f00e80e86e9962043ccc8e8b9ecbc4a69dae512c2718830f5ccae9abc0470cf1.svg',
  },
  {
    name: 'Google Sheets',
    description: 'Send submissions to a sheet.',
    iconSrc: 'https://cdn.21st.dev/assets/mirror/d3/d3b9eaf85507404536f67500ec23361b96e4232fbcd128fa1ee035adcb48c269.svg',
  },
  {
    name: 'Airtable',
    description: 'Send submissions to Airtable.',
    iconSrc: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAMAAABF0y+mAAAAjVBMVEVHcEz+uwD9tQDtnB/9tQD9tAD8tAD/tAD+tQD+tQD+tgD9tQD9tAD9tgDfJ1a8IEi6EEv/uAD9tAD9tQAOwP8Xv/8YwP/5K2DnJ1m5H0e6IEe8HUnxJ2AXwP8Wv/8Yv/8Yv/8YwP/5K2DDIUv9tQANx/8OwP8YwP8Uwv8UwP/WJFK9IEnAIEj5LGD5K2Cg/8aNAAAAL3RSTlMAJmwOVdb/HoR9NKfqiK7GUke6t1XEueL//+yMLzOT9v/h//+5D1zdJpr/mkSwqkV2VRMAAADASURBVHgBvc5FFgJBEATRxN3G3d3ufzxacGqWENv/SvCHJtPphJbZfLFkLeazL1qtBQnerN5ou1u+tdveZTbdL7/aTyVul2QTqZPD/mtwvRJ0PJ2Bi/JK6gXQdIOhadmO62G2WdyfncEPwiiKOSZWattiPNvv2VBe6BGvFJgkTNn4DKyqZkNvmDQ2r0VeSnhDoacOfkRhYjEC/JDC3gNGcGBEoyACYwAeIxINiAgM6wojqBc5QGIY+CCrQkPDr7sCTOYgaxntCWQAAAAASUVORK5CYII=',
  },
  {
    name: 'Webhooks',
    description: 'Send events for new submissions to HTTP endpoints.',
    iconSrc: 'https://cdn.21st.dev/assets/mirror/a3/a3200548fd9e7c24ee4214d4304dfdb8815b36e3fc2308bdae185353f4823adf.svg',
  },
  {
    name: 'Slack',
    description: 'Send Slack messages for new submissions.',
    iconSrc: 'https://cdn.21st.dev/assets/mirror/c0/c0af31c6ff066af42be01942d97b843c037874f184e1c96f0a6bdf3946a4d1b9.svg',
  },
  {
    name: 'Coda',
    description: 'Send submissions to Coda.',
    iconSrc: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAiklEQVR4AWNwL/ChKx5YC79khSQC8X8q40SsFgIlOEAKaIQ5sFkoQ0MLZYa9hfyjFpKKDwNxIBBrQ3EdbVIpZj5DNo8f6pDDID61LKwjoZSh3EKQPnpa+HA4W4hIffS2cA6dLCScUqH58SEIU9FCRHxCM3sgFM8ZLUtpbuFIqfHp34iifzNx+Le8AdWFLhdVBCcKAAAAAElFTkSuQmCC',
  },
  {
    name: 'Google Analytics',
    description: 'Analyze traffic sources, visitor behavior and time spent.',
    iconSrc: 'https://cdn.21st.dev/assets/mirror/a3/a30eb12f41044715f31314e9bf84ad984ae3b54b07125f5492b23cf151a0c461.svg',
  },
  {
    name: 'Meta Pixel',
    description: 'Measure and optimize your ad campaigns.',
    iconSrc: 'https://cdn.21st.dev/assets/mirror/78/78e77f62b148c7e51c24d978f7f450deaa2adb84b7b716d113c0f2777b97e7e0.svg',
  },
  {
    name: 'Zapier',
    description: 'Send submissions to your favorite tools.',
    iconSrc: 'https://cdn.21st.dev/assets/mirror/13/139a90853100a3a4afa575e33a8134a26d92cabbd26044c62f93ccc938dbb7c1.svg',
  },
  {
    name: 'Make',
    description: 'Send submissions to your favorite tools.',
    iconSrc: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAMAAABF0y+mAAAAwFBMVEX//////f/RY/LKYvDy4PvZwPF3ANGPTNeqhN/n3PVqAMuLS9X33/3GAO++GuyxAOnId/DFoOqEFtV+INLMteuDPdPhYPfNDvHEIu7UkvOsbOOJINeEJ9Tt4/jbAPXXF/SSGduTKdvxW/vnDvnbivT49PyQANuZW9v/2//yAPzpzPmHGNe6keb/Vf/mhvjNmu//AP+5ZumnJeWDANfzhPz/0//37f2jAOSnVeL/g//lxPfCjev/Sf+3TurZuPKIMda9K89qAAAAt0lEQVR4Ad3QAQfCYBDG8f9tu7e3WVRUBUCRCFDfH4gAAhkgCKWoNmZZTcy26QvswXF+nsPR3sifxRFJVfKAvAC8wgL5JfYj8Gvoi0R+jt2ouFUUrUXOxmBPaQPHSjaam++AXMtnl5KAaEpfoN5UyCahJnBs4NLtGI1xhtgp6yCtoAKDEIHrSWrNjQsdh62STYFZBT2gu8eDoQsP1mXcacAF7kafLvTsYVX97XYPgPfOWAy4hbQrHxHNJ3cZ8ThmAAAAAElFTkSuQmCC', // Make.com was Integromat
  },
  {
    name: 'Pipedream',
    description: 'Send submissions to your favorite tools.',
    iconSrc: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcBAMAAACAI8KnAAAAMFBMVEUz0ow004s00os00osz0Ywr0Ygc0INC1ZJV2Zxw3qrN8+GJ5buw7dD////i+e+i6ccrH71KAAAABXRSTlMIiuv/iksBsyIAAACfSURBVHgBY2BUNoYDIwcGZ2MkYMgAkkRIMwAJ07Tg0IowMB/EjVy1ddeqNa0wbvTdV3fv3l2B4ILALSTuvXV3706Fc++1pa+9ewzOvW9suvfuMmTuvLvPULnX8HKf4TLqTmn4WSSL7p6cf/duK5Ij3yI7EgReIrh3/t5904zg3jevKDZG4gJJXFzLV6+RueYd7XCuMigo4QGLFuxokQIA5VCQSPPORxwAAAAASUVORK5CYII=',
  },
  {
    name: 'And many more',
    description: 'Integrate with thousands of tools using Zapier, Make or Pipedream.',
    iconSrc: 'https://cdn.21st.dev/assets/mirror/51/5161cc75a34e63955dad792cabeccfe7c10d411fcd7b8e2a0c6b5d6b67d01ce9.png',
  },
];

const IntegrationShowcaseDemo = () => {
  return (
    <div className="w-full bg-background">
      <IntegrationShowcase
        title="Connect your ~favorite~ tools"
        subtitle="Save time using popular integrations to sync your form submissions."
        illustrationSrc="https://cdn.21st.dev/assets/mirror/91/913e6c36b2d27a75e0ee5fb3aa202dc67d1e48ef9e8d3f56da49ba4b3e6bddf5.png"
        illustrationAlt="A person working on a checklist"
        integrations={integrationsData}
      />
    </div>
  );
};

export default IntegrationShowcaseDemo;