GitHub

Blocks / Integrations

Integrations beta

The grid of tools a product plays well with — a mark, a name, and what it is for.

Preview

Works with the tools you already use

Browse all
GitHubCode hosting
SlackMessaging
ClaudeAI assistant
GeminiAI models
YouTubeVideo
SpotifyAudio
XSocial
LinkedInSocial
TwitchStreaming
InstagramSocial
TikTokVideo
FacebookSocial

Built from: Button — include their CSS alongside this block.

<section class="k-int" style="max-width:640px">
  <div class="k-int-h"><h3>Works with the tools you already use</h3><a class="btn btn-sec btn-sm" href="#">Browse all</a></div>
  <div class="k-int-grid"><div class="k-int-tile"><span class="k-int-ic"><svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2.8a9.2 9.2 0 0 0-9.2 9.2c0 4.1 2.7 7.6 6.4 9 .5.1.6-.2.6-.4v-1.4c-2.6.6-3.1-1.2-3.1-1.2-.4-1.1-1-1.3-1-1.3-.9-.6.1-.6.1-.6.9.1 1.4.9 1.4.9.9 1.4 2.2 1 2.7.8.1-.6.3-1.1.6-1.3-2.1-.2-4.2-1-4.2-4.6 0-1 .4-1.8.9-2.5-.1-.2-.4-1.1.1-2.3 0 0 .8-.2 2.5.9a8.6 8.6 0 0 1 4.5 0c1.7-1.1 2.5-.9 2.5-.9.5 1.2.2 2.1.1 2.3.5.7.9 1.5.9 2.5 0 3.6-2.2 4.4-4.2 4.6.3.3.6.9.6 1.8v2.6c0 .2.2.5.6.4a9.2 9.2 0 0 0 6.4-9A9.2 9.2 0 0 0 12 2.8z"/></svg></span><span><span class="k-int-name">GitHub</span><span class="k-int-cat" style="display:block">Code hosting</span></span></div><div class="k-int-tile"><span class="k-int-ic"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="5"/><path d="M9.5 8v8M14.5 8v8M8 9.5h8M8 14.5h8"/></svg></span><span><span class="k-int-name">Slack</span><span class="k-int-cat" style="display:block">Messaging</span></span></div><div class="k-int-tile"><span class="k-int-ic"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14.4 12.0L21.6 12.0M14.1 13.2L18.1 15.5M13.2 14.1L16.8 20.3M12.0 14.4L12.0 19.0M10.8 14.1L7.2 20.3M9.9 13.2L5.9 15.5M9.6 12.0L2.4 12.0M9.9 10.8L5.9 8.5M10.8 9.9L7.2 3.7M12.0 9.6L12.0 5.0M13.2 9.9L16.8 3.7M14.1 10.8L18.1 8.5"/></svg></span><span><span class="k-int-name">Claude</span><span class="k-int-cat" style="display:block">AI assistant</span></span></div><div class="k-int-tile"><span class="k-int-ic"><svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2c.7 5.9 4.1 9.3 10 10-5.9.7-9.3 4.1-10 10-.7-5.9-4.1-9.3-10-10C7.9 11.3 11.3 7.9 12 2z"/></svg></span><span><span class="k-int-name">Gemini</span><span class="k-int-cat" style="display:block">AI models</span></span></div><div class="k-int-tile"><span class="k-int-ic"><svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M21.6 7.1a2.8 2.8 0 0 0-2-2C17.9 4.7 12 4.7 12 4.7s-5.9 0-7.6.4a2.8 2.8 0 0 0-2 2A29 29 0 0 0 2 12a29 29 0 0 0 .4 4.9 2.8 2.8 0 0 0 2 2c1.7.4 7.6.4 7.6.4s5.9 0 7.6-.4a2.8 2.8 0 0 0 2-2A29 29 0 0 0 22 12a29 29 0 0 0-.4-4.9zM10 15.3V8.7L15.6 12 10 15.3z"/></svg></span><span><span class="k-int-name">YouTube</span><span class="k-int-cat" style="display:block">Video</span></span></div><div class="k-int-tile"><span class="k-int-ic"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M8 10.2c2.7-.8 5.5-.6 8 .7M8.2 13c2.2-.6 4.5-.4 6.5.6M8.4 15.7c1.8-.5 3.6-.3 5.2.5"/></svg></span><span><span class="k-int-name">Spotify</span><span class="k-int-cat" style="display:block">Audio</span></span></div><div class="k-int-tile"><span class="k-int-ic"><svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M4 3l6.9 9.3L4.4 21h2.9l5-6.3 4 6.3H20l-7.2-9.7L19.4 3h-2.9l-4.4 5.6L8.4 3H4z"/></svg></span><span><span class="k-int-name">X</span><span class="k-int-cat" style="display:block">Social</span></span></div><div class="k-int-tile"><span class="k-int-ic"><svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M4 3h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm3.2 7.3H4.6V18h2.6v-7.7zM5.9 9.2a1.5 1.5 0 1 0 0-3.1 1.5 1.5 0 0 0 0 3.1zM18 18h-2.6v-3.7c0-1.2-.4-2-1.5-2-1.3 0-1.9.9-1.9 2V18H9.4v-7.7h2.6v1.1c.4-.7 1.3-1.3 2.6-1.3 2 0 3.4 1.3 3.4 3.9v4z"/></svg></span><span><span class="k-int-name">LinkedIn</span><span class="k-int-cat" style="display:block">Social</span></span></div><div class="k-int-tile"><span class="k-int-ic"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 2H3v16h5v4l4-4h5l4-4V2z"/><path d="M11 7v4M16 7v4"/></svg></span><span><span class="k-int-name">Twitch</span><span class="k-int-cat" style="display:block">Streaming</span></span></div><div class="k-int-tile"><span class="k-int-ic"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.3" cy="6.7" r="0.4" fill="currentColor" stroke="none"/></svg></span><span><span class="k-int-name">Instagram</span><span class="k-int-cat" style="display:block">Social</span></span></div><div class="k-int-tile"><span class="k-int-ic"><svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M16.6 3c.4 2.2 1.9 3.8 4.1 4.1v3c-1.6 0-3-.5-4.1-1.3v6.4c0 3.4-2.4 5.8-5.7 5.8A5.5 5.5 0 0 1 5.3 15c0-3.2 2.7-5.6 6-5.3v3.1c-1.4-.3-2.8.7-2.8 2.1 0 1.3 1 2.3 2.3 2.3 1.5 0 2.6-1.1 2.6-2.7V3h3.2z"/></svg></span><span><span class="k-int-name">TikTok</span><span class="k-int-cat" style="display:block">Video</span></span></div><div class="k-int-tile"><span class="k-int-ic"><svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M13.6 21v-6.9h2.3l.4-2.9h-2.7V9.3c0-.8.3-1.4 1.5-1.4h1.3V5.3c-.6-.1-1.3-.2-2.1-.2-2.1 0-3.6 1.3-3.6 3.7v2.4H8.4v2.9h2.3V21h2.9z"/></svg></span><span><span class="k-int-name">Facebook</span><span class="k-int-cat" style="display:block">Social</span></span></div></div>
</section>
.k-int{font-family:var(--k-font);text-align:left;color:var(--k-ink)}
.k-int-h{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:16px}
.k-int-h h3{font-size:17px;font-weight:600;letter-spacing:-.015em}
.k-int-h a{font-size:13px;font-weight:550;color:var(--k-accent);text-decoration:none;white-space:nowrap}
.k-int-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media (max-width:640px){.k-int-grid{grid-template-columns:repeat(2,1fr)}}
.k-int-tile{border:1px solid var(--k-line);border-radius:13px;background:var(--k-bg);padding:15px;display:grid;gap:10px;transition:border-color .14s}
.k-int-tile:hover{border-color:var(--k-border-strong)}
.k-int-ic{width:38px;height:38px;border-radius:10px;background:var(--k-bg-soft);border:1px solid var(--k-line);display:grid;place-items:center;color:var(--k-ink)}
.k-int-name{font-size:13px;font-weight:600}
.k-int-cat{font-size:11.5px;color:var(--k-ink-3);margin-top:1px}

Usage

For the "works with" section of a landing page. Marks are nominative: they name the tool, they do not decorate. Keep the grid to names a visitor already knows.