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://chessboardui.space/

---

🚀 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:

1npm install react-chessboard-ui

Or using yarn:

1yarn add react-chessboard-ui

---

💡 Usage Example

1import React from 'react';
2import { ChessBoard } from 'react-chessboard-ui';
3import 'react-chessboard-ui/dist/index.css'; // Required CSS
4
5export const App = () => {
6  return (
7    <div>
8      <ChessBoard 
9        FEN="rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1"
10        onChange={handleChangePosition}
11        onEndGame={handleEndGame}
12      />
13    </div>
14  );
15};

Full customizable

📘 Documentation for customization: https://chessboardui.space/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