2048 Game React component
A fully playable 2048, arrow-key and swipe controls, spring-animated tile merges, score and best-score tracking, and win/game-over overlays.
About the 2048 Game component
2048 Game is the sliding-number puzzle on a 4 by 4 board. Every move slides all tiles to one side, two equal tiles merge into their sum, and a new 2 (or sometimes a 4) appears in an empty cell. Reaching 2048 shows a win screen with a Keep Going option, and the game ends when no move is left.
Tiles move with the arrow keys or W, A, S and D once the board has focus, and with a swipe on touch screens. The score and the best score sit above the board, and the best score is saved in localStorage so it survives a reload. theme picks one of four looks (classic, neon, gold, night), each with its own title, and lightMode switches to a light background. It can also open as a popup from a pill button.
When to use it
Use it to keep people on a page a little longer: a 404 or maintenance page, a waiting screen, a fun corner of a portfolio or a campaign site.
For a quicker game that ends in a reward, use Spin to Win Wheel. For another classic puzzle, use Minesweeper Game.
Installation
Add the 2048 Game component to your project with the shadcn CLI. It lands in components/2048-game.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/2048-gameOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<Game2048 /> accepts 9 props, all optional. It also accepts the usual <div> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| theme | "classic" | "neon" | "gold" | "night" | "classic" |
| lightMode | boolean | false |
| accentColor | string | "#ffffff" |
| asPopup | boolean | false |
| trigger | "manual" | "delay" | "scroll" | "manual" |
| delaySeconds | number | 4 |
| widgetPosition | "bottom-right" | "bottom-left" | "bottom-right" |
| widgetIcon | string | — |
| storageKey | string | "" |
- theme"classic" | "neon" | "gold" | "night"Default: "classic"
- lightModebooleanDefault: false
- accentColorstringDefault: "#ffffff"
- asPopupbooleanDefault: false
- trigger"manual" | "delay" | "scroll"Default: "manual"
- delaySecondsnumberDefault: 4
- widgetPosition"bottom-right" | "bottom-left"Default: "bottom-right"
- widgetIconstring
- storageKeystringDefault: ""
Collections
Use-case pages that compare 2048 Game with the other components that do a similar job.
npm dependencies
Installed for you by the shadcn CLI.
2048 Game FAQ
- Why don't the arrow keys move the tiles?
- The board listens for keys only while it has focus, so the arrow keys still scroll the page when you are not playing. Click or tap the game once, or tab to it, and the keys start working. In a popup the board is focused for you.
- Where is the best score saved?
- In localStorage under 2048-best. If you put more than one board on the same site, give each a storageKey so they keep separate best scores.
- How does swiping work?
- A drag of at least 30px in any direction counts as a move in that direction. The board sets touch-action: none, so a swipe moves the tiles instead of scrolling the page.
- What happens after reaching 2048?
- A win screen appears with Keep Going and Try Again. Keep Going lets you carry on toward 4096 and beyond, and the win screen does not show again in that game.
