https://github.com/dancamma/react-chess-tools
A set of React components for building chess apps.
https://github.com/dancamma/react-chess-tools
chess chessjs javascript npm react typescript
Last synced: 4 months ago
JSON representation
A set of React components for building chess apps.
- Host: GitHub
- URL: https://github.com/dancamma/react-chess-tools
- Owner: dancamma
- License: mit
- Created: 2023-07-31T10:56:13.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2026-03-07T20:11:45.000Z (4 months ago)
- Last Synced: 2026-03-07T20:24:19.449Z (4 months ago)
- Topics: chess, chessjs, javascript, npm, react, typescript
- Language: TypeScript
- Homepage: https://react-chess-tools.vercel.app
- Size: 1.62 MB
- Stars: 7
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Agents: AGENTS.md
Awesome Lists containing this project
README
react-chess-tools
A set of React components for building chess apps
[](https://www.npmjs.com/package/@react-chess-tools/react-chess-game)
[](https://opensource.org/licenses/MIT)
[](https://www.typescriptlang.org/)
[](https://react.dev/)
## Overview
**react-chess-tools** is a monorepo containing React components for building chess applications. Built on top of React 19, [react-chessboard](https://github.com/Clariity/react-chessboard) v5, and [chess.js](https://github.com/jhlywa/chess.js), it provides ready-to-use, customizable components for boards, puzzles, clocks, engine analysis, and browser-based bots.
## Packages
| Package | Description | Version |
| ------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [@react-chess-tools/react-chess-game](packages/react-chess-game/README.md) | A chess game component with sounds, move highlighting, and keyboard controls | [](https://www.npmjs.com/package/@react-chess-tools/react-chess-game) |
| [@react-chess-tools/react-chess-puzzle](packages/react-chess-puzzle/README.md) | A chess puzzle component for creating interactive puzzle experiences | [](https://www.npmjs.com/package/@react-chess-tools/react-chess-puzzle) |
| [@react-chess-tools/react-chess-clock](packages/react-chess-clock/README.md) | A standalone chess clock component with multiple timing methods | [](https://www.npmjs.com/package/@react-chess-tools/react-chess-clock) |
| [@react-chess-tools/react-chess-stockfish](packages/react-chess-stockfish/README.md) | Stockfish engine integration with evaluation bar and PV lines | [](https://www.npmjs.com/package/@react-chess-tools/react-chess-stockfish) |
| [@react-chess-tools/react-chess-bot](packages/react-chess-bot/README.md) | Logical CPU players for `react-chess-game` powered by worker-based engines | [](https://www.npmjs.com/package/@react-chess-tools/react-chess-bot) |
## Features
- **Easy to Use** - Simple API with sensible defaults, get started in minutes
- **Composition Pattern** - Compound component pattern (similar to Radix UI) for maximum flexibility
- **asChild Support** - Render components as custom elements using the Slot pattern
- **Ref Forwarding** - Programmatic access to component DOM nodes
- **Full HTML Attribute Support** - Apply className, style, id, data-_, and aria-_ attributes
- **Full-Featured** - Built-in sounds, move highlighting, keyboard controls, and more
- **Browser Bots** - Add configurable CPU players backed by Stockfish or Fairy-Stockfish workers
- **TypeScript** - Full TypeScript support with comprehensive type definitions
- **Modern React** - Built for React 19 with hooks and context API
## Styling
All components accept standard HTML attributes, making them easy to style with any CSS approach:
### Tailwind CSS
```tsx
import { ChessGame } from "@react-chess-tools/react-chess-game";
function App() {
return (
);
}
```
### CSS Modules / Plain CSS
```tsx
import { ChessGame } from "@react-chess-tools/react-chess-game";
import styles from "./ChessBoard.module.css";
function App() {
return (
);
}
```
### Inline Styles
```tsx
```
### Data Attributes
Components expose data attributes for CSS selectors:
```css
[data-clock-active="true"] {
border-color: gold;
box-shadow: 0 0 10px gold;
}
```
## Quick Start
### Chess Game
```bash
npm install @react-chess-tools/react-chess-game
```
```tsx
import { ChessGame } from "@react-chess-tools/react-chess-game";
function App() {
return (
);
}
```
### Chess Puzzle
```bash
npm install @react-chess-tools/react-chess-game @react-chess-tools/react-chess-puzzle
```
```tsx
import { ChessPuzzle } from "@react-chess-tools/react-chess-puzzle";
function App() {
const puzzle = {
fen: "r1bqkbnr/pppp1ppp/2n5/4p3/4P3/5N2/PPPP1PPP/RNBQKB1R w KQkq - 2 3",
moves: ["d2d4", "e5d4", "f3d4"],
makeFirstMove: false,
};
return (
Restart
Get Hint
);
}
```
### Chess Clock
```bash
npm install @react-chess-tools/react-chess-clock
```
```tsx
import { ChessClock } from "@react-chess-tools/react-chess-clock";
function App() {
return (
Reset
);
}
```
### Chess Stockfish
```bash
npm install @react-chess-tools/react-chess-stockfish
```
```tsx
import { ChessStockfish } from "@react-chess-tools/react-chess-stockfish";
function App() {
return (
);
}
```
### Chess Bot
```bash
npm install @react-chess-tools/react-chess-game @react-chess-tools/react-chess-stockfish @react-chess-tools/react-chess-bot
```
```tsx
import { ChessBot } from "@react-chess-tools/react-chess-bot";
import { ChessGame } from "@react-chess-tools/react-chess-game";
function App() {
return (
);
}
```
`react-chess-bot` depends on `@react-chess-tools/react-chess-stockfish` for its worker-backed engine integration. It does not bundle an engine worker. Provide your own Stockfish-compatible worker file, and use `engineType: "fairy-stockfish"` for levels `1-3`.
## Demo
Visit the [Storybook demo](https://react-chess-tools.vercel.app/) to see the packages in action.
## Development
This project uses npm workspaces. To get started:
```bash
# Install dependencies
npm install
# Build all packages
npm run build
# Run Storybook for development
npm run storybook
# Run tests
npm test
```
## Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
## License
This project is [MIT](https://opensource.org/licenses/MIT) licensed.
## Show Your Support
Give a star if this project helped you!