Skip to component
Modulo

2048

2048 with grayscale tiles, animated score meters, and merge sounds.

View fullView source

Preview

2048

Score0
Best0
2

Installation

bunx shadcn@latest add @modulo/2048

Requires an active Modulo key and a project configured for shadcn.

Registry setup

Set MODULO_REGISTRY_KEY to your key. Add this registry entry to components.json.

{
  "registries": {
    "@modulo": {
      "url": "<registry-url>/r/{name}.json",
      "headers": {
        "Authorization": "Bearer ${MODULO_REGISTRY_KEY}"
      }
    }
  }
}

Usage

import { Game2048 } from "@/components/2048/Game2048";

export default function Example() {
  return <Game2048 volume={0.75} />;
}

React, Rune Icons, and Web Audio. All six source files install together. No game or animation package required.

Registry JSONDownload thumbnailDownload preview GIFDownload preview video

Interaction

Use arrow keys or WASD without selecting the board. Swipe anywhere in the game on touch screens. Moves start as soon as the swipe direction is clear. Equal tiles merge once per move. Press U or use Undo to take back the last move. Reach 2048, then keep playing.

Score counts merged values. Best keeps your local record. The segmented meter tracks the highest tile toward 2048. Your board and last move save in this browser.

Sound starts after interaction. Use the game control or header sound toggle to mute. Reduced motion updates tiles, numbers, meters and panels instantly. Hidden tabs stop sound.

Visual direction from Aryan's chess game.

API

PropTypeDefault
seedRepeatable tile spawns for a new game.numberOptional
initialBoardSixteen zeros or powers of two. Saved state takes precedence.readonly number[]Optional
initialScoreStarting score when initialBoard is supplied.number0
storageKeyLocal save and sound preference key. Null disables storage.string | null"2048-game-v1"
enableAudioAllow game sounds after a gesture. False stops all voices.booleantrue
volumeMaster volume from 0 to 1.number0.75
classNameClass names for the game container.string""
onReadyController on mount, null on cleanup. Keep callbacks stable.(controller | null) => voidOptional
onChangeBoard, score, best, progress, undo, and sound state. Keep callbacks stable.(GameSnapshot) => voidOptional
Controller methods

move(direction) accepts left, right, up, or down. undo() restores one move. reset() starts a new game while preserving the best score.

snapshot() reports the board, score, best, highest tile, game status, undo availability, and audio state. setAudio(enabled, volume) controls sound. unlockAudio() unlocks it from an external gesture. The component calls destroy() on unmount.

Source

Checking source access...