# Slide Puzzle Integrations
> An integrations section where fourteen tool tiles sit in a grid of slots around the headline. They start scrambled and solve themselves like a sliding puzzle, then one slides over every few seconds; point at a tile for its name, or sweep the mouse fast to shove a row along. Under the card, three notes on how the integrations work.
A shadcn/ui block from the [@keyframeui](https://keyframeui.com/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/keyframeui/slide-puzzle-integrations).
- Page, with a live preview: https://shadcn.exchange/r/keyframeui/slide-puzzle-integrations
- Screenshot: https://shadcn.exchange/shot/keyframeui/slide-puzzle-integrations/light.png
- Registry item: https://keyframeui.com/r/slide-puzzle-integrations.json
- Categories: blocks, integrations
- Listed: 2026-11-02, source last changed 2026-11-02
## Install
```bash
npx shadcn@latest add https://shadcn.exchange/r/keyframeui/slide-puzzle-integrations.json
```
Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.
## Dependencies
- Registry items: `https://keyframeui.com/r/slide-puzzle.json`
## Notes from the registry
Live preview and the components it's built with: https://keyframeui.com/blocks/integrations/slide-puzzle-integrations
## Files
### `registry/blocks/slide-puzzle-integrations.tsx`
```tsx
"use client";
import * as React from "react";
import { SlidePuzzle, type SlidePuzzleTile } from "@/components/ui/slide-puzzle";
/* ── Content ─────────────────────────────────────────────────
* Everything you'd change to make the section yours: the copy,
* the integrations on the tiles (a name, what it is, a link and
* a mark) and the three notes under the card. Every name and
* mark here is made up; swap in your own logos as `icon`.
* ─────────────────────────────────────────────────────────── */
/** The one accent: the primary button and the focus rings. */
const ACCENT = "#ff5a1f";
const BADGE = "Integrations";
const HEADLINE = "Plugs into everything that ships your app.";
const SUBLINE =
"Rung reads your store accounts, reviews and analytics, and posts what moved to wherever your team already talks.";
const PRIMARY_CTA = { label: "Browse 38 integrations", href: "#integrations" };
const SECONDARY_CTA = { label: "Request one", href: "#request" };
const NOTES = [
{ title: "Two-way listing sync", body: "Accept a suggested subtitle in Rung and it lands in your store listing, ready for review." },
{ title: "Alerts where you talk", body: "Move up or slip down for a keyword you care about and your team channel hears first." },
{ title: "Webhooks for the rest", body: "Every rank change as a signed event, so your own dashboards stay current." },
];
function Mark({ children }: { children: React.ReactNode }) {
return (
);
}
const TILES: SlidePuzzleTile[] = [
{
id: "storefront",
label: "Storefront · App store",
href: "#storefront",
icon: (
),
},
{
id: "playfield",
label: "Playfield · Android store",
href: "#playfield",
icon: (
),
},
{
id: "chatter",
label: "Chatter · Team chat",
href: "#chatter",
icon: (
),
},
{
id: "tracklight",
label: "Tracklight · Analytics",
href: "#tracklight",
icon: (
),
},
{
id: "paywall-kit",
label: "Paywall Kit · Subscriptions",
href: "#paywall-kit",
icon: (
),
},
{
id: "bugnet",
label: "Bugnet · Crash reports",
href: "#bugnet",
icon: (
),
},
{
id: "lintel",
label: "Lintel · Issues",
href: "#lintel",
icon: (
),
},
{
id: "sheetwise",
label: "Sheetwise · Spreadsheets",
href: "#sheetwise",
icon: (
),
},
{
id: "folio",
label: "Folio · Docs",
href: "#folio",
icon: (
),
},
{
id: "pixelboard",
label: "Pixelboard · Design files",
href: "#pixelboard",
icon: (
),
},
{
id: "hookline",
label: "Hookline · Webhooks",
href: "#hookline",
icon: (
),
},
{
id: "starboard",
label: "Starboard · Reviews",
href: "#starboard",
icon: (
),
},
{
id: "atlas",
label: "Atlas · Localization",
href: "#atlas",
icon: (
),
},
{
id: "postbox",
label: "Postbox · Email digest",
href: "#postbox",
icon: (
),
},
];
/* ── Section ─────────────────────────────────────────────── */
export function SlidePuzzleIntegrations() {
return (