12 gamesshadcn registryzero deps 6KB gzipped

Drop-in arcade for your shadcn app.

Tiny, themeable React games for your 404s, empty states, and landing-page easter eggs. Install with the shadcn CLI — no provider, no peer deps, no init step.

$ npx shadcn@latest add @gamekitui/snake
Theme it live
GAMEKIT // DINO RUNNER
Loading…
Recolor it — hit a swatch and the playfield repaints live.
Why GameKit

Small enough to forget. Fun enough to ship.

01

Minimal

A single drop-in file — 2–4 KB minified + gzipped, zero npm dependencies. Lazy-load it and it stays out of your initial bundle.

02

Themeable

Reads your shadcn tokens at runtime. Change --primary and the playfield recolors.

03

Zero assets

No images, audio, or fonts. Every pixel is drawn with CSS or <canvas>.

04

Accessible

Keyboard + touch, focus rings, aria-live, and reduced-motion in every game.

Play it now

Try a few, right in the browser.

No install needed — these are the real components, themed live. Recolor them with a swatch above and watch them follow.

GAMEKIT // Flappy
Loading…
Install Flappy
GAMEKIT // Breakout
Loading…
Install Breakout
GAMEKIT // Tic-Tac-Toe
Loading…
Install Tic-Tac-Toe
The lineup · 12 classics

Twelve classics, themed to your app.

Canvas or DOM, all 2–4 KB gzipped. Install one, or grab the whole cabinet.

Quickstart · 30 seconds
  1. 1

    Run the CLI

    Point the shadcn CLI at any game's registry URL. It drops one file into your project.

  2. 2

    Import & render

    No provider, no init. Render the component anywhere — it inherits your theme tokens.

  3. 3

    Ship the easter egg

    Drop it on a 404, an empty state, or a loading screen. It just works.

app/not-found.tsx
// 1 — install
$ npx shadcn@latest add @gamekitui/snake

// 2 — use it
import { Snake } from "@/components/games/snake"

export default function NotFound() {
  return (
    <main className="grid place-items-center">
      <Snake />   {/* inherits --primary */}
    </main>
  )
}

Give your 404 a high score.

Insert coin to continue