{"id":34626358,"url":"https://github.com/dancamma/react-chess-tools","last_synced_at":"2026-03-10T20:20:33.170Z","repository":{"id":185024395,"uuid":"672868949","full_name":"dancamma/react-chess-tools","owner":"dancamma","description":"A set of React components for building chess apps.","archived":false,"fork":false,"pushed_at":"2026-03-07T20:11:45.000Z","size":1701,"stargazers_count":7,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-03-07T20:24:19.449Z","etag":null,"topics":["chess","chessjs","javascript","npm","react","typescript"],"latest_commit_sha":null,"homepage":"https://react-chess-tools.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dancamma.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":"AGENTS.md","dco":null,"cla":null}},"created_at":"2023-07-31T10:56:13.000Z","updated_at":"2026-03-07T20:10:45.000Z","dependencies_parsed_at":"2026-03-07T16:11:45.608Z","dependency_job_id":null,"html_url":"https://github.com/dancamma/react-chess-tools","commit_stats":null,"previous_names":["dancamma/react-chess-tools"],"tags_count":33,"template":false,"template_full_name":null,"purl":"pkg:github/dancamma/react-chess-tools","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dancamma%2Freact-chess-tools","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dancamma%2Freact-chess-tools/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dancamma%2Freact-chess-tools/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dancamma%2Freact-chess-tools/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dancamma","download_url":"https://codeload.github.com/dancamma/react-chess-tools/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dancamma%2Freact-chess-tools/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30233432,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-07T19:01:10.287Z","status":"ssl_error","status_checked_at":"2026-03-07T18:59:58.103Z","response_time":53,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chess","chessjs","javascript","npm","react","typescript"],"created_at":"2025-12-24T15:56:31.211Z","updated_at":"2026-03-10T20:20:33.148Z","avatar_url":"https://github.com/dancamma.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003ch1\u003ereact-chess-tools\u003c/h1\u003e\n  \u003cp\u003eA set of React components for building chess apps\u003c/p\u003e\n\n[![npm version](https://img.shields.io/npm/v/@react-chess-tools/react-chess-game.svg)](https://www.npmjs.com/package/@react-chess-tools/react-chess-game)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![TypeScript](https://img.shields.io/badge/TypeScript-5.x-blue.svg)](https://www.typescriptlang.org/)\n[![React](https://img.shields.io/badge/React-19-61dafb.svg)](https://react.dev/)\n\n\u003c/div\u003e\n\n## Overview\n\n**react-chess-tools** is a monorepo containing React components for building chess applications. Built on top of React 19, [react-chessboard](https://github.com/Clariity/react-chessboard) v5, and [chess.js](https://github.com/jhlywa/chess.js), it provides ready-to-use, customizable components for boards, puzzles, clocks, engine analysis, and browser-based bots.\n\n## Packages\n\n| Package                                                                              | Description                                                                  | Version                                                                                                                                                     |\n| ------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| [@react-chess-tools/react-chess-game](packages/react-chess-game/README.md)           | A chess game component with sounds, move highlighting, and keyboard controls | [![npm](https://img.shields.io/npm/v/@react-chess-tools/react-chess-game.svg)](https://www.npmjs.com/package/@react-chess-tools/react-chess-game)           |\n| [@react-chess-tools/react-chess-puzzle](packages/react-chess-puzzle/README.md)       | A chess puzzle component for creating interactive puzzle experiences         | [![npm](https://img.shields.io/npm/v/@react-chess-tools/react-chess-puzzle.svg)](https://www.npmjs.com/package/@react-chess-tools/react-chess-puzzle)       |\n| [@react-chess-tools/react-chess-clock](packages/react-chess-clock/README.md)         | A standalone chess clock component with multiple timing methods              | [![npm](https://img.shields.io/npm/v/@react-chess-tools/react-chess-clock.svg)](https://www.npmjs.com/package/@react-chess-tools/react-chess-clock)         |\n| [@react-chess-tools/react-chess-stockfish](packages/react-chess-stockfish/README.md) | Stockfish engine integration with evaluation bar and PV lines                | [![npm](https://img.shields.io/npm/v/@react-chess-tools/react-chess-stockfish.svg)](https://www.npmjs.com/package/@react-chess-tools/react-chess-stockfish) |\n| [@react-chess-tools/react-chess-bot](packages/react-chess-bot/README.md)             | Logical CPU players for `react-chess-game` powered by worker-based engines   | [![npm](https://img.shields.io/npm/v/@react-chess-tools/react-chess-bot.svg)](https://www.npmjs.com/package/@react-chess-tools/react-chess-bot)             |\n\n## Features\n\n- **Easy to Use** - Simple API with sensible defaults, get started in minutes\n- **Composition Pattern** - Compound component pattern (similar to Radix UI) for maximum flexibility\n- **asChild Support** - Render components as custom elements using the Slot pattern\n- **Ref Forwarding** - Programmatic access to component DOM nodes\n- **Full HTML Attribute Support** - Apply className, style, id, data-_, and aria-_ attributes\n- **Full-Featured** - Built-in sounds, move highlighting, keyboard controls, and more\n- **Browser Bots** - Add configurable CPU players backed by Stockfish or Fairy-Stockfish workers\n- **TypeScript** - Full TypeScript support with comprehensive type definitions\n- **Modern React** - Built for React 19 with hooks and context API\n\n## Styling\n\nAll components accept standard HTML attributes, making them easy to style with any CSS approach:\n\n### Tailwind CSS\n\n```tsx\nimport { ChessGame } from \"@react-chess-tools/react-chess-game\";\n\nfunction App() {\n  return (\n    \u003cChessGame.Root\u003e\n      \u003cChessGame.Board className=\"rounded-lg shadow-xl border-2 border-gray-300\" /\u003e\n    \u003c/ChessGame.Root\u003e\n  );\n}\n```\n\n### CSS Modules / Plain CSS\n\n```tsx\nimport { ChessGame } from \"@react-chess-tools/react-chess-game\";\nimport styles from \"./ChessBoard.module.css\";\n\nfunction App() {\n  return (\n    \u003cChessGame.Root\u003e\n      \u003cChessGame.Board className={styles.board} /\u003e\n    \u003c/ChessGame.Root\u003e\n  );\n}\n```\n\n### Inline Styles\n\n```tsx\n\u003cChessGame.Board\n  style={{ borderRadius: \"8px\", boxShadow: \"0 4px 6px rgba(0,0,0,0.1)\" }}\n/\u003e\n```\n\n### Data Attributes\n\nComponents expose data attributes for CSS selectors:\n\n```css\n[data-clock-active=\"true\"] {\n  border-color: gold;\n  box-shadow: 0 0 10px gold;\n}\n```\n\n## Quick Start\n\n### Chess Game\n\n```bash\nnpm install @react-chess-tools/react-chess-game\n```\n\n```tsx\nimport { ChessGame } from \"@react-chess-tools/react-chess-game\";\n\nfunction App() {\n  return (\n    \u003cChessGame.Root\u003e\n      \u003cChessGame.Board /\u003e\n      \u003cChessGame.Sounds /\u003e\n      \u003cChessGame.KeyboardControls /\u003e\n    \u003c/ChessGame.Root\u003e\n  );\n}\n```\n\n### Chess Puzzle\n\n```bash\nnpm install @react-chess-tools/react-chess-game @react-chess-tools/react-chess-puzzle\n```\n\n```tsx\nimport { ChessPuzzle } from \"@react-chess-tools/react-chess-puzzle\";\n\nfunction App() {\n  const puzzle = {\n    fen: \"r1bqkbnr/pppp1ppp/2n5/4p3/4P3/5N2/PPPP1PPP/RNBQKB1R w KQkq - 2 3\",\n    moves: [\"d2d4\", \"e5d4\", \"f3d4\"],\n    makeFirstMove: false,\n  };\n\n  return (\n    \u003cChessPuzzle.Root puzzle={puzzle}\u003e\n      \u003cChessPuzzle.Board /\u003e\n      \u003cChessPuzzle.Reset\u003eRestart\u003c/ChessPuzzle.Reset\u003e\n      \u003cChessPuzzle.Hint\u003eGet Hint\u003c/ChessPuzzle.Hint\u003e\n    \u003c/ChessPuzzle.Root\u003e\n  );\n}\n```\n\n### Chess Clock\n\n```bash\nnpm install @react-chess-tools/react-chess-clock\n```\n\n```tsx\nimport { ChessClock } from \"@react-chess-tools/react-chess-clock\";\n\nfunction App() {\n  return (\n    \u003cChessClock.Root timeControl={{ time: \"5+3\" }}\u003e\n      \u003cChessClock.Display color=\"white\" /\u003e\n      \u003cChessClock.Display color=\"black\" /\u003e\n      \u003cChessClock.PlayPause /\u003e\n      \u003cChessClock.Reset\u003eReset\u003c/ChessClock.Reset\u003e\n    \u003c/ChessClock.Root\u003e\n  );\n}\n```\n\n### Chess Stockfish\n\n```bash\nnpm install @react-chess-tools/react-chess-stockfish\n```\n\n```tsx\nimport { ChessStockfish } from \"@react-chess-tools/react-chess-stockfish\";\n\nfunction App() {\n  return (\n    \u003cChessStockfish.Root\n      fen=\"rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1\"\n      workerOptions={{ workerPath: \"/stockfish.js\" }}\n    \u003e\n      \u003cChessStockfish.EvaluationBar showEvaluation /\u003e\n      \u003cChessStockfish.EngineLines maxLines={3} /\u003e\n    \u003c/ChessStockfish.Root\u003e\n  );\n}\n```\n\n### Chess Bot\n\n```bash\nnpm install @react-chess-tools/react-chess-game @react-chess-tools/react-chess-stockfish @react-chess-tools/react-chess-bot\n```\n\n```tsx\nimport { ChessBot } from \"@react-chess-tools/react-chess-bot\";\nimport { ChessGame } from \"@react-chess-tools/react-chess-game\";\n\nfunction App() {\n  return (\n    \u003cChessGame.Root fen=\"r1bqkbnr/pppp1ppp/2n5/4p3/2B1P3/5N2/PPPP1PPP/RNBQK2R b KQkq - 3 3\"\u003e\n      \u003cChessGame.Board /\u003e\n      \u003cChessBot.Player\n        color=\"b\"\n        strength={{ level: 6 }}\n        variability=\"medium\"\n        moveDelay={{ min: 250, max: 600 }}\n        workerOptions={{ workerPath: \"/stockfish.js\" }}\n      /\u003e\n    \u003c/ChessGame.Root\u003e\n  );\n}\n```\n\n`react-chess-bot` depends on `@react-chess-tools/react-chess-stockfish` for its worker-backed engine integration. It does not bundle an engine worker. Provide your own Stockfish-compatible worker file, and use `engineType: \"fairy-stockfish\"` for levels `1-3`.\n\n## Demo\n\nVisit the [Storybook demo](https://react-chess-tools.vercel.app/) to see the packages in action.\n\n## Development\n\nThis project uses npm workspaces. To get started:\n\n```bash\n# Install dependencies\nnpm install\n\n# Build all packages\nnpm run build\n\n# Run Storybook for development\nnpm run storybook\n\n# Run tests\nnpm test\n```\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n## License\n\nThis project is [MIT](https://opensource.org/licenses/MIT) licensed.\n\n## Show Your Support\n\nGive a star if this project helped you!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdancamma%2Freact-chess-tools","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdancamma%2Freact-chess-tools","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdancamma%2Freact-chess-tools/lists"}