React chess component with chessground, chess.js and tailwind integration
npm install @mdwebb/react-chessA React chess component powered by chessground, chess.js, and styled with Tailwind CSS.
- 🎮 Full chess game functionality
- 📝 Move history with navigation
- 🎯 Legal move validation
- 📋 PGN support
- ⚡ Written in TypeScript
- 🎨 Customizable styling with Tailwind CSS
- 💅 Built-in class name customization


``bash`
npm install @mdwebb/react-chess
First, import the required CSS and ensure Tailwind CSS is configured in your project:
`typescript`
import "@mdwebb/react-chess/dist/assets/chessground.base.css";
import "@mdwebb/react-chess/dist/assets/chessground.brown.css";
import "@mdwebb/react-chess/dist/assets/chessground.cburnett.css";
`tsx
import { Chessboard } from "@mdwebb/react-chess";
function App() {
return (
height={400}
className="rounded-lg shadow-md" // Custom Tailwind classes
/>
);
}
`
`tsxMoved from ${from} to ${to}
function App() {
return (
className="bg-white rounded-xl shadow-lg"
showMoveHistory={true}
showNavigation={true}
onMove={(from, to) => {
console.log();`
}}
/>
);
}
`tsx
function App() {
const pgn = "1. e4 e5 2. Nf3 Nc6 3. Bb5 a6";
return (
className="bg-gray-50 p-4 rounded-lg"
theme="blue"
showMoveHistory={true}
showNavigation={true}
onPositionChange={(fen, moves) => {
console.log("Current FEN:", fen);
console.log("Move history:", moves);
}}
/>
);
}
`
`tsx
import { useRef } from "react";
import { Chessboard, ChessboardRef } from "@mdwebb/react-chess";
function App() {
const boardRef = useRef
const handleClick = () => {
// Access the chess.js instance
const fen = boardRef.current?.game?.fen();
console.log("Current FEN:", fen);
// Access the chessground API
const api = boardRef.current?.api;
// Use api methods...
};
return (
Props
| Prop | Type | Default | Description |
| ------------------ | -------------------------------------- | ----------- | ------------------------------------------------------------------------------ |
|
width | string \| number | '400px' | Width of the chess board |
| height | string \| number | '400px' | Height of the chess board |
| className | string | undefined | Custom Tailwind classes for the container |
| theme | string | 'brown' | "blue", "green", "gray, "brown" |
| fen | string | 'start' | FEN string representing the board position. Use 'start' for initial position |
| orientation | 'white' \| 'black' | 'white' | Which side of the board to show at the bottom |
| onMove | (from: string, to: string) => void | undefined | Callback fired when a piece is moved |
| pgn | string | undefined | PGN notation to load a complete game |
| showMoveHistory | boolean | false | Whether to show the move history panel |
| showNavigation | boolean | false | Whether to show navigation controls |
| onPositionChange | (fen: string, moves: Move[]) => void | undefined | Callback fired when the board position changes |The component also accepts all standard HTML div attributes and chessground configuration options.
Styling
The component is built with Tailwind CSS and supports customization through className props. Common styling options include:
`tsx
// Basic styling
// With padding and border
// Dark theme
`Ref Methods
The component exposes certain functionality through a ref:
`typescript
interface ChessboardRef {
api: Api | null; // Chessground API for direct board manipulation
game: Chess | null; // chess.js instance for game logic
}
``MIT © Matt Webb