Showcase your product’s compatibility and connected services with Tailwind CSS integrations sections. These layouts feature logos, brief descriptions, and visual cues to highlight supported platforms, helping users understand your ecosystem. Perfect for SaaS platforms, apps, and tools aiming to build trust and demonstrate versatility.
export const Lovable = () => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width={121}
height={122}
viewBox="0 0 121 122"
fill="none">
<mask
id="mask0_572_319"
style={{
maskType: "alpha"
}}
maskUnits="userSpaceOnUse"
x={0}
y={0}
width={121}
height={122}>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M36.0687 0C55.9888 0 72.1373 16.1551 72.1373 36.0835V49.7975H84.141C104.061 49.7975 120.21 65.9526 120.21 85.8809C120.21 105.809 104.061 121.964 84.141 121.964H0V36.0835C0 16.1551 16.1485 0 36.0687 0Z"
fill="url(#paint0_linear_572_319)"
/>
</mask>
<g mask="url(#mask0_572_319)">
<g filter="url(#filter0_f_572_319)">
<ellipse cx={52.7381} cy={65.1011} rx={81.3729} ry={81.1923} fill="#4B73FF" />
</g>
<g filter="url(#filter1_f_572_319)">
<ellipse cx={61.6734} cy={20.547} rx={104.216} ry={81.1923} fill="#FF66F4" />
</g>
<g filter="url(#filter2_f_572_319)">
<ellipse cx={78.6659} cy={5.26802} rx={81.3729} ry={71.3042} fill="#FF0105" />
</g>
<g filter="url(#filter3_f_572_319)">
<ellipse cx={63.121} cy={20.5275} rx={48.9374} ry={48.8288} fill="#FE7B02" />
</g>
</g>
<defs>
<filter
id="filter0_f_572_319"
x={-65.0219}
y={-52.4784}
width={235.52}
height={235.159}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB">
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feGaussianBlur stdDeviation={18.1936} result="effect1_foregroundBlur_572_319" />
</filter>
<filter
id="filter1_f_572_319"
x={-78.9301}
y={-97.0324}
width={281.208}
height={235.159}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB">
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feGaussianBlur stdDeviation={18.1936} result="effect1_foregroundBlur_572_319" />
</filter>
<filter
id="filter2_f_572_319"
x={-39.0942}
y={-102.423}
width={235.52}
height={215.383}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB">
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feGaussianBlur stdDeviation={18.1936} result="effect1_foregroundBlur_572_319" />
</filter>
<filter
id="filter3_f_572_319"
x={-22.2036}
y={-64.6884}
width={170.649}
height={170.432}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB">
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feGaussianBlur stdDeviation={18.1936} result="effect1_foregroundBlur_572_319" />
</filter>
<linearGradient
id="paint0_linear_572_319"
x1={40.4527}
y1={21.4331}
x2={76.9327}
y2={121.971}
gradientUnits="userSpaceOnUse">
<stop offset={0.025} stopColor="#FF8E63" />
<stop offset={0.56} stopColor="#FF7EB0" />
<stop offset={0.95} stopColor="#4B73FF" />
</linearGradient>
</defs>
</svg>
);
};
export const ChatGPT = () => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
fillRule="evenodd"
height="1em"
style={{
flex: "none",
lineHeight: 1
}}
viewBox="0 0 24 24"
width="1em">
<title>{"OpenAI"}</title>
<path d="M21.55 10.004a5.416 5.416 0 00-.478-4.501c-1.217-2.09-3.662-3.166-6.05-2.66A5.59 5.59 0 0010.831 1C8.39.995 6.224 2.546 5.473 4.838A5.553 5.553 0 001.76 7.496a5.487 5.487 0 00.691 6.5 5.416 5.416 0 00.477 4.502c1.217 2.09 3.662 3.165 6.05 2.66A5.586 5.586 0 0013.168 23c2.443.006 4.61-1.546 5.361-3.84a5.553 5.553 0 003.715-2.66 5.488 5.488 0 00-.693-6.497v.001zm-8.381 11.558a4.199 4.199 0 01-2.675-.954c.034-.018.093-.05.132-.074l4.44-2.53a.71.71 0 00.364-.623v-6.176l1.877 1.069c.02.01.033.029.036.05v5.115c-.003 2.274-1.87 4.118-4.174 4.123zM4.192 17.78a4.059 4.059 0 01-.498-2.763c.032.02.09.055.131.078l4.44 2.53c.225.13.504.13.73 0l5.42-3.088v2.138a.068.068 0 01-.027.057L9.9 19.288c-1.999 1.136-4.552.46-5.707-1.51h-.001zM3.023 8.216A4.15 4.15 0 015.198 6.41l-.002.151v5.06a.711.711 0 00.364.624l5.42 3.087-1.876 1.07a.067.067 0 01-.063.005l-4.489-2.559c-1.995-1.14-2.679-3.658-1.53-5.63h.001zm15.417 3.54l-5.42-3.088L14.896 7.6a.067.067 0 01.063-.006l4.489 2.557c1.998 1.14 2.683 3.662 1.529 5.633a4.163 4.163 0 01-2.174 1.807V12.38a.71.71 0 00-.363-.623zm1.867-2.773a6.04 6.04 0 00-.132-.078l-4.44-2.53a.731.731 0 00-.729 0l-5.42 3.088V7.325a.068.068 0 01.027-.057L14.1 4.713c2-1.137 4.555-.46 5.707 1.513.487.833.664 1.809.499 2.757h.001zm-11.741 3.81l-1.877-1.068a.065.065 0 01-.036-.051V6.559c.001-2.277 1.873-4.122 4.181-4.12.976 0 1.92.338 2.671.954-.034.018-.092.05-.131.073l-4.44 2.53a.71.71 0 00-.365.623l-.003 6.173v.002zm1.02-2.168L12 9.25l2.414 1.375v2.75L12 14.75l-2.415-1.375v-2.75z" />
</svg>
);
};
export const Gemini = () => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
height="1em"
style={{
flex: "none",
lineHeight: 1
}}
viewBox="0 0 24 24"
width="1em">
<title>{"Gemini"}</title>
<path
d="M20.616 10.835a14.147 14.147 0 01-4.45-3.001 14.111 14.111 0 01-3.678-6.452.503.503 0 00-.975 0 14.134 14.134 0 01-3.679 6.452 14.155 14.155 0 01-4.45 3.001c-.65.28-1.318.505-2.002.678a.502.502 0 000 .975c.684.172 1.35.397 2.002.677a14.147 14.147 0 014.45 3.001 14.112 14.112 0 013.679 6.453.502.502 0 00.975 0c.172-.685.397-1.351.677-2.003a14.145 14.145 0 013.001-4.45 14.113 14.113 0 016.453-3.678.503.503 0 000-.975 13.245 13.245 0 01-2.003-.678z"
fill="#3186FF"
/>
<path
d="M20.616 10.835a14.147 14.147 0 01-4.45-3.001 14.111 14.111 0 01-3.678-6.452.503.503 0 00-.975 0 14.134 14.134 0 01-3.679 6.452 14.155 14.155 0 01-4.45 3.001c-.65.28-1.318.505-2.002.678a.502.502 0 000 .975c.684.172 1.35.397 2.002.677a14.147 14.147 0 014.45 3.001 14.112 14.112 0 013.679 6.453.502.502 0 00.975 0c.172-.685.397-1.351.677-2.003a14.145 14.145 0 013.001-4.45 14.113 14.113 0 016.453-3.678.503.503 0 000-.975 13.245 13.245 0 01-2.003-.678z"
fill="url(#lobe-icons-gemini-fill-0)"
/>
<path
d="M20.616 10.835a14.147 14.147 0 01-4.45-3.001 14.111 14.111 0 01-3.678-6.452.503.503 0 00-.975 0 14.134 14.134 0 01-3.679 6.452 14.155 14.155 0 01-4.45 3.001c-.65.28-1.318.505-2.002.678a.502.502 0 000 .975c.684.172 1.35.397 2.002.677a14.147 14.147 0 014.45 3.001 14.112 14.112 0 013.679 6.453.502.502 0 00.975 0c.172-.685.397-1.351.677-2.003a14.145 14.145 0 013.001-4.45 14.113 14.113 0 016.453-3.678.503.503 0 000-.975 13.245 13.245 0 01-2.003-.678z"
fill="url(#lobe-icons-gemini-fill-1)"
/>
<path
d="M20.616 10.835a14.147 14.147 0 01-4.45-3.001 14.111 14.111 0 01-3.678-6.452.503.503 0 00-.975 0 14.134 14.134 0 01-3.679 6.452 14.155 14.155 0 01-4.45 3.001c-.65.28-1.318.505-2.002.678a.502.502 0 000 .975c.684.172 1.35.397 2.002.677a14.147 14.147 0 014.45 3.001 14.112 14.112 0 013.679 6.453.502.502 0 00.975 0c.172-.685.397-1.351.677-2.003a14.145 14.145 0 013.001-4.45 14.113 14.113 0 016.453-3.678.503.503 0 000-.975 13.245 13.245 0 01-2.003-.678z"
fill="url(#lobe-icons-gemini-fill-2)"
/>
<defs>
<linearGradient
gradientUnits="userSpaceOnUse"
id="lobe-icons-gemini-fill-0"
x1={7}
x2={11}
y1={15.5}
y2={12}>
<stop stopColor="#08B962" />
<stop offset={1} stopColor="#08B962" stopOpacity={0} />
</linearGradient>
<linearGradient
gradientUnits="userSpaceOnUse"
id="lobe-icons-gemini-fill-1"
x1={8}
x2={11.5}
y1={5.5}
y2={11}>
<stop stopColor="#F94543" />
<stop offset={1} stopColor="#F94543" stopOpacity={0} />
</linearGradient>
<linearGradient
gradientUnits="userSpaceOnUse"
id="lobe-icons-gemini-fill-2"
x1={3.5}
x2={17.5}
y1={13.5}
y2={12}>
<stop stopColor="#FABC12" />
<stop offset={0.46} stopColor="#FABC12" stopOpacity={0} />
</linearGradient>
</defs>
</svg>
);
};
export const Grok = () => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
fillRule="evenodd"
height="1em"
style={{
flex: "none",
lineHeight: 1
}}
viewBox="0 0 24 24"
width="1em">
<title>{"Grok"}</title>
<path d="M9.27 15.29l7.978-5.897c.391-.29.95-.177 1.137.272.98 2.369.542 5.215-1.41 7.169-1.951 1.954-4.667 2.382-7.149 1.406l-2.711 1.257c3.889 2.661 8.611 2.003 11.562-.953 2.341-2.344 3.066-5.539 2.388-8.42l.006.007c-.983-4.232.242-5.924 2.75-9.383.06-.082.12-.164.179-.248l-3.301 3.305v-.01L9.267 15.292M7.623 16.723c-2.792-2.67-2.31-6.801.071-9.184 1.761-1.763 4.647-2.483 7.166-1.425l2.705-1.25a7.808 7.808 0 00-1.829-1A8.975 8.975 0 005.984 5.83c-2.533 2.536-3.33 6.436-1.962 9.764 1.022 2.487-.653 4.246-2.34 6.022-.599.63-1.199 1.259-1.682 1.925l7.62-6.815" />
</svg>
);
};
export const Claude = () => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
height="1em"
style={{
flex: "none",
lineHeight: 1
}}
viewBox="0 0 24 24"
width="1em">
<title>{"Claude"}</title>
<path
d="M4.709 15.955l4.72-2.647.08-.23-.08-.128H9.2l-.79-.048-2.698-.073-2.339-.097-2.266-.122-.571-.121L0 11.784l.055-.352.48-.321.686.06 1.52.103 2.278.158 1.652.097 2.449.255h.389l.055-.157-.134-.098-.103-.097-2.358-1.596-2.552-1.688-1.336-.972-.724-.491-.364-.462-.158-1.008.656-.722.881.06.225.061.893.686 1.908 1.476 2.491 1.833.365.304.145-.103.019-.073-.164-.274-1.355-2.446-1.446-2.49-.644-1.032-.17-.619a2.97 2.97 0 01-.104-.729L6.283.134 6.696 0l.996.134.42.364.62 1.414 1.002 2.229 1.555 3.03.456.898.243.832.091.255h.158V9.01l.128-1.706.237-2.095.23-2.695.08-.76.376-.91.747-.492.584.28.48.685-.067.444-.286 1.851-.559 2.903-.364 1.942h.212l.243-.242.985-1.306 1.652-2.064.73-.82.85-.904.547-.431h1.033l.76 1.129-.34 1.166-1.064 1.347-.881 1.142-1.264 1.7-.79 1.36.073.11.188-.02 2.856-.606 1.543-.28 1.841-.315.833.388.091.395-.328.807-1.969.486-2.309.462-3.439.813-.042.03.049.061 1.549.146.662.036h1.622l3.02.225.79.522.474.638-.079.485-1.215.62-1.64-.389-3.829-.91-1.312-.329h-.182v.11l1.093 1.068 2.006 1.81 2.509 2.33.127.578-.322.455-.34-.049-2.205-1.657-.851-.747-1.926-1.62h-.128v.17l.444.649 2.345 3.521.122 1.08-.17.353-.608.213-.668-.122-1.374-1.925-1.415-2.167-1.143-1.943-.14.08-.674 7.254-.316.37-.729.28-.607-.461-.322-.747.322-1.476.389-1.924.315-1.53.286-1.9.17-.632-.012-.042-.14.018-1.434 1.967-2.18 2.945-1.726 1.845-.414.164-.717-.37.067-.662.401-.589 2.388-3.036 1.44-1.882.93-1.086-.006-.158h-.055L4.132 18.56l-1.13.146-.487-.456.061-.746.231-.243 1.908-1.312-.006.006z"
fill="#D97757"
fillRule="nonzero"
/>
</svg>
);
};
export const KlingAI = () => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
height="1em"
style={{
flex: "none",
lineHeight: 1
}}
viewBox="0 0 24 24"
width="1em">
<title>{"Kling"}</title>
<path
d="M5.412 13.775A23.193 23.193 0 017.41 9.32c3.17-5.492 7.795-8.757 10.33-7.294C12.038-1.266 4.598.944 1.122 6.964A13.378 13.378 0 00.085 9.22c-.259.739.092 1.534.77 1.926l4.557 2.63z"
fill="url(#lobe-icons-kling-fill-0)"
/>
<path
d="M18.588 10.164a23.188 23.188 0 01-1.999 4.455c-3.17 5.492-7.795 8.758-10.33 7.294 5.703 3.293 13.143 1.082 16.619-4.938a13.392 13.392 0 001.037-2.255c.259-.738-.092-1.534-.77-1.925l-4.557-2.63z"
fill="url(#lobe-icons-kling-fill-1)"
/>
<path
d="M16.59 14.62c3.17-5.492 3.686-11.13 1.15-12.594C15.207.563 10.582 3.83 7.41 9.32c2.074-3.59 5.809-5.315 8.344-3.852 2.534 1.464 2.908 5.56.835 9.151z"
fill="url(#lobe-icons-kling-fill-2)"
/>
<path
d="M7.41 9.32c-3.17 5.492-3.686 11.13-1.15 12.593 2.534 1.464 7.159-1.802 10.33-7.294-2.074 3.591-5.809 5.316-8.344 3.852-2.534-1.463-2.908-5.56-.835-9.15z"
fill="url(#lobe-icons-kling-fill-3)"
/>
<defs>
<radialGradient
cx={0}
cy={0}
gradientTransform="matrix(7.47772 -12.51022 17.14368 10.24728 5.173 13.637)"
gradientUnits="userSpaceOnUse"
id="lobe-icons-kling-fill-0"
r={1}>
<stop offset={0.095} stopColor="#FFF959" />
<stop offset={0.326} stopColor="#0DF35E" />
<stop offset={0.64} stopColor="#0BF2F9" />
<stop offset={1} stopColor="#04A6F0" />
</radialGradient>
<radialGradient
cx={0}
cy={0}
gradientTransform="rotate(120.868 6.491 10.491) scale(14.5747 19.9728)"
gradientUnits="userSpaceOnUse"
id="lobe-icons-kling-fill-1"
r={1}>
<stop offset={0.095} stopColor="#FFF959" />
<stop offset={0.326} stopColor="#0DF35E" />
<stop offset={0.64} stopColor="#0BF2F9" />
<stop offset={1} stopColor="#04A6F0" />
</radialGradient>
<linearGradient
gradientUnits="userSpaceOnUse"
id="lobe-icons-kling-fill-2"
x1={15.578}
x2={18.062}
y1={1.798}
y2={9.861}>
<stop stopColor="#003EFF" />
<stop offset={1} stopColor="#0BFFE7" />
</linearGradient>
<linearGradient
gradientUnits="userSpaceOnUse"
id="lobe-icons-kling-fill-3"
x1={8.422}
x2={5.938}
y1={22.142}
y2={14.079}>
<stop stopColor="#003EFF" />
<stop offset={1} stopColor="#0BFFE7" />
</linearGradient>
</defs>
</svg>
);
};
npx shadcn@latest add @bundui/integrationsimport { Integrations } from "@/components/integrations"<Integrations />