@ankhorage/zora-chess

Chess UI components for React Native and React Native Web apps built on ZORA.

Usage

Minimal chess app root.

Use ChessBoard for the board surface and OpeningBook for binding-ready move suggestions or trainer data alongside the current position.

Source: examples/basic-chess/App.tsx

import {
  AppBar,
  AppShell,
  Screen,
  ScreenSection,
  ZoraProvider,
  type ZoraTheme,
} from '@ankhorage/zora';
import { ChessBoard, OpeningBook, type OpeningBookMove } from '@ankhorage/zora-chess';

const chessTheme: ZoraTheme = {
  id: 'basic-chess',
  name: 'Basic chess',
  appCategory: 'games',
  primaryColor: '#2563eb',
  harmony: 'analogous',
};

const openingMoves: readonly OpeningBookMove[] = [
  {
    san: 'Nf3',
    uci: 'g1f3',
    eco: 'A04',
    name: 'Reti Opening',
    games: 12400,
    whiteWinRate: 0.38,
    drawRate: 0.34,
    blackWinRate: 0.28,
  },
  {
    san: 'c4',
    uci: 'c2c4',
    eco: 'A10',
    name: 'English Opening',
    games: 9800,
    whiteWinRate: 0.37,
    drawRate: 0.35,
    blackWinRate: 0.28,
  },
];

export default function BasicChessApp() {
  return (
    <ZoraProvider initialMode="light" theme={chessTheme}>
      <AppShell header={<AppBar title="Chess" subtitle="Board and opening book UI" />}>
        <Screen>
          <ScreenSection title="Position" description="Render a FEN position with coordinates.">
            <ChessBoard
              fen="rnbqkbnr/pppppppp/8/8/8/5N2/PPPPPPPP/RNBQKB1R b KQkq - 1 1"
              selectedSquare="g1"
              legalTargets={['f3', 'h3']}
              showCoordinates
            />
          </ScreenSection>
          <ScreenSection title="Book moves" description="Present engine or database suggestions.">
            <OpeningBook moves={openingMoves} selectedMove="Nf3" />
          </ScreenSection>
        </Screen>
      </AppShell>
    </ZoraProvider>
  );
}

Generated documentation

• Interactive documentation app
• Public API reference
• Component registry
• Architecture overview
• Module relationships
• Export graph
• ChessBoard sequence
• getLegalTargets sequence
• OpeningBook sequence
• readChessPieces sequence
• tryMove sequence

Public API

Utilities

ChessBoard({
  fen,
  orientation = 'white',
  selectedSquare = null,
  legalTargets,
  lastMove = null,
  disabled = false,
  showCoordinates = false,
  validateMoves = true,
  colorScheme: colorOverrides,
  onSquarePress,
  onMoveAttempt,
  onLegalMove,
  onInvalidMove,
  renderPiece,
  testID,
}: ChessBoardProps) => React.JSX.Element

Theme-aware chessboard surface for FEN-backed positions and move attempts.

Use ChessBoard to render a position, highlight selected/legal/last-move squares, and wire square presses into trainer or game-state logic.

Interactive board

<ChessBoard
  fen="rnbqkbnr/pppppppp/8/8/8/5N2/PPPPPPPP/RNBQKB1R b KQkq - 1 1"
  selectedSquare="g1"
  legalTargets={['f3', 'h3']}
  showCoordinates
/>

Related types: ChessBoardProps

| Prop | Type | Required | Default | Description | | --------------- | ----------------------------------------------- | -------- | --------- | ----------- | | colorScheme | ChessBoardColorOverrides \| undefined | no | — | | | disabled | boolean \| undefined | no | false | | | fen | string | yes | — | | | lastMove | ChessMoveAttempt \| null \| undefined | no | null | | | legalTargets | readonly ChessSquareId[] \| undefined | no | — | | | onInvalidMove | (move: ChessMoveAttempt) => void \| undefined | no | — | | | onLegalMove | (move: ChessMoveResult) => void \| undefined | no | — | | | onMoveAttempt | (move: ChessMoveAttempt) => void \| undefined | no | — | | | onSquarePress | (square: ChessSquareId) => void \| undefined | no | — | | | orientation | ChessBoardOrientation \| undefined | no | 'white' | | | renderPiece | ChessPieceRenderer \| undefined | no | — | | | selectedSquare | ChessSquareId \| null \| undefined | no | null | | | showCoordinates | boolean \| undefined | no | false | | | testID | string \| undefined | no | — | | | validateMoves | boolean \| undefined | no | true | |

createChessBoardColorScheme(theme: ChessColorThemeShape, overrides?: Partial<ChessBoardColorScheme> | undefined) => ChessBoardColorScheme

Creates the theme-derived palette used by ChessBoard.

Use createChessBoardColorScheme when custom board overlays, piece renderers, or adjacent chess UI need to share the same square, highlight, coordinate, and piece colors as the built-in board.

Custom board colors

const colors = createChessBoardColorScheme(theme, { selectedSquare: '#fde68a' });

Module: src/colors.ts Source: src/colors.ts:41:1 Related symbols: ChessBoardColorScheme, ChessColorThemeShape

createOpeningBookColorScheme(theme: ChessColorThemeShape, overrides?: Partial<OpeningBookColorScheme> | undefined) => OpeningBookColorScheme

Creates the theme-derived palette used by OpeningBook.

Use createOpeningBookColorScheme when custom opening-list rows, badges, or trainer panels should match the built-in book surface and selected-move states.

Custom opening book colors

const colors = createOpeningBookColorScheme(theme, { selectedSurface: '#dbeafe' });

Module: src/OpeningBookColors.ts Source: src/OpeningBookColors.ts:28:1 Related symbols: ChessColorThemeShape, OpeningBookColorScheme

OpeningBook({
  moves = [],
  title = 'Opening book',
  loading = false,
  errorText,
  emptyText = 'No book moves for this position.',
  selectedMove = null,
  colorScheme: colorOverrides,
  onMovePress,
  testID,
}: OpeningBookProps) => React.JSX.Element

Binding-ready opening move list for chess trainers and analysis views.

Use OpeningBook to present suggested moves, ECO/name metadata, and simple win/draw/loss percentages next to a ChessBoard or position explorer.

Opening suggestions

<OpeningBook selectedMove="Nf3" moves={[{ san: 'Nf3', eco: 'A04', name: 'Reti Opening' }]} />

Related types: OpeningBookProps

| Prop | Type | Required | Default | Description | | ------------ | ---------------------------------------------- | -------- | ------------------------------------ | ----------- | | colorScheme | OpeningBookColorOverrides \| undefined | no | — | | | emptyText | string \| undefined | no | 'No book moves for this position.' | | | errorText | string \| undefined | no | — | | | loading | boolean \| undefined | no | false | | | moves | readonly OpeningBookMove[] \| undefined | no | [] | | | onMovePress | (move: OpeningBookMove) => void \| undefined | no | — | | | selectedMove | string \| null \| undefined | no | null | | | testID | string \| undefined | no | — | | | title | string \| undefined | no | 'Opening book' | |