Chess boardPro
A calm board for a game played in the thread, with the assistant's suggestion drawn as an arrow and one button to play it.
On this page
Installation
Usage
import { ChessBoard } from "@/components/ui/chatcn/pro/chess-board"
<ChessBoard
title="Club game with Odile"
meta={["You play white"]}
moves={moves}
onMove={({ moves }) => setMoves(moves)}
player="white"
suggestion="g1f3"
/>The board knows the rules a widget needs and nothing more: legal moves with castling, en passant and promotion, no moving into check, check, mate and stalemate, and standard notation. It has no engine; suggestion comes from your app or model, in UCI, and is drawn as an ink arrow (an L for a knight) with a Play button in the footer.
moves is the game in UCI from fen (the standard start by default). Pick up a piece and its moves show as dots, captures as rings; the last move stays tinted and a king in check is tinted red. A pawn reaching the last rank opens a small picker over its file. player limits which side the viewer may move; none makes it read only.
The move list steps back through the game with the arrows or a click; the board shows that position read only until you go back to the game. The flip button turns the board. Pieces are drawn for the kit and follow the theme: white stays the light side in dark mode. Render it inside the card your host draws for a widget answer. It fills the width it is given, so a comfortable max width (around 28 rem) comes from the card, and it follows the host theme through the kit tokens. Pass onExpand where the host can go full screen.
Examples
States
Props
| Prop | Type | Notes |
|---|---|---|
title, meta | ReactNode, ReactNode[] | The header |
fen | string | Starting position. Default the standard start |
moves, defaultMoves | string[] | UCI, like e2e4 or e7e8q |
onMove | ({ uci, san, moves }) => void | A legal move made on the board |
orientation | "white" | "black" | The side at the bottom |
player | "white" | "black" | "both" | "none" | Who may move. Default both |
suggestion | string | A move in UCI, drawn as an arrow |
loading, error, disabled | boolean | |
onRetry, onExpand | () => void | |
labels | Partial<…Labels> | Every string the widget writes, for translation |
Labels
labels covers the board and square names, pieceName(color, type), the status lines (toMove, your move, check, checkmate(winner), stalemate), play(san) and suggested(san), flip, the list controls and viewing(move), the promotion picker and the error copy.
Keyboard
| Key | Action |
|---|---|
| Arrow keys on the board | Move between squares |
| Enter or Space | Pick up the piece, or play it to this square |
| Escape | Put the piece down |
| Home, End | First or last file of the rank |
Accessibility
- The board is a grid; each square is named with its coordinate and piece (e4, white pawn) and one square holds the tab stop.
- The status line is a live region: check, mate and whose move it is are said in words.
- The suggestion arrow is an image named with the move; the Play button repeats it in notation.
- Moves made from the keyboard land without animation.
Motion
A move glides the piece to its square in 200 ms. A new suggestion's arrow draws from its tail in 240 ms. Keyboard moves and the flip land at once. Reduced motion drops the glide and the drawing.