// component.boot
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-chess
app.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.

versionv2.0.4
types100%
enginechess.js
renderchessground