add ghost chess rule

2025-05-31 00:44:26 +09:00 · 2025-05-31 00:44:26 +09:00 · 6e7eb8893c
commit 6e7eb8893c
parent 261cbd8270
17 changed files with 1740 additions and 119 deletions
--- a/app/globals.css
+++ b/app/globals.css
@ -1,26 +1,122 @@
@import "tailwindcss";
+@import "tw-animate-css";

-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
+@custom-variant dark (&:is(.dark *));

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
 }

-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
  }
 }
-
-body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
-}
--- a/app/page.tsx
+++ b/app/page.tsx
@ -1,103 +1,57 @@
-import Image from "next/image";
+"use client"
+
+import { useState } from "react"
+import ChessGame from "@/components/chess-game"
+import { Button } from "@/components/ui/button"
+import { GameMode } from "@/lib/chess-types"

 export default function Home() {
-  return (
-    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
-      <main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={180}
-          height={38}
-          priority
-        />
-        <ol className="list-inside list-decimal text-sm/6 text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
-          <li className="mb-2 tracking-[-.01em]">
-            Get started by editing{" "}
-            <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-[family-name:var(--font-geist-mono)] font-semibold">
-              app/page.tsx
-            </code>
-            .
-          </li>
-          <li className="tracking-[-.01em]">
-            Save and see your changes instantly.
-          </li>
-        </ol>
+  const [gameMode, setGameMode] = useState<GameMode | null>(null)

-        <div className="flex gap-4 items-center flex-col sm:flex-row">
-          <a
-            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={20}
-              height={20}
-            />
-            Deploy now
-          </a>
-          <a
-            className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Read our docs
-          </a>
+  if (gameMode === null) {
+    return (
+      <main className="flex min-h-screen flex-col items-center justify-center p-4 bg-gray-100">
+        <h1 className="text-3xl font-bold mb-6 text-center">Web Chess Game</h1>
+        <div className="flex flex-col items-center gap-4">
+          <p className="text-lg text-gray-600 mb-4">Choose your game mode:</p>
+          <div className="flex gap-4">
+            <Button 
+              onClick={() => setGameMode(GameMode.CLASSIC)}
+              className="px-8 py-4 text-lg"
+              variant="default"
+            >
+              New Game (Classic)
+            </Button>
+            <Button 
+              onClick={() => setGameMode(GameMode.GHOST)}
+              className="px-8 py-4 text-lg"
+              variant="outline"
+            >
+              New Game (Ghost)
+            </Button>
+          </div>
+          <div className="mt-4 text-sm text-gray-500 max-w-md text-center">
+            <p><strong>Classic:</strong> Traditional chess rules</p>
+            <p><strong>Ghost:</strong> Goal is to lose all your pieces. Must capture when possible!</p>
+          </div>
        </div>
      </main>
-      <footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
+    )
+  }
+
+  return (
+    <main className="flex min-h-screen flex-col items-center justify-center p-4 bg-gray-100">
+      <div className="flex items-center gap-4 mb-6">
+        <h1 className="text-3xl font-bold text-center">Web Chess Game</h1>
+        <Button 
+          onClick={() => setGameMode(null)}
+          variant="outline"
+          size="sm"
        >
-          <Image
-            aria-hidden
-            src="/file.svg"
-            alt="File icon"
-            width={16}
-            height={16}
-          />
-          Learn
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/window.svg"
-            alt="Window icon"
-            width={16}
-            height={16}
-          />
-          Examples
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/globe.svg"
-            alt="Globe icon"
-            width={16}
-            height={16}
-          />
-          Go to nextjs.org →
-        </a>
-      </footer>
-    </div>
-  );
+          Change Mode
+        </Button>
+      </div>
+      <ChessGame gameMode={gameMode} />
+    </main>
+  )
 }
