KeyframeUI

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.

Integrations Section

Built with Slide Puzzle

Uses clsx, tailwind-merge

Inspired by ByDefault

Open in ChatGPTOpen in Claude

Installation

The CLI writes components/slide-puzzle-integrations.tsx, the components it's built with (components/ui/slide-puzzle.tsx) and lib/utils.ts, and installs clsx and tailwind-merge. It needs the @keyframeui registry in components.json; add it once per project.

npx shadcn@latest add @keyframeui/slide-puzzle-integrations

Then put it where the section goes. The copy, links and data sit in constants at the top of the file, so making it yours starts there.

app/page.tsx
import { SlidePuzzleIntegrations } from "@/components/slide-puzzle-integrations";

export default function Page() {
  return <SlidePuzzleIntegrations />;
}

Built with

Each of these is a component on its own, with its own examples and props. The block installs them for you.