Components
Loading preview...
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.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/integration-showcase// 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.worldvectorlogo.com/logos/notion-2.svg',
},
{
name: 'Google Sheets',
description: 'Send submissions to a sheet.',
iconSrc: 'https://cdn.worldvectorlogo.com/logos/google-sheets-logo-icon.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.worldvectorlogo.com/logos/webhooks.svg',
},
{
name: 'Slack',
description: 'Send Slack messages for new submissions.',
iconSrc: 'https://cdn.worldvectorlogo.com/logos/slack-new-logo.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.worldvectorlogo.com/logos/google-analytics-3.svg',
},
{
name: 'Meta Pixel',
description: 'Measure and optimize your ad campaigns.',
iconSrc: 'https://cdn.worldvectorlogo.com/logos/meta-3.svg',
},
{
name: 'Zapier',
description: 'Send submissions to your favorite tools.',
iconSrc: 'https://cdn.worldvectorlogo.com/logos/zapier.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://img.icons8.com/ios-glyphs/60/plus-math.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://tally.so/images/demo/v2/strategy.png"
illustrationAlt="A person working on a checklist"
integrations={integrationsData}
/>
</div>
);
};
export default IntegrationShowcaseDemo;