react-chessboard-ui ♟️

A lightweight and customizable React chessboard component built with modern UI in mind. Easily integrate chess functionality into your React apps with FEN support, game-end detection, and position handling.

📘 Full documentation: https://react-chessboard-ui.dev/

🚀 Features

• 🎯 Fully controlled via FEN strings
• ♻️ React functional component with hooks support
• 🎨 Customizable styles (via CSS or override)
• ♟️ Game-end and move-change callbacks
• 🧩 Easy integration into any React project

📦 Installation

Install via npm:

npm install react-chessboard-ui

Or using yarn:

yarn add react-chessboard-ui

💡 Usage Example

import React from 'react';
import { ChessBoard } from 'react-chessboard-ui';
import 'react-chessboard-ui/dist/index.css'; // Required CSS

export const App = () => {
  return (
    <div>
      <ChessBoard
        FEN="rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1"
        onChange={handleChangePosition}
        onEndGame={handleEndGame}
      />
    </div>
  );
};

Full customizable

📘 Documentation for customization: https://react-chessboard-ui.dev/properties/config/

👥 Authors

Created by:

• Tatiana Utbanova - Design owner
• Alexander Utbanov - Code owner

📄 License

MIT © react-chessboard-ui

🧠 Keywords (for discoverability)

react chess chessboard react-chess chess ui react chess component fen chess game react board game