HomeBookmarks
gamekituigamekitui
gamekitui

gamekitui

SLby slarity
0components

Installs all 12 components. Without our CLI, run instead.

Auto-indexed

gamekitui contents

About gamekitui

gamekitui publishes a shadcn registry at gamekitui.com, with 12 components installable through the shadcn CLI.

Components
12
GitHub stars
36
Last commit
Jun 10, 2026
Repository
slarity/gamekit-ui

All 12 components

Copy a prompt for your agent, copy the install command, or open the docs that ship it.

  • 2048

    The addictive sliding-tile puzzle. Reach 2048. Swipe or arrow keys.

    1 file
    Docs ↗

  • Breakout

    Bounce the ball, clear the bricks, don't drop. Endless levels.

    1 file
    Docs ↗

  • Dino Runner

    dino-runner

    The offline-dino endless runner. Jump the cacti. Perfect for 404 pages.

    1 file
    Docs ↗

  • Flappy

    Tap to flap through the pipes. A tiny infinite runner for loading screens.

    1 file
    Docs ↗

  • Fruit Ninja

    fruit-ninja

    Slice the flying fruit, dodge the bombs, beat the clock. A juicy 60-second arcade run.

    1 file
    Docs ↗

  • Memory Match

    memory-match

    Flip cards to find matching pairs in as few moves as possible.

    1 file
    Docs ↗

  • Minesweeper

    Deterministic 9×9 Minesweeper. Left-click reveals, right-click / long-press flags.

    1 file
    Docs ↗

  • Pong

    The original. Player vs CPU. First to 7. W/S or arrow keys.

    1 file
    Docs ↗

  • Snake

    A tiny, themeable Snake game. ≤6KB gzipped, zero external assets.

    1 file
    Docs ↗

  • Stack

    The one-tap tower builder. Drop the sliding block, keep the overlap, stack as high as you can — every layer a shade of your theme.

    1 file
    Docs ↗

  • Tic-Tac-Toe

    Classic 3×3 Tic-Tac-Toe with an unbeatable CPU. Pure DOM, fully themeable.

    1 file
    Docs ↗

  • Whack-a-Mole

    Tap the moles before they duck. 30-second pointer-only arcade game.

    1 file
    Docs ↗

From the gamekitui readme

GameKit UI

Drop-in browser games for shadcn. Minimal, themeable React/TSX games installable with the shadcn CLI — perfect for 404 pages, empty states, loading screens, and landing-page easter eggs.

Website · Games · Docs · Contributing · Report a bug

npx shadcn@latest add @gamekitui/snake

No provider. No peer deps. No init step. Each game is a single drop-in file that inherits your shadcn theme automatically — light/dark and any preset. Drop one on a 404 and it plays on the first keypress.

✨ Highlights

  • 🪶 Minimal — each game is a single file with zero npm dependencies beyond react and your existing cn helper. 2–4 KB minified + gzipped (the raw .tsx is bigger because it inlines its engine and theme hooks), and lazy-loadable so it never weighs down your initial bundle.
  • 🎨 Themeable — your --primary / --secondary / --accent drive the playfield, not just the chrome. Canvas games read the tokens at runtime; DOM games use Tailwind token classes. Change your theme and the games recolor live.
  • 🚫 Zero assets — no images, audio, or fonts. Every pixel is drawn with CSS or ``.
  • ♿ Accessible — keyboard + touch input, visible focus rings, aria-live announcements, and prefers-reduced-motion support in every game.

🕹️ The lineup