--- a/components.json
+++ b/components.json
@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}
--- a/components/chess-board.tsx
+++ b/components/chess-board.tsx
@ -0,0 +1,76 @@
+"use client"
+
+import type { ChessPiece, Position } from "@/lib/chess-types"
+import ChessSquare from "./chess-square"
+
+interface ChessBoardProps {
+  board: (ChessPiece | null)[][]
+  selectedPiece: Position | null
+  validMoves: Position[]
+  onSquareClick: (position: Position) => void
+}
+
+export default function ChessBoard({ board, selectedPiece, validMoves, onSquareClick }: ChessBoardProps) {
+  const isValidMove = (row: number, col: number) => {
+    return validMoves.some((move) => move.row === row && move.col === col)
+  }
+
+  const isSelected = (row: number, col: number) => {
+    return selectedPiece?.row === row && selectedPiece?.col === col
+  }
+
+  // Generate column labels (a-h)
+  const columnLabels = Array.from({ length: 8 }, (_, i) => String.fromCharCode(97 + i))
+
+  // Generate row labels (1-8)
+  const rowLabels = Array.from({ length: 8 }, (_, i) => 8 - i)
+
+  return (
+    <div className="relative">
+      <div className="grid grid-cols-[auto_repeat(8,1fr)] grid-rows-[repeat(8,1fr)_auto]">
+        {/* Empty top-left corner */}
+        <div className="w-6"></div>
+
+        {/* Column labels (top) */}
+        {columnLabels.map((label) => (
+          <div key={`top-${label}`} className="flex justify-center items-center h-6 text-sm text-gray-600">
+            {label}
+          </div>
+        ))}
+
+        {/* Board with row labels */}
+        {board.map((row, rowIndex) => (
+          <>
+            {/* Row label */}
+            <div key={`label-${rowIndex}`} className="flex justify-center items-center w-6 text-sm text-gray-600">
+              {rowLabels[rowIndex]}
+            </div>
+
+            {/* Chess squares */}
+            {row.map((piece, colIndex) => (
+              <ChessSquare
+                key={`${rowIndex}-${colIndex}`}
+                piece={piece}
+                position={{ row: rowIndex, col: colIndex }}
+                isLight={(rowIndex + colIndex) % 2 === 0}
+                isSelected={isSelected(rowIndex, colIndex)}
+                isValidMove={isValidMove(rowIndex, colIndex)}
+                onClick={() => onSquareClick({ row: rowIndex, col: colIndex })}
+              />
+            ))}
+          </>
+        ))}
+
+        {/* Empty bottom-left corner */}
+        <div className="w-6"></div>
+
+        {/* Column labels (bottom) */}
+        {columnLabels.map((label) => (
+          <div key={`bottom-${label}`} className="flex justify-center items-center h-6 text-sm text-gray-600">
+            {label}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
--- a/components/chess-game.tsx
+++ b/components/chess-game.tsx
@ -0,0 +1,164 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import ChessBoard from "./chess-board"
+import GameControls from "./game-controls"
+import GameInfo from "./game-info"
+import { initialBoardState, PieceType, PieceColor, type ChessPiece, type Position, GameMode } from "@/lib/chess-types"
+import { isValidMove, makeMove, isCheck, isCheckmate, isStalemate, hasLostAllPieces } from "@/lib/chess-rules"
+
+interface ChessGameProps {
+  gameMode?: GameMode
+}
+
+export default function ChessGame({ gameMode = GameMode.CLASSIC }: ChessGameProps) {
+  const [board, setBoard] = useState<(ChessPiece | null)[][]>(initialBoardState())
+  const [currentPlayer, setCurrentPlayer] = useState<PieceColor>(PieceColor.WHITE)
+  const [selectedPiece, setSelectedPiece] = useState<Position | null>(null)
+  const [validMoves, setValidMoves] = useState<Position[]>([])
+  const [gameStatus, setGameStatus] = useState<string>("ongoing")
+  const [moveHistory, setMoveHistory] = useState<string[]>([])
+  const [capturedPieces, setCapturedPieces] = useState<{
+    [PieceColor.WHITE]: ChessPiece[]
+    [PieceColor.BLACK]: ChessPiece[]
+  }>({
+    [PieceColor.WHITE]: [],
+    [PieceColor.BLACK]: [],
+  })
+
+  // Calculate valid moves when a piece is selected
+  useEffect(() => {
+    if (selectedPiece) {
+      const moves: Position[] = []
+      for (let row = 0; row < 8; row++) {
+        for (let col = 0; col < 8; col++) {
+          if (isValidMove(board, selectedPiece, { row, col }, currentPlayer, gameMode)) {
+            moves.push({ row, col })
+          }
+        }
+      }
+      setValidMoves(moves)
+    } else {
+      setValidMoves([])
+    }
+  }, [selectedPiece, board, currentPlayer])
+
+  // Check for game end conditions after each move
+  useEffect(() => {
+    if (gameMode === GameMode.GHOST) {
+      // In ghost chess, check if a player has lost all pieces
+      if (hasLostAllPieces(board, currentPlayer)) {
+        setGameStatus(`ghost-win-${currentPlayer}`)
+      } else if (isCheck(board, currentPlayer)) {
+        setGameStatus(`check-${currentPlayer}`)
+      } else {
+        setGameStatus("ongoing")
+      }
+    } else {
+      // Classic chess rules
+      if (isCheckmate(board, currentPlayer, gameMode)) {
+        const winner = currentPlayer === PieceColor.WHITE ? "Black" : "White"
+        setGameStatus(`checkmate-${winner}`)
+      } else if (isStalemate(board, currentPlayer, gameMode)) {
+        setGameStatus("stalemate")
+      } else if (isCheck(board, currentPlayer)) {
+        setGameStatus(`check-${currentPlayer}`)
+      } else {
+        setGameStatus("ongoing")
+      }
+    }
+  }, [board, currentPlayer, gameMode])
+
+  const handleSquareClick = (position: Position) => {
+    // If game is over, don't allow further moves
+    if (gameStatus.includes("checkmate") || gameStatus === "stalemate" || gameStatus.includes("ghost-win")) {
+      return
+    }
+
+    const piece = board[position.row][position.col]
+
+    // If a piece is already selected
+    if (selectedPiece) {
+      // If clicking on the same piece, deselect it
+      if (selectedPiece.row === position.row && selectedPiece.col === position.col) {
+        setSelectedPiece(null)
+        return
+      }
+
+      // If clicking on a valid move position
+      if (validMoves.some((move) => move.row === position.row && move.col === position.col)) {
+        const result = makeMove(board, selectedPiece, position)
+
+        // Update captured pieces if a piece was captured
+        if (result.capturedPiece) {
+          setCapturedPieces((prev) => {
+            const oppositeColor = currentPlayer === PieceColor.WHITE ? PieceColor.BLACK : PieceColor.WHITE
+            return {
+              ...prev,
+              [currentPlayer]: [...prev[currentPlayer], result.capturedPiece],
+            }
+          })
+        }
+
+        // Add move to history
+        const fromNotation = `${String.fromCharCode(97 + selectedPiece.col)}${8 - selectedPiece.row}`
+        const toNotation = `${String.fromCharCode(97 + position.col)}${8 - position.row}`
+        const pieceSymbol =
+          board[selectedPiece.row][selectedPiece.col]?.type === PieceType.PAWN
+            ? ""
+            : board[selectedPiece.row][selectedPiece.col]?.type.charAt(0)
+
+        setMoveHistory((prev) => [...prev, `${pieceSymbol}${fromNotation}-${toNotation}`])
+
+        // Update board and switch player
+        setBoard(result.newBoard)
+        setCurrentPlayer((prev) => (prev === PieceColor.WHITE ? PieceColor.BLACK : PieceColor.WHITE))
+        setSelectedPiece(null)
+      }
+      // If clicking on another piece of the same color, select that piece instead
+      else if (piece && piece.color === currentPlayer) {
+        setSelectedPiece(position)
+      }
+    }
+    // If no piece is selected and clicking on a piece of the current player's color
+    else if (piece && piece.color === currentPlayer) {
+      setSelectedPiece(position)
+    }
+  }
+
+  const resetGame = () => {
+    setBoard(initialBoardState())
+    setCurrentPlayer(PieceColor.WHITE)
+    setSelectedPiece(null)
+    setValidMoves([])
+    setGameStatus("ongoing")
+    setMoveHistory([])
+    setCapturedPieces({
+      [PieceColor.WHITE]: [],
+      [PieceColor.BLACK]: [],
+    })
+  }
+
+  return (
+    <div className="flex flex-col md:flex-row gap-6 w-full max-w-6xl">
+      <div className="flex-1 flex flex-col items-center">
+        <ChessBoard
+          board={board}
+          selectedPiece={selectedPiece}
+          validMoves={validMoves}
+          onSquareClick={handleSquareClick}
+        />
+        <GameControls onReset={resetGame} gameStatus={gameStatus} gameMode={gameMode} />
+      </div>
+      <div className="flex-1">
+        <GameInfo
+          currentPlayer={currentPlayer}
+          gameStatus={gameStatus}
+          moveHistory={moveHistory}
+          capturedPieces={capturedPieces}
+          gameMode={gameMode}
+        />
+      </div>
+    </div>
+  )
+}
--- a/components/chess-square.tsx
+++ b/components/chess-square.tsx
@ -0,0 +1,43 @@
+"use client"
+
+import type { ChessPiece, Position } from "@/lib/chess-types"
+import { getPieceSymbol } from "@/lib/chess-utils"
+import { cn } from "@/lib/utils"
+
+interface ChessSquareProps {
+  piece: ChessPiece | null
+  position: Position
+  isLight: boolean
+  isSelected: boolean
+  isValidMove: boolean
+  onClick: () => void
+}
+
+export default function ChessSquare({ piece, position, isLight, isSelected, isValidMove, onClick }: ChessSquareProps) {
+  return (
+    <div
+      className={cn(
+        "w-full aspect-square flex items-center justify-center text-3xl md:text-4xl relative cursor-pointer",
+        isLight ? "bg-amber-100" : "bg-amber-800",
+        isSelected && "bg-yellow-300",
+      )}
+      onClick={onClick}
+      data-position={`${position.row}-${position.col}`}
+    >
+      {piece && (
+        <span
+          className={cn(
+            "select-none",
+            piece.color === "white" ? "text-white drop-shadow-[0_0_1px_rgba(0,0,0,0.8)]" : "text-black",
+          )}
+        >
+          {getPieceSymbol(piece)}
+        </span>
+      )}
+
+      {isValidMove && !piece && <div className="absolute w-3 h-3 rounded-full bg-gray-500 opacity-50"></div>}
+
+      {isValidMove && piece && <div className="absolute inset-0 border-4 border-gray-500 opacity-50 rounded-sm"></div>}
+    </div>
+  )
+}
--- a/components/game-controls.tsx
+++ b/components/game-controls.tsx
@ -0,0 +1,38 @@
+"use client"
+
+import { Button } from "@/components/ui/button"
+import { RefreshCw } from "lucide-react"
+import { GameMode } from "@/lib/chess-types"
+
+interface GameControlsProps {
+  onReset: () => void
+  gameStatus: string
+  gameMode?: GameMode
+}
+
+export default function GameControls({ onReset, gameStatus, gameMode = GameMode.CLASSIC }: GameControlsProps) {
+  return (
+    <div className="mt-4 flex flex-col items-center gap-4">
+      <Button onClick={onReset} className="flex items-center gap-2">
+        <RefreshCw className="h-4 w-4" />
+        New Game ({gameMode === GameMode.CLASSIC ? "Classic" : "Ghost"})
+      </Button>
+
+      {gameStatus.includes("checkmate") && (
+        <div className="text-xl font-bold text-red-600">Checkmate! {gameStatus.split("-")[1]} wins!</div>
+      )}
+
+      {gameStatus.includes("ghost-win") && (
+        <div className="text-xl font-bold text-green-600">
+          {gameStatus.split("-")[2]} wins by losing all pieces!
+        </div>
+      )}
+
+      {gameStatus === "stalemate" && (
+        <div className="text-xl font-bold text-amber-600">Stalemate! The game is a draw.</div>
+      )}
+
+      {gameStatus.includes("check") && <div className="text-lg font-semibold text-orange-600">Check!</div>}
+    </div>
+  )
+}
--- a/components/game-info.tsx
+++ b/components/game-info.tsx
@ -0,0 +1,123 @@
+"use client"
+
+import { PieceColor, type ChessPiece, GameMode } from "@/lib/chess-types"
+import { getPieceSymbol } from "@/lib/chess-utils"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+
+interface GameInfoProps {
+  currentPlayer: PieceColor
+  gameStatus: string
+  moveHistory: string[]
+  capturedPieces: {
+    [PieceColor.WHITE]: ChessPiece[]
+    [PieceColor.BLACK]: ChessPiece[]
+  }
+  gameMode?: GameMode
+}
+
+export default function GameInfo({ currentPlayer, gameStatus, moveHistory, capturedPieces, gameMode = GameMode.CLASSIC }: GameInfoProps) {
+  return (
+    <div className="space-y-4">
+      <Card>
+        <CardHeader className="pb-2">
+          <CardTitle>Game Status ({gameMode === GameMode.CLASSIC ? "Classic" : "Ghost"} Chess)</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="flex items-center gap-2 mb-2">
+            <div
+              className={`w-4 h-4 rounded-full ${currentPlayer === PieceColor.WHITE ? "bg-white border border-gray-300" : "bg-black"}`}
+            ></div>
+            <span className="font-medium">{currentPlayer === PieceColor.WHITE ? "White" : "Black"}'s turn</span>
+          </div>
+
+          {gameStatus === "ongoing" ? (
+            <p className="text-sm text-gray-500">
+              Game in progress
+              {gameMode === GameMode.GHOST && (
+                <span className="block text-xs mt-1 text-blue-600">
+                  Goal: Lose all your pieces to win!
+                </span>
+              )}
+            </p>
+          ) : gameStatus.includes("check") && !gameStatus.includes("checkmate") && !gameStatus.includes("ghost-win") ? (
+            <p className="text-sm text-orange-600 font-semibold">
+              {gameStatus.split("-")[1] === PieceColor.WHITE ? "White" : "Black"} is in check!
+            </p>
+          ) : null}
+        </CardContent>
+      </Card>
+
+      <Tabs defaultValue="moves">
+        <TabsList className="grid grid-cols-2">
+          <TabsTrigger value="moves">Move History</TabsTrigger>
+          <TabsTrigger value="captured">Captured Pieces</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="moves">
+          <Card>
+            <CardContent className="pt-4">
+              {moveHistory.length > 0 ? (
+                <div className="grid grid-cols-2 gap-2">
+                  {Array.from({ length: Math.ceil(moveHistory.length / 2) }).map((_, i) => (
+                    <div key={i} className="col-span-2 grid grid-cols-2 border-b border-gray-100 py-1">
+                      <div className="text-sm">
+                        <span className="text-gray-500 mr-2">{i + 1}.</span>
+                        {moveHistory[i * 2]}
+                      </div>
+                      {moveHistory[i * 2 + 1] && <div className="text-sm">{moveHistory[i * 2 + 1]}</div>}
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <p className="text-sm text-gray-500">No moves yet</p>
+              )}
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="captured">
+          <Card>
+            <CardContent className="pt-4">
+              <div className="space-y-4">
+                <div>
+                  <h3 className="text-sm font-medium mb-1">
+                    White captured{gameMode === GameMode.GHOST ? " (White's progress)" : ""}:
+                  </h3>
+                  <div className="flex flex-wrap gap-1">
+                    {capturedPieces[PieceColor.BLACK].length > 0 ? (
+                      capturedPieces[PieceColor.BLACK].map((piece, i) => (
+                        <span key={i} className="text-xl text-black">
+                          {getPieceSymbol(piece)}
+                        </span>
+                      ))
+                    ) : (
+                      <span className="text-sm text-gray-500">None</span>
+                    )}
+                  </div>
+                </div>
+
+                <div>
+                  <h3 className="text-sm font-medium mb-1">
+                    Black captured{gameMode === GameMode.GHOST ? " (Black's progress)" : ""}:
+                  </h3>
+                  <div className="flex flex-wrap gap-1">
+                    {capturedPieces[PieceColor.WHITE].length > 0 ? (
+                      capturedPieces[PieceColor.WHITE].map((piece, i) => (
+                        <span key={i} className="text-xl text-white">
+                          {getPieceSymbol(piece)}
+                        </span>
+                      ))
+                    ) : (
+                      <span className="text-sm text-gray-500">None</span>
+                    )}
+                  </div>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+      </Tabs>
+    </div>
+  )
+}
--- a/components/ui/button.tsx
+++ b/components/ui/button.tsx
@ -0,0 +1,59 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }
--- a/components/ui/card.tsx
+++ b/components/ui/card.tsx
@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}
--- a/components/ui/tabs.tsx
+++ b/components/ui/tabs.tsx
@ -0,0 +1,66 @@
+"use client"
+
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/lib/utils"
+
+function Tabs({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function TabsList({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      className={cn(
+        "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn("flex-1 outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }
--- a/lib/chess-rules.ts
+++ b/lib/chess-rules.ts
@ -0,0 +1,427 @@
+import { type ChessPiece, PieceType, PieceColor, type Position, type MoveResult, GameMode } from "./chess-types"
+import { cloneBoard, findKingPosition } from "./chess-utils"
+
+// Check if a move is valid for a specific piece
+export function isValidMove(
+  board: (ChessPiece | null)[][],
+  from: Position,
+  to: Position,
+  currentPlayer: PieceColor,
+  gameMode: GameMode = GameMode.CLASSIC,
+): boolean {
+  // Cannot move to the same position
+  if (from.row === to.row && from.col === to.col) {
+    return false
+  }
+
+  const piece = board[from.row][from.col]
+
+  // No piece at the starting position or wrong player's piece
+  if (!piece || piece.color !== currentPlayer) {
+    return false
+  }
+
+  const targetPiece = board[to.row][to.col]
+
+  // Cannot capture own piece
+  if (targetPiece && targetPiece.color === piece.color) {
+    return false
+  }
+
+  // Check piece-specific movement rules
+  let validPieceMove = false
+
+  switch (piece.type) {
+    case PieceType.PAWN:
+      validPieceMove = isValidPawnMove(board, from, to)
+      break
+    case PieceType.ROOK:
+      validPieceMove = isValidRookMove(board, from, to)
+      break
+    case PieceType.KNIGHT:
+      validPieceMove = isValidKnightMove(from, to)
+      break
+    case PieceType.BISHOP:
+      validPieceMove = isValidBishopMove(board, from, to)
+      break
+    case PieceType.QUEEN:
+      validPieceMove = isValidQueenMove(board, from, to)
+      break
+    case PieceType.KING:
+      validPieceMove = isValidKingMove(board, from, to)
+      break
+  }
+
+  if (!validPieceMove) {
+    return false
+  }
+
+  // In ghost chess, forced captures take priority
+  if (gameMode === GameMode.GHOST) {
+    const captureMoves = getCaptureMoves(board, currentPlayer)
+    const isCapture = targetPiece !== null
+    
+    // If there are capture moves available and this isn't a capture, it's invalid
+    if (captureMoves.length > 0 && !isCapture) {
+      return false
+    }
+  }
+
+  // Check if the move would put or leave the king in check (only in classic mode)
+  if (gameMode === GameMode.CLASSIC) {
+    const newBoard = cloneBoard(board)
+    newBoard[to.row][to.col] = newBoard[from.row][from.col]
+    newBoard[from.row][from.col] = null
+
+    return !isKingInCheck(newBoard, piece.color)
+  }
+
+  return true
+}
+
+// Make a move and return the new board state
+export function makeMove(board: (ChessPiece | null)[][], from: Position, to: Position): MoveResult {
+  const newBoard = cloneBoard(board)
+  const piece = newBoard[from.row][from.col]
+  const capturedPiece = newBoard[to.row][to.col]
+
+  if (!piece) {
+    return { newBoard, capturedPiece: null }
+  }
+
+  // Update hasMoved property for pawns, kings, and rooks (for castling)
+  if (piece.type === PieceType.PAWN || piece.type === PieceType.KING || piece.type === PieceType.ROOK) {
+    piece.hasMoved = true
+  }
+
+  // Handle pawn promotion
+  if (piece.type === PieceType.PAWN && (to.row === 0 || to.row === 7)) {
+    piece.type = PieceType.QUEEN // Auto-promote to queen for simplicity
+  }
+
+  // Handle castling
+  if (piece.type === PieceType.KING && Math.abs(from.col - to.col) === 2) {
+    const isKingSide = to.col > from.col
+    const rookCol = isKingSide ? 7 : 0
+    const newRookCol = isKingSide ? from.col + 1 : from.col - 1
+
+    // Move the rook
+    newBoard[from.row][newRookCol] = newBoard[from.row][rookCol]
+    newBoard[from.row][rookCol] = null
+
+    if (newBoard[from.row][newRookCol]) {
+      newBoard[from.row][newRookCol].hasMoved = true
+    }
+  }
+
+  // Make the move
+  newBoard[to.row][to.col] = piece
+  newBoard[from.row][from.col] = null
+
+  return { newBoard, capturedPiece }
+}
+
+// Check if the king of the given color is in check
+export function isCheck(board: (ChessPiece | null)[][], color: PieceColor): boolean {
+  return isKingInCheck(board, color)
+}
+
+// Check if the king of the given color is in checkmate
+export function isCheckmate(board: (ChessPiece | null)[][], color: PieceColor, gameMode: GameMode = GameMode.CLASSIC): boolean {
+  // Ghost chess doesn't have checkmate
+  if (gameMode === GameMode.GHOST) {
+    return false
+  }
+
+  // If the king is not in check, it's not checkmate
+  if (!isKingInCheck(board, color)) {
+    return false
+  }
+
+  // Check if any move can get the king out of check
+  return !hasLegalMoves(board, color, gameMode)
+}
+
+// Check if the position is a stalemate
+export function isStalemate(board: (ChessPiece | null)[][], color: PieceColor, gameMode: GameMode = GameMode.CLASSIC): boolean {
+  // Ghost chess doesn't have stalemate
+  if (gameMode === GameMode.GHOST) {
+    return false
+  }
+
+  // If the king is in check, it's not stalemate
+  if (isKingInCheck(board, color)) {
+    return false
+  }
+
+  // If the player has no legal moves, it's stalemate
+  return !hasLegalMoves(board, color, gameMode)
+}
+
+// Helper function to check if a player has any legal moves
+function hasLegalMoves(board: (ChessPiece | null)[][], color: PieceColor, gameMode: GameMode = GameMode.CLASSIC): boolean {
+  for (let fromRow = 0; fromRow < 8; fromRow++) {
+    for (let fromCol = 0; fromCol < 8; fromCol++) {
+      const piece = board[fromRow][fromCol]
+      if (piece && piece.color === color) {
+        for (let toRow = 0; toRow < 8; toRow++) {
+          for (let toCol = 0; toCol < 8; toCol++) {
+            if (isValidMove(board, { row: fromRow, col: fromCol }, { row: toRow, col: toCol }, color, gameMode)) {
+              return true
+            }
+          }
+        }
+      }
+    }
+  }
+  return false
+}
+
+// Helper function to check if the king is in check
+function isKingInCheck(board: (ChessPiece | null)[][], kingColor: PieceColor): boolean {
+  const kingPosition = findKingPosition(board, kingColor)
+  if (!kingPosition) return false
+
+  const opponentColor = kingColor === PieceColor.WHITE ? PieceColor.BLACK : PieceColor.WHITE
+
+  // Check if any opponent piece can capture the king
+  for (let row = 0; row < 8; row++) {
+    for (let col = 0; col < 8; col++) {
+      const piece = board[row][col]
+      if (piece && piece.color === opponentColor) {
+        // Use a simplified version of isValidMove that doesn't check for check
+        // to avoid infinite recursion
+        if (canPieceMove(board, { row, col }, kingPosition)) {
+          return true
+        }
+      }
+    }
+  }
+
+  return false
+}
+
+// Simplified version of isValidMove that doesn't check for check
+function canPieceMove(board: (ChessPiece | null)[][], from: Position, to: Position): boolean {
+  const piece = board[from.row][from.col]
+  if (!piece) return false
+
+  const targetPiece = board[to.row][to.col]
+  if (targetPiece && targetPiece.color === piece.color) return false
+
+  switch (piece.type) {
+    case PieceType.PAWN:
+      return isValidPawnMove(board, from, to)
+    case PieceType.ROOK:
+      return isValidRookMove(board, from, to)
+    case PieceType.KNIGHT:
+      return isValidKnightMove(from, to)
+    case PieceType.BISHOP:
+      return isValidBishopMove(board, from, to)
+    case PieceType.QUEEN:
+      return isValidQueenMove(board, from, to)
+    case PieceType.KING:
+      return isValidKingMove(board, from, to)
+    default:
+      return false
+  }
+}
+
+// Check if a pawn move is valid
+function isValidPawnMove(board: (ChessPiece | null)[][], from: Position, to: Position): boolean {
+  const piece = board[from.row][from.col]
+  if (!piece || piece.type !== PieceType.PAWN) return false
+
+  const direction = piece.color === PieceColor.WHITE ? -1 : 1
+  const startRow = piece.color === PieceColor.WHITE ? 6 : 1
+
+  // Moving forward one square
+  if (from.col === to.col && from.row + direction === to.row && !board[to.row][to.col]) {
+    return true
+  }
+
+  // Moving forward two squares from starting position
+  if (
+    from.col === to.col &&
+    from.row === startRow &&
+    from.row + 2 * direction === to.row &&
+    !board[from.row + direction][from.col] &&
+    !board[to.row][to.col]
+  ) {
+    return true
+  }
+
+  // Capturing diagonally
+  if ((from.col + 1 === to.col || from.col - 1 === to.col) && from.row + direction === to.row) {
+    return board[to.row][to.col] !== null
+  }
+
+  return false
+}
+
+// Check if a rook move is valid
+function isValidRookMove(board: (ChessPiece | null)[][], from: Position, to: Position): boolean {
+  // Rooks move horizontally or vertically
+  if (from.row !== to.row && from.col !== to.col) {
+    return false
+  }
+
+  // Check if the path is clear
+  if (from.row === to.row) {
+    // Horizontal movement
+    const start = Math.min(from.col, to.col)
+    const end = Math.max(from.col, to.col)
+
+    for (let col = start + 1; col < end; col++) {
+      if (board[from.row][col] !== null) {
+        return false
+      }
+    }
+  } else {
+    // Vertical movement
+    const start = Math.min(from.row, to.row)
+    const end = Math.max(from.row, to.row)
+
+    for (let row = start + 1; row < end; row++) {
+      if (board[row][from.col] !== null) {
+        return false
+      }
+    }
+  }
+
+  return true
+}
+
+// Check if a knight move is valid
+function isValidKnightMove(from: Position, to: Position): boolean {
+  const rowDiff = Math.abs(from.row - to.row)
+  const colDiff = Math.abs(from.col - to.col)
+
+  // Knights move in an L-shape: 2 squares in one direction and 1 square perpendicular
+  return (rowDiff === 2 && colDiff === 1) || (rowDiff === 1 && colDiff === 2)
+}
+
+// Check if a bishop move is valid
+function isValidBishopMove(board: (ChessPiece | null)[][], from: Position, to: Position): boolean {
+  const rowDiff = Math.abs(from.row - to.row)
+  const colDiff = Math.abs(from.col - to.col)
+
+  // Bishops move diagonally
+  if (rowDiff !== colDiff) {
+    return false
+  }
+
+  // Check if the path is clear
+  const rowDirection = from.row < to.row ? 1 : -1
+  const colDirection = from.col < to.col ? 1 : -1
+
+  for (let i = 1; i < rowDiff; i++) {
+    if (board[from.row + i * rowDirection][from.col + i * colDirection] !== null) {
+      return false
+    }
+  }
+
+  return true
+}
+
+// Check if a queen move is valid
+function isValidQueenMove(board: (ChessPiece | null)[][], from: Position, to: Position): boolean {
+  // Queens can move like rooks or bishops
+  return isValidRookMove(board, from, to) || isValidBishopMove(board, from, to)
+}
+
+// Check if a king move is valid
+function isValidKingMove(board: (ChessPiece | null)[][], from: Position, to: Position): boolean {
+  const rowDiff = Math.abs(from.row - to.row)
+  const colDiff = Math.abs(from.col - to.col)
+
+  // Kings move one square in any direction
+  if (rowDiff <= 1 && colDiff <= 1) {
+    return true
+  }
+
+  // Check for castling
+  const piece = board[from.row][from.col]
+  if (piece && piece.type === PieceType.KING && !piece.hasMoved && rowDiff === 0 && colDiff === 2) {
+    // Determine if it's kingside or queenside castling
+    const isKingSide = to.col > from.col
+    const rookCol = isKingSide ? 7 : 0
+
+    // Check if the rook is in place and hasn't moved
+    const rook = board[from.row][rookCol]
+    if (!rook || rook.type !== PieceType.ROOK || rook.color !== piece.color || rook.hasMoved) {
+      return false
+    }
+
+    // Check if the path is clear
+    const start = isKingSide ? from.col + 1 : rookCol + 1
+    const end = isKingSide ? rookCol : from.col
+
+    for (let col = start; col < end; col++) {
+      if (board[from.row][col] !== null) {
+        return false
+      }
+    }
+
+    // Check if the king is in check or would pass through check
+    const tempBoard = cloneBoard(board)
+    tempBoard[from.row][from.col] = null
+
+    // Check if the king is in check
+    if (isKingInCheck(tempBoard, piece.color)) {
+      return false
+    }
+
+    // Check if the king would pass through check
+    tempBoard[from.row][isKingSide ? from.col + 1 : from.col - 1] = piece
+    if (isKingInCheck(tempBoard, piece.color)) {
+      return false
+    }
+
+    return true
+  }
+
+  return false
+}
+
+// Get all possible capture moves for a player (for ghost chess)
+export function getCaptureMoves(board: (ChessPiece | null)[][], color: PieceColor): { from: Position; to: Position }[] {
+  const captureMoves: { from: Position; to: Position }[] = []
+  
+  for (let fromRow = 0; fromRow < 8; fromRow++) {
+    for (let fromCol = 0; fromCol < 8; fromCol++) {
+      const piece = board[fromRow][fromCol]
+      if (piece && piece.color === color) {
+        for (let toRow = 0; toRow < 8; toRow++) {
+          for (let toCol = 0; toCol < 8; toCol++) {
+            const targetPiece = board[toRow][toCol]
+            if (targetPiece && targetPiece.color !== color) {
+              // Check if this piece can capture the target
+              if (canPieceMove(board, { row: fromRow, col: fromCol }, { row: toRow, col: toCol })) {
+                captureMoves.push({
+                  from: { row: fromRow, col: fromCol },
+                  to: { row: toRow, col: toCol }
+                })
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  
+  return captureMoves
+}
+
+// Check if a player has lost all their pieces (ghost chess win condition)
+export function hasLostAllPieces(board: (ChessPiece | null)[][], color: PieceColor): boolean {
+  for (let row = 0; row < 8; row++) {
+    for (let col = 0; col < 8; col++) {
+      const piece = board[row][col]
+      if (piece && piece.color === color) {
+        return false
+      }
+    }
+  }
+  return true
+}
--- a/lib/chess-types.ts
+++ b/lib/chess-types.ts
@ -0,0 +1,74 @@
+export enum PieceType {
+  PAWN = "pawn",
+  ROOK = "rook",
+  KNIGHT = "knight",
+  BISHOP = "bishop",
+  QUEEN = "queen",
+  KING = "king",
+}
+
+export enum PieceColor {
+  WHITE = "white",
+  BLACK = "black",
+}
+
+export enum GameMode {
+  CLASSIC = "classic",
+  GHOST = "ghost",
+}
+
+export interface ChessPiece {
+  type: PieceType
+  color: PieceColor
+  hasMoved?: boolean
+}
+
+export interface Position {
+  row: number
+  col: number
+}
+
+export interface MoveResult {
+  newBoard: (ChessPiece | null)[][]
+  capturedPiece: ChessPiece | null
+}
+
+export function initialBoardState(): (ChessPiece | null)[][] {
+  const board: (ChessPiece | null)[][] = Array(8)
+    .fill(null)
+    .map(() => Array(8).fill(null))
+
+  // Set up pawns
+  for (let col = 0; col < 8; col++) {
+    board[1][col] = { type: PieceType.PAWN, color: PieceColor.BLACK, hasMoved: false }
+    board[6][col] = { type: PieceType.PAWN, color: PieceColor.WHITE, hasMoved: false }
+  }
+
+  // Set up rooks
+  board[0][0] = { type: PieceType.ROOK, color: PieceColor.BLACK, hasMoved: false }
+  board[0][7] = { type: PieceType.ROOK, color: PieceColor.BLACK, hasMoved: false }
+  board[7][0] = { type: PieceType.ROOK, color: PieceColor.WHITE, hasMoved: false }
+  board[7][7] = { type: PieceType.ROOK, color: PieceColor.WHITE, hasMoved: false }
+
+  // Set up knights
+  board[0][1] = { type: PieceType.KNIGHT, color: PieceColor.BLACK }
+  board[0][6] = { type: PieceType.KNIGHT, color: PieceColor.BLACK }
+  board[7][1] = { type: PieceType.KNIGHT, color: PieceColor.WHITE }
+  board[7][6] = { type: PieceType.KNIGHT, color: PieceColor.WHITE }
+
+  // Set up bishops
+  board[0][2] = { type: PieceType.BISHOP, color: PieceColor.BLACK }
+  board[0][5] = { type: PieceType.BISHOP, color: PieceColor.BLACK }
+  board[7][2] = { type: PieceType.BISHOP, color: PieceColor.WHITE }
+  board[7][5] = { type: PieceType.BISHOP, color: PieceColor.WHITE }
+
+  // Set up queens
+  board[0][3] = { type: PieceType.QUEEN, color: PieceColor.BLACK }
+  board[7][3] = { type: PieceType.QUEEN, color: PieceColor.WHITE }
+
+  // Set up kings
+  board[0][4] = { type: PieceType.KING, color: PieceColor.BLACK, hasMoved: false }
+  board[7][4] = { type: PieceType.KING, color: PieceColor.WHITE, hasMoved: false }
+
+  return board
+}
--- a/lib/chess-utils.ts
+++ b/lib/chess-utils.ts
@ -0,0 +1,30 @@
+import { type ChessPiece, PieceType } from "./chess-types"
+
+export function getPieceSymbol(piece: ChessPiece): string {
+  const symbols = {
+    [PieceType.PAWN]: { white: "♙", black: "♟" },
+    [PieceType.ROOK]: { white: "♖", black: "♜" },
+    [PieceType.KNIGHT]: { white: "♘", black: "♞" },
+    [PieceType.BISHOP]: { white: "♗", black: "♝" },
+    [PieceType.QUEEN]: { white: "♕", black: "♛" },
+    [PieceType.KING]: { white: "♔", black: "♚" },
+  }
+
+  return symbols[piece.type][piece.color]
+}
+
+export function cloneBoard(board: (ChessPiece | null)[][]): (ChessPiece | null)[][] {
+  return board.map((row) => row.map((piece) => (piece ? { ...piece } : null)))
+}
+
+export function findKingPosition(board: (ChessPiece | null)[][], color: string): { row: number; col: number } | null {
+  for (let row = 0; row < 8; row++) {
+    for (let col = 0; col < 8; col++) {
+      const piece = board[row][col]
+      if (piece && piece.type === PieceType.KING && piece.color === color) {
+        return { row, col }
+      }
+    }
+  }
+  return null
+}
--- a/lib/utils.ts
+++ b/lib/utils.ts
@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
--- a/package-lock.json
+++ b/package-lock.json
@ -8,9 +8,15 @@
      "name": "ghost-chess",
      "version": "0.1.0",
      "dependencies": {
+        "@radix-ui/react-slot": "^1.2.3",
+        "@radix-ui/react-tabs": "^1.1.12",
+        "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
+        "lucide-react": "^0.511.0",
        "next": "15.2.4",
        "react": "^19.0.0",
-        "react-dom": "^19.0.0"
+        "react-dom": "^19.0.0",
+        "tailwind-merge": "^3.3.0"
      },
      "devDependencies": {
        "@eslint/eslintrc": "^3",
@ -21,6 +27,7 @@
        "eslint": "^9",
        "eslint-config-next": "15.2.4",
        "tailwindcss": "^4",
+        "tw-animate-css": "^1.3.2",
        "typescript": "^5"
      }
    },
@ -923,6 +930,294 @@
        "node": ">=12.4.0"
      }
    },
+    "node_modules/@radix-ui/primitive": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.2.tgz",
+      "integrity": "sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/react-collection": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.7.tgz",
+      "integrity": "sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
+      "integrity": "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-context": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
+      "integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-direction": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.1.tgz",
+      "integrity": "sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-id": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.1.tgz",
+      "integrity": "sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-presence": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.4.tgz",
+      "integrity": "sha512-ueDqRbdc4/bkaQT3GIpLQssRlFgWaL/U2z/S31qRwwLWoxHLgry3SIfCwhxeQNbirEUXFa+lq3RL3oBYXtcmIA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
+      "integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-roving-focus": {
+      "version": "1.1.10",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.10.tgz",
+      "integrity": "sha512-dT9aOXUen9JSsxnMPv/0VqySQf5eDQ6LCk5Sw28kamz8wSOW2bJdlX2Bg5VUIIcV+6XlHpWTIuTPCf/UNIyq8Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tabs": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.1.12.tgz",
+      "integrity": "sha512-GTVAlRVrQrSw3cEARM0nAx73ixrWDPNZAruETn3oHCNP6SbZ/hNxdxp+u7VkIEv3/sFoLq1PfcHrl7Pnp0CDpw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-presence": "1.1.4",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.10",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.1.tgz",
+      "integrity": "sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.2.2.tgz",
+      "integrity": "sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-effect-event": "0.0.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-effect-event": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-effect-event/-/react-use-effect-event-0.0.2.tgz",
+      "integrity": "sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz",
+      "integrity": "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@rtsao/scc": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
@ -1274,7 +1569,7 @@
      "version": "19.1.6",
      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.6.tgz",
      "integrity": "sha512-JeG0rEWak0N6Itr6QUx+X60uQmN+5t3j9r/OVDtWzFXKaj6kD1BwJzOksD0FF6iWxZlbE1kB0q9vtnU2ekqa1Q==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "csstype": "^3.0.2"
@ -1284,7 +1579,7 @@
      "version": "19.1.5",
      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.1.5.tgz",
      "integrity": "sha512-CMCjrWucUBZvohgZxkjd6S9h0nZxXjzus6yDfUb+xLxYM7VvjKNH1tQrE9GWLql1XoOP4/Ds3bwFqShHUYraGg==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "peerDependencies": {
        "@types/react": "^19.0.0"
@ -2248,12 +2543,33 @@
        "node": ">=18"
      }
    },
+    "node_modules/class-variance-authority": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
+      "integrity": "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "clsx": "^2.1.1"
+      },
+      "funding": {
+        "url": "https://polar.sh/cva"
+      }
+    },
    "node_modules/client-only": {
      "version": "0.0.1",
      "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
      "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
      "license": "MIT"
    },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
    "node_modules/color": {
      "version": "4.2.3",
      "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
@ -2325,7 +2641,7 @@
      "version": "3.1.3",
      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT"
    },
    "node_modules/damerau-levenshtein": {
@ -4432,6 +4748,15 @@
        "loose-envify": "cli.js"
      }
    },
+    "node_modules/lucide-react": {
+      "version": "0.511.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.511.0.tgz",
+      "integrity": "sha512-VK5a2ydJ7xm8GvBeKLS9mu1pVK6ucef9780JVUjw6bAjJL/QXnd4Y0p7SPeOUMC27YhzNCZvm5d/QX0Tp3rc0w==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
    "node_modules/magic-string": {
      "version": "0.30.17",
      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz",
@ -5653,6 +5978,16 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/tailwind-merge": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.3.0.tgz",
+      "integrity": "sha512-fyW/pEfcQSiigd5SNn0nApUOxx0zB/dm6UDU/rEwc2c3sX2smWUNbapHv+QRqLGVp9GWX3THIa7MUGPo+YkDzQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
    "node_modules/tailwindcss": {
      "version": "4.1.8",
      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.8.tgz",
@ -5778,6 +6113,16 @@
      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
      "license": "0BSD"
    },
+    "node_modules/tw-animate-css": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/tw-animate-css/-/tw-animate-css-1.3.2.tgz",
+      "integrity": "sha512-khGYcg4sHWFWcjpiWvy0KN0Bd6yVy6Ecc4r9ZP2u7FV+n4/Fp8MQscCWJkM0KMIRvrpGyKpIQnIbEd1hrewdeg==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/Wombosvideo"
+      }
+    },
    "node_modules/type-check": {
      "version": "0.4.0",
      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
--- a/package.json
+++ b/package.json
@ -9,19 +9,26 @@
    "lint": "next lint"
  },
  "dependencies": {
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-tabs": "^1.1.12",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.511.0",
+    "next": "15.2.4",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
-    "next": "15.2.4"
+    "tailwind-merge": "^3.3.0"
  },
  "devDependencies": {
-    "typescript": "^5",
+    "@eslint/eslintrc": "^3",
+    "@tailwindcss/postcss": "^4",
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
-    "@tailwindcss/postcss": "^4",
-    "tailwindcss": "^4",
    "eslint": "^9",
    "eslint-config-next": "15.2.4",
-    "@eslint/eslintrc": "^3"
+    "tailwindcss": "^4",
+    "tw-animate-css": "^1.3.2",
+    "typescript": "^5"
  }
 }