Tic Tac Toe Game React component
A playable Tic Tac Toe board with a built-in AI opponent, animated piece placement, a drawn winning-line reveal, score tracking, and a confetti burst on a win.
About the Tic Tac Toe Game component
Tic Tac Toe Game is a playable noughts and crosses board. You play Circle and move first, and a computer opponent answers as Cross after a short pause. The marks spring in, a line is drawn through the winning row, confetti falls at the end of each game, and a scoreboard keeps count of wins for each side and ties until the page is reloaded.
Set enableAI={false} to make it a two-player game on one screen, taking turns. circleColor and crossColor set the two marks, and boardColor and squareColor the grid. It can sit inline on the page, or as a "Mini Game" pill button that opens the board in a popup, either on click or automatically after a delay or on scroll.
When to use it
Use it as a small playful extra on a portfolio, an agency site, a 404 page or a waiting screen, or as an engagement widget that visitors can open from a button.
For a game that rewards the visitor with a discount code, use Spin to Win Wheel or Dice Roll Discount Popup.
Installation
Add the Tic Tac Toe Game component to your project with the shadcn CLI. It lands in components/tic-tac-toe-game.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/tic-tac-toe-gameOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<TicTacToeGame /> accepts 12 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 |
|---|---|---|
| circleColor | string | "#FF665C" |
| crossColor | string | "#EC0B8E" |
| boardColor | string | "#e0e0e0" |
| squareColor | string | "#ffffff" |
| enableAI | boolean | true |
| aiDifficulty | "easy" | "medium" | "hard" | "medium" |
| asPopup | boolean | false |
| trigger | "manual" | "delay" | "scroll" | "manual" |
| delaySeconds | number | 4 |
| widgetPosition | "bottom-right" | "bottom-left" | "bottom-right" |
| widgetIcon | string | — |
| title | string | "Tic Tac Toe" |
- circleColorstringDefault: "#FF665C"
- crossColorstringDefault: "#EC0B8E"
- boardColorstringDefault: "#e0e0e0"
- squareColorstringDefault: "#ffffff"
- enableAIbooleanDefault: true
- aiDifficulty"easy" | "medium" | "hard"Default: "medium"
- asPopupbooleanDefault: false
- trigger"manual" | "delay" | "scroll"Default: "manual"
- delaySecondsnumberDefault: 4
- widgetPosition"bottom-right" | "bottom-left"Default: "bottom-right"
- widgetIconstring
- titlestringDefault: "Tic Tac Toe"
Collections
Use-case pages that compare Tic Tac Toe Game with the other components that do a similar job.
npm dependencies
Installed for you by the shadcn CLI.
Tic Tac Toe Game FAQ
- How hard is the computer to beat?
- It depends on aiDifficulty. On medium (the default) it takes a winning square if it has one, otherwise blocks yours, then takes the center and then a corner, so it can still be beaten. easy plays a random square instead of a corner. hard searches every possible line of play and never loses, so the best you can get is a tie.
- Can two people play against each other?
- Yes. Set enableAI={false} and the turns alternate between Circle and Cross on the same board.
- Can the popup open on its own?
- Yes. With asPopup, trigger="delay" opens it after delaySeconds (4 by default), and trigger="scroll" opens it once, when 40% of the component scrolls into view. It closes with the close button, a backdrop click or Escape.
- Does it fit on a phone?
- The board is a fixed 330px square, so it fits phones from about 370px wide. On a narrower screen, scale the component down or show it on larger screens only.
- Can it be played with the keyboard?
- No. The squares respond to clicks and taps only. The New Game, open and close buttons are real buttons and work with the keyboard.