GameSurfaceInstall
🐍 Snakecanvasnpx shadcn@latest add @gamekitui/snake
⭕ Tic-Tac-ToeDOM
npx shadcn@latest add @gamekitui/tic-tac-toe
🔢 2048DOMnpx shadcn@latest add @gamekitui/2048
🃏 Memory MatchDOMnpx shadcn@latest add @gamekitui/memory-match
🔨 Whack-a-MoleDOMnpx shadcn@latest add @gamekitui/whack-a-mole
💣 MinesweeperDOMnpx shadcn@latest add @gamekitui/minesweeper
🏓 Pongcanvasnpx shadcn@latest add @gamekitui/pong
🧱 Breakoutcanvasnpx shadcn@latest add @gamekitui/breakout
🦖 Dino Runnercanvasnpx shadcn@latest add @gamekitui/dino-runner
🐦 Flappycanvasnpx shadcn@latest add @gamekitui/flappy

Base registry URL: https://gamekitui.com/r/{name}.json

🚀 Usage

// app/not-found.tsx
import { Snake } from "@/components/games/snake";

export default function NotFound() {
  return (
    
      
        404
        Play a round while you decide where to go.
        
      
    
  );
}

That's it — no setup. On a single-game page like this, the game captures keyboard input globally, so it responds the moment a visitor presses a key (no click-to-focus needed).

Bundle size & lazy-loading

The installed .tsx looks big (~15–28 KB) because it inlines its own engine and theme hooks to stay a true single-file drop-in — but that's source, not what ships. Built for production each game is 2–4 KB minified + gzipped.

Because every game is a self-contained module, it's trivially code-split — lazy-load it so it never touches your initial bundle and only downloads when the easter egg actually renders:

import dynamic from "next/dynamic";

const Snake = dynamic(() => import("@/components/games/snake").then((m) => m.Snake), {
  ssr: false,
  loading: () => ,
});

Pin the registry (optional)

@gamekitui/ installs resolve straight from the official shadcn registry directory — no setup needed. If you'd rather pin the registry in your project config:

npx shadcn@latest registry add @gamekitui

Or add "@gamekitui": "https://gamekitui.com/r/{name}.json" to the registries field of your components.json by hand. You can also install any game by its direct URL: npx shadcn@latest add https://gamekitui.com/r/snake.json.

⚙️ Shared props

Every game accepts a common subset of props:

PropTypeDescription
classNamestringTailwind classes on the wrapper.
width / heightnumberLogical size in CSS px (canvas games scale via DPR).
pausedbooleanExternally pause the game.
autoFocusbooleanFocus on mount. Defaults to true.
captureGlobalKeysbooleanListen for keys on window so the game works without being focused first. Defaults to true — set false when several games share a page, or the game sits in scrollable content, so it only responds while focused.
persistHighScoreboolean | stringlocalStorage key, or a default per game.
onScoreChange(score: number) => voidFires when the score changes.
onGameOver(r: { score: number; won: boolean }) => voidFires on game over.

🗂️ Repository layout

apps/web                  Next.js 16 marketing + docs site; serves /r/*.json
packages/registry         The game sources (one self-contained file each)
packages/game-core        Shared contract types + reference hooks (zero runtime)
packages/ui               shadcn primitives used by the site
scripts/build-registry.ts Emits apps/web/public/r/*.json from the game sources

🛠️ Development

bun install
bun run dev            # builds the registry, then starts the site on :3001

Other scripts:

bun run build          # registry build + next build
bun run check-types    # typecheck every workspace
cd packages/registry && bun smoke.tsx   # render smoke test for every game

🤝 Contributing

Contributions are welcome! See CONTRIBUTING.md for the "add a new game" guide — the engine/wrapper template, the shared props contract, the theme-token mapping, and the size budget. Please also review our Code of Conduct.

Found a bug or have an idea? Open an issue.

⚠️ Disclaimer

GameKit UI is an independent, unaffiliated community project. It is not built, sponsored, or endorsed by the shadcn/ui team. It uses the shadcn registry system. The shadcn- prefix is reserved for official projects, which is why this project is named gamekitui (not shadcn-games).

📄 License

MIT © GameKit UI contributors

Built with ❤️ for the shadcn community.

Read the rest on GitHub →

Browse every shadcn registry we track →