Site Updates

package.json

@@ -3,7 +3,7 @@
   "private": true,
   "sideEffects": false,
   "repository": "https://github.com/TanStack/tanstack.com.git",
-  "packageManager": "pnpm@9.4.0",
+  "packageManager": "pnpm@10.26.0",
   "type": "module",
   "scripts": {
     "dev": "pnpm run with-env vite dev",
@@ -59,12 +59,12 @@
     "hast-util-to-string": "^3.0.1",
     "html-react-parser": "^5.1.10",
     "lru-cache": "^7.13.1",
+    "lucide-react": "^0.561.0",
     "mermaid": "^11.11.0",
     "postgres": "^3.4.7",
     "react": "^19.2.0",
     "react-colorful": "^5.6.1",
     "react-dom": "^19.2.0",
-    "react-icons": "^5.3.0",
     "react-instantsearch": "7",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-callouts": "^2.1.2",

src/components/CodeExplorerTopBar.tsx

@@ -1,6 +1,11 @@
 import React from 'react'
-import { FaExpand, FaCompress } from 'react-icons/fa'
-import { CgMenuLeft } from 'react-icons/cg'
+import {
+  ArrowLeftFromLine,
+  ArrowRightFromLine,
+  Maximize,
+  Minimize,
+  TextAlignStart,
+} from 'lucide-react'
 
 interface CodeExplorerTopBarProps {
   activeTab: 'code' | 'sandbox'
@@ -23,16 +28,26 @@ export function CodeExplorerTopBar({
     <div className="flex items-center justify-between gap-2 border-b border-gray-200 dark:border-gray-700">
       <div className="flex items-center gap-2 px-1">
         {activeTab === 'code' ? (
-          <button
-            onClick={() => setIsSidebarOpen(!isSidebarOpen)}
-            className="p-2 text-sm rounded transition-colors hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300"
-            title={isSidebarOpen ? 'Hide sidebar' : 'Show sidebar'}
-          >
-            <CgMenuLeft className="w-4 h-4" />
-          </button>
+          isSidebarOpen ? (
+            <button
+              onClick={() => setIsSidebarOpen(!isSidebarOpen)}
+              className="p-2 text-sm rounded transition-colors hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300"
+              title={'Hide sidebar'}
+            >
+              <ArrowLeftFromLine className="w-4 h-4" />
+            </button>
+          ) : (
+            <button
+              onClick={() => setIsSidebarOpen(!isSidebarOpen)}
+              className="p-2 text-sm rounded transition-colors hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300"
+              title={'Show sidebar'}
+            >
+              <ArrowRightFromLine className="w-4 h-4" />
+            </button>
+          )
         ) : (
           <div className="p-2 text-sm rounded" aria-hidden>
-            <CgMenuLeft className="w-4 h-4 text-transparent" aria-hidden />
+            <TextAlignStart className="w-4 h-4 text-transparent" aria-hidden />
           </div>
         )}
         <button
@@ -81,9 +96,9 @@ export function CodeExplorerTopBar({
           title={isFullScreen ? 'Exit full screen' : 'Enter full screen'}
         >
           {isFullScreen ? (
-            <FaCompress className="w-4 h-4" />
+            <Minimize className="w-4 h-4" />
           ) : (
-            <FaExpand className="w-4 h-4" />
+            <Maximize className="w-4 h-4" />
           )}
         </button>
       </div>

src/components/CopyMarkdownButton.tsx

@@ -1,9 +1,9 @@
 'use client'
 import { useState, useTransition } from 'react'
-import { FaCheck, FaCopy } from 'react-icons/fa'
 
 import { type MouseEventHandler, useEffect, useRef } from 'react'
 import { useToast } from '~/components/ToastProvider'
+import { Check, Copy } from 'lucide-react'
 
 export function useCopyButton(
   onCopy: () => void | Promise<void>,
@@ -115,11 +115,11 @@ export function CopyMarkdownButton({
       <div className="flex gap-2 items-center">
         {checked ? (
           <>
-            <FaCheck className="w-3 h-3" /> Copied to Clipboard
+            <Check className="w-3 h-3" /> Copied to Clipboard
           </>
         ) : (
           <>
-            <FaCopy className="w-3 h-3" /> Copy Markdown
+            <Copy className="w-3 h-3" /> Copy Markdown
           </>
         )}
       </div>

src/components/Doc.tsx

@@ -1,9 +1,5 @@
 import * as React from 'react'
-import {
-  BsArrowsCollapseVertical,
-  BsArrowsExpandVertical,
-} from 'react-icons/bs'
-import { FaEdit } from 'react-icons/fa'
+import { FoldHorizontal, SquarePen, UnfoldHorizontal } from 'lucide-react'
 import { twMerge } from 'tailwind-merge'
 import { useWidthToggle } from '~/components/DocsLayout'
 import { DocTitle } from '~/components/DocTitle'
@@ -146,9 +142,9 @@ function DocContent({
                     title={isFullWidth ? 'Constrain width' : 'Expand width'}
                   >
                     {isFullWidth ? (
-                      <BsArrowsCollapseVertical className="w-4 h-4" />
+                      <FoldHorizontal className="w-4 h-4" />
                     ) : (
-                      <BsArrowsExpandVertical className="w-4 h-4" />
+                      <UnfoldHorizontal className="w-4 h-4" />
                     )}
                   </button>
                 )}
@@ -186,7 +182,7 @@ function DocContent({
               href={`https://github.com/${repo}/edit/${branch}/${filePath}`}
               className="flex items-center gap-2"
             >
-              <FaEdit /> Edit on GitHub
+              <SquarePen size={16} /> Edit on GitHub
             </a>
           </div>
           <div className="h-24" />

src/components/DocFeedbackFloatingButton.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
-import { FaPlus, FaComment, FaLightbulb } from 'react-icons/fa'
 import { twMerge } from 'tailwind-merge'
+import { Lightbulb, MessageSquare, Plus } from 'lucide-react'
 
 interface DocFeedbackFloatingButtonProps {
   onAddNote: () => void
@@ -59,7 +59,7 @@
       document.removeEventListener('mousedown', handleClickOutside)
       document.removeEventListener('keydown', handleEscape)
     }
   }, [isMenuOpen])
 
   const handleButtonClick = (e: React.MouseEvent) => {
     e.preventDefault()
@@ -86,7 +86,7 @@
   }
 
   return (
     <div
       ref={buttonRef}
       className="doc-feedback-floating-btn absolute top-0 right-0 -translate-y-full z-[100]"
       onMouseEnter={onMouseEnter}
@@ -111,7 +111,7 @@
         )}
         title="Add feedback"
       >
-        <FaPlus
+        <Plus
           className={twMerge(
             'text-[10px] transition-transform duration-200',
             isMenuOpen && 'rotate-45',
@@ -128,7 +128,7 @@
                 onClick={handleNoteClick}
                 className="w-full px-4 py-3 flex items-center gap-3 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors text-left"
               >
-                <FaComment className="text-blue-500" />
+                <MessageSquare className="text-blue-500" />
                 <div>
                   <div className="font-medium text-sm text-gray-900 dark:text-white">
                     Add Note
@@ -148,7 +148,7 @@
               onClick={handleFeedbackClick}
               className="w-full px-4 py-3 flex items-center gap-3 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors text-left"
             >
-              <FaLightbulb className="text-yellow-500" />
+              <Lightbulb className="text-yellow-500" />
               <div>
                 <div className="font-medium text-sm text-gray-900 dark:text-white">
                   Suggest Improvement

src/components/DocFeedbackNote.tsx

@@ -1,22 +1,21 @@
 import * as React from 'react'
 import { twMerge } from 'tailwind-merge'
-import {
-  FaComment,
-  FaLightbulb,
-  FaTrash,
-  FaChevronDown,
-  FaChevronUp,
-  FaSave,
-  FaTimes,
-} from 'react-icons/fa'
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 import {
   deleteDocFeedback,
   updateDocFeedback,
   updateDocFeedbackCollapsed,
 } from '~/utils/docFeedback.functions'
-import { useToast } from '~/components/ToastProvider'
 import type { DocFeedback } from '~/db/schema'
+import {
+  ChevronDown,
+  ChevronUp,
+  Lightbulb,
+  MessageSquare,
+  Save,
+  Trash,
+  X,
+} from 'lucide-react'
 
 interface DocFeedbackNoteProps {
   note: DocFeedback
@@ -42,13 +41,13 @@
 
   // Theme based on type
   const isImprovement = note.type === 'improvement'
-  const Icon = isImprovement ? FaLightbulb : FaComment
+  const Icon = isImprovement ? Lightbulb : MessageSquare
   const colors = isImprovement
     ? {
         bg: 'bg-yellow-50 dark:bg-yellow-900/20',
         border: 'border-yellow-400 dark:border-yellow-600',
         header: 'bg-yellow-100 dark:bg-yellow-900/30',
-        icon: 'text-yellow-600 dark:text-yellow-500',
+        icon: 'text-yellow-600 dark:text-yellow-500 text-[14px]',
         text: 'text-yellow-800 dark:text-yellow-300',
         timestamp: 'text-yellow-700 dark:text-yellow-400',
         deleteHover: 'hover:text-yellow-600 dark:hover:text-yellow-400',
@@ -57,7 +56,7 @@
         bg: 'bg-blue-50 dark:bg-blue-900/20',
         border: 'border-blue-400 dark:border-blue-600',
         header: 'bg-blue-100 dark:bg-blue-900/30',
-        icon: 'text-blue-600 dark:text-blue-500',
+        icon: 'text-blue-600 dark:text-blue-500 text-[14px]',
         text: 'text-blue-800 dark:text-blue-300',
         timestamp: 'text-blue-700 dark:text-blue-400',
         deleteHover: 'hover:text-blue-600 dark:hover:text-blue-400',
@@ -299,7 +298,7 @@
   }
 
   return (
     <div
       className={twMerge(
         inline ? 'w-full' : 'fixed z-40 w-80 max-w-[calc(100vw-2rem)]',
         'transition-all duration-200',
@@ -335,7 +334,7 @@
         )}
 
         {/* Header - always visible */}
         <div
           className={twMerge(
             `flex flex-col gap-1 p-2 ${colors.header}`,
             note.isCollapsed &&
@@ -377,7 +376,7 @@
                     title={isImprovement ? 'Delete improvement' : 'Delete note'}
                     disabled={isDeleting || isSaving}
                   >
-                    <FaTrash className="text-xs" />
+                    <Trash className="text-xs" />
                   </button>
                 </>
               )}
@@ -394,9 +393,9 @@
                 }
               >
                 {note.isCollapsed ? (
-                  <FaChevronDown className="text-xs" />
+                  <ChevronDown className="text-xs" />
                 ) : (
-                  <FaChevronUp className="text-xs" />
+                  <ChevronUp className="text-xs" />
                 )}
               </button>
             </div>
@@ -444,15 +443,15 @@
                   )}
                   disabled={isSaving}
                 >
-                  <FaSave className="text-[10px]" />
+                  <Save className="text-[10px]" />
                   {isSaving ? 'Saving...' : 'Save'}
                 </button>
                 <button
                   onClick={handleCancel}
                   className="px-3 py-1 text-xs font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white disabled:opacity-50"
                   disabled={isSaving}
                 >
-                  <FaTimes className="inline text-[10px] mr-1" />
+                  <X className="inline text-[10px] mr-1" />
                   Cancel
                 </button>
               </div>

src/components/DocFeedbackProvider.tsx

@@ -2,7 +2,6 @@ import * as React from 'react'
 import * as ReactDOM from 'react-dom'
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
 import { twMerge } from 'tailwind-merge'
-import { FaComment, FaLightbulb } from 'react-icons/fa'
 import { DocFeedbackNote } from './DocFeedbackNote'
 import { DocFeedbackFloatingButton } from './DocFeedbackFloatingButton'
 import { getDocFeedbackForPageQueryOptions } from '~/queries/docFeedback'
@@ -13,6 +12,7 @@ import {
   getBlockIdentifier,
 } from '~/utils/docFeedback.client'
 import type { DocFeedback } from '~/db/schema'
+import { Lightbulb, MessageSquare } from 'lucide-react'
 
 interface DocFeedbackProviderProps {
   children: React.ReactNode
@@ -536,21 +536,21 @@ function CreatingFeedbackNote({
 
   // Theme based on type
   const isImprovement = type === 'improvement'
-  const Icon = isImprovement ? FaLightbulb : FaComment
+  const Icon = isImprovement ? Lightbulb : MessageSquare
 
   const colors = isImprovement
     ? {
         bg: 'bg-yellow-50 dark:bg-yellow-900/20',
         border: 'border-yellow-400 dark:border-yellow-600',
         header: 'bg-yellow-100 dark:bg-yellow-900/30',
-        icon: 'text-yellow-600 dark:text-yellow-500',
+        icon: 'text-yellow-600 dark:text-yellow-500 text-[14px]',
         text: 'text-yellow-800 dark:text-yellow-300',
       }
     : {
         bg: 'bg-blue-50 dark:bg-blue-900/20',
         border: 'border-blue-400 dark:border-blue-600',
         header: 'bg-blue-100 dark:bg-blue-900/30',
-        icon: 'text-blue-600 dark:text-blue-500',
+        icon: 'text-blue-600 dark:text-blue-500 text-[14px]',
         text: 'text-blue-800 dark:text-blue-300',
       }