// component.boot// react.chess.runtime
v2.0.4 // compound + themes
react_chess
A feature-rich, fully-typed chess board component for React.
MOVES000
LAST—
TURNWHITE
STATEOK
engine_readybuild // v2.0.4
//01install
Quick start
Render a fully-featured chess board in seconds.
terminalpnpm · npm · yarn
$ pnpm add @mdwebb/react-chessapp.tsx
import { Chessboard } from "@mdwebb/react-chess";
import "@mdwebb/react-chess/styles";
function App() {
return (
<Chessboard
width={500}
height={500}
theme="brown"
showMoveHistory={true}
showNavigation={true}
onMove={(from, to, move) => {
console.log(move.san);
}}
/>
);
}//02capabilities
Every feature, batteries-included
Eight headline capabilities; zero configuration required to start.
01
custom_themes
4 presets or build your own with live pickers.
02
pgn_support
Annotations, NAG symbols, comments, metadata.
03
compound_api
Compose Board, MoveHistory, Navigation.
04
promotion_ui
Visual piece selection dialog.
05
keyboard_nav
Arrow keys to step through moves.
06
callbacks
onCheck, onGameOver, onIllegalMove, more.
07
board_flip
Toggle via button, prop, or ref.
08
typescript
Every prop, callback, and ref strongly typed.
//03interactive
Explore the demos
Every demo is a fully-working playground built with the public API.
DEMO // 01RUN
./basic
Drag, flip, coordinates, layouts.
liveopen →
DEMO // 02RUN
./pgn_viewer
Famous games with annotations.
liveopen →
DEMO // 03RUN
./theme_customizer
Live color pickers.
liveopen →
DEMO // 04RUN
./compound
Custom component layouts.
liveopen →
DEMO // 05RUN
./callbacks
Real-time event logging.
liveopen →
versionv2.0.4
types100%
enginechess.js
renderchessground