Replace UI icons with Tabler

components.json

@@ -17,5 +17,5 @@
     "lib": "@/lib",
     "hooks": "@/hooks"
   },
-  "iconLibrary": "lucide"
+  "iconLibrary": "tabler"
 }

components/account-settings-dialog.tsx

@@ -5,7 +5,12 @@ import { useRouter } from 'next/navigation'
 import { useTheme } from 'next-themes'
 
 import type { User } from '@supabase/supabase-js'
-import { Laptop, Moon, Sun, Trash2 } from 'lucide-react'
+import {
+  IconDeviceLaptop as Laptop,
+  IconMoon as Moon,
+  IconSun as Sun,
+  IconTrash as Trash2
+} from '@tabler/icons-react'
 import { toast } from 'sonner'
 
 import { deleteAccount } from '@/lib/actions/account'

components/action-buttons.tsx

@@ -3,13 +3,13 @@
 import { useEffect, useRef, useState } from 'react'
 
 import {
-  FileText,
-  HelpCircle,
-  LucideIcon,
-  Newspaper,
-  Scale,
-  Search
-} from 'lucide-react'
+  IconFileText as FileText,
+  IconHelpCircle as HelpCircle,
+  IconNews as Newspaper,
+  IconScale as Scale,
+  IconSearch as Search,
+  type TablerIcon
+} from '@tabler/icons-react'
 
 import { cn } from '@/lib/utils'
 
@@ -19,7 +19,7 @@ import { Button } from './ui/button'
 const FOCUS_OUT_DELAY_MS = 100 // Delay to ensure focus has actually moved
 
 interface ActionCategory {
-  icon: LucideIcon
+  icon: TablerIcon
   label: string
   key: string
 }

components/app-sidebar.tsx

@@ -1,7 +1,7 @@
 import { Suspense } from 'react'
 import Link from 'next/link'
 
-import { Plus } from 'lucide-react'
+import { IconPlus as Plus } from '@tabler/icons-react'
 
 import { cn } from '@/lib/utils'
 

components/chat-error.tsx

@@ -1,4 +1,4 @@
-import { AlertCircle } from 'lucide-react'
+import { IconAlertCircle as AlertCircle } from '@tabler/icons-react'
 
 import { toPublicErrorPayload } from '@/lib/errors/public-error'
 

components/chat-panel.tsx

@@ -11,7 +11,12 @@ import Textarea from 'react-textarea-autosize'
 import { useRouter } from 'next/navigation'
 
 import { UseChatHelpers } from '@ai-sdk/react'
-import { ArrowUp, ChevronDown, MessageCirclePlus, Square } from 'lucide-react'
+import {
+  IconArrowUp as ArrowUp,
+  IconChevronDown as ChevronDown,
+  IconMessageCirclePlus as MessageCirclePlus,
+  IconSquare as Square
+} from '@tabler/icons-react'
 import { toast } from 'sonner'
 
 import { SHORTCUT_EVENTS } from '@/lib/keyboard-shortcuts'

components/chat-share.tsx

@@ -2,7 +2,7 @@
 
 import { useState, useTransition } from 'react'
 
-import { Share } from 'lucide-react'
+import { IconShare as Share } from '@tabler/icons-react'
 import { toast } from 'sonner'
 
 import { shareChat } from '@/lib/actions/chat'

components/collapsible-message.tsx

@@ -1,4 +1,4 @@
-import { ChevronDown } from 'lucide-react'
+import { IconChevronDown as ChevronDown } from '@tabler/icons-react'
 
 import { cn } from '@/lib/utils'
 

components/current-user-avatar.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { User2 } from 'lucide-react'
+import { IconUser as User2 } from '@tabler/icons-react'
 
 import { useCurrentUserImage } from '@/hooks/use-current-user-image'
 import { useCurrentUserName } from '@/hooks/use-current-user-name'

components/drag-overlay.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { UploadCloud } from 'lucide-react'
+import { IconCloudUpload as UploadCloud } from '@tabler/icons-react'
 
 import { cn } from '@/lib/utils'
 

components/error-modal.tsx

@@ -2,7 +2,11 @@
 
 import Link from 'next/link'
 
-import { AlertCircle, Clock, RefreshCw } from 'lucide-react'
+import {
+  IconAlertCircle as AlertCircle,
+  IconClock as Clock,
+  IconRefresh as RefreshCw
+} from '@tabler/icons-react'
 
 import { Button } from '@/components/ui/button'
 import {

components/external-link-items.tsx

@@ -1,25 +1,30 @@
 'use client'
 
-import { SiDiscord, SiGithub, SiX } from 'react-icons/si'
 import Link from 'next/link'
 
+import {
+  IconBrandDiscord as SiDiscord,
+  IconBrandGithub as SiGithub,
+  IconBrandX as SiX
+} from '@tabler/icons-react'
+
 import { DropdownMenuItem } from '@/components/ui/dropdown-menu'
 
 const externalLinks = [
   {
     name: 'X',
     href: 'https://x.com/morphic_ai',
-    icon: <SiX className="mr-2 h-4 w-4" />
+    icon: <SiX className="size-4" />
   },
   {
     name: 'Discord',
     href: 'https://discord.gg/zRxaseCuGq',
-    icon: <SiDiscord className="mr-2 h-4 w-4" />
+    icon: <SiDiscord className="size-4" />
   },
   {
     name: 'GitHub',
     href: 'https://git.new/morphic',
-    icon: <SiGithub className="mr-2 h-4 w-4" />
+    icon: <SiGithub className="size-4" />
   }
 ]
 

components/feedback-modal.tsx

@@ -2,7 +2,11 @@
 
 import { useState, useTransition } from 'react'
 
-import { Frown, Meh, Smile } from 'lucide-react'
+import {
+  IconMoodNeutral as Meh,
+  IconMoodSad as Frown,
+  IconMoodSmile as Smile
+} from '@tabler/icons-react'
 import { toast } from 'sonner'
 
 import { submitFeedback } from '@/lib/actions/site-feedback'

components/fetch-section.tsx

@@ -1,7 +1,12 @@
 'use client'
 
 import { UseChatHelpers } from '@ai-sdk/react'
-import { AlertCircle, Check, ExternalLink, Globe } from 'lucide-react'
+import {
+  IconAlertCircle as AlertCircle,
+  IconCheck as Check,
+  IconExternalLink as ExternalLink,
+  IconWorld as Globe
+} from '@tabler/icons-react'
 
 import { toPublicErrorPayload } from '@/lib/errors/public-error'
 import { SearchResults as SearchResultsType } from '@/lib/types'

components/file-upload-button.tsx

@@ -2,7 +2,7 @@
 
 import { useRef, useState } from 'react'
 
-import { Paperclip } from 'lucide-react'
+import { IconPaperclip as Paperclip } from '@tabler/icons-react'
 import { toast } from 'sonner'
 
 import { cn } from '@/lib/utils'

components/guest-menu.tsx

@@ -3,11 +3,11 @@
 import Link from 'next/link'
 
 import {
-  Link2,
-  LogIn,
-  Palette,
-  Settings2 // Or EllipsisVertical, etc.
-} from 'lucide-react'
+  IconLink as Link2,
+  IconLogin as LogIn,
+  IconPalette as Palette,
+  IconSettings as Settings2
+} from '@tabler/icons-react'
 
 import { Button } from '@/components/ui/button'
 import {
@@ -29,21 +29,21 @@ export default function GuestMenu() {
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button variant="ghost" size="icon" className="size-6">
-          <Settings2 className="size-4" /> {/* Choose an icon */}
+          <Settings2 className="size-4" />
           <span className="sr-only">Open menu</span>
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent className="w-56" align="end" forceMount>
         <DropdownMenuItem asChild>
           <Link href="/auth/login">
-            <LogIn className="mr-2 h-4 w-4" />
+            <LogIn className="size-4" />
             <span>Sign In</span>
           </Link>
         </DropdownMenuItem>
         <DropdownMenuSeparator />
         <DropdownMenuSub>
           <DropdownMenuSubTrigger>
-            <Palette className="mr-2 h-4 w-4" />
+            <Palette className="size-4" />
             <span>Theme</span>
           </DropdownMenuSubTrigger>
           <DropdownMenuSubContent>
@@ -52,7 +52,7 @@ export default function GuestMenu() {
         </DropdownMenuSub>
         <DropdownMenuSub>
           <DropdownMenuSubTrigger>
-            <Link2 className="mr-2 h-4 w-4" />
+            <Link2 className="size-4" />
             <span>Links</span>
           </DropdownMenuSubTrigger>
           <DropdownMenuSubContent>

components/inspector/inspector-panel.tsx

@@ -1,6 +1,12 @@
 'use client'
 
-import { LightbulbIcon, ListTodo, MessageSquare, Search, X } from 'lucide-react'
+import {
+  IconBulb as LightbulbIcon,
+  IconListCheck as ListTodo,
+  IconMessage as MessageSquare,
+  IconSearch as Search,
+  IconX as X
+} from '@tabler/icons-react'
 
 import { Separator } from '@/components/ui/separator'
 import { TooltipProvider } from '@/components/ui/tooltip'

components/message-actions.tsx

@@ -3,7 +3,11 @@
 import { useMemo, useState } from 'react'
 
 import { UseChatHelpers } from '@ai-sdk/react'
-import { Copy, ThumbsDown, ThumbsUp } from 'lucide-react'
+import {
+  IconCopy as Copy,
+  IconThumbDown as ThumbsDown,
+  IconThumbUp as ThumbsUp
+} from '@tabler/icons-react'
 import { toast } from 'sonner'
 
 import { stripSpecBlocks } from '@/lib/render/strip-spec-blocks'

components/model-selector-client.tsx

@@ -3,7 +3,10 @@
 import { useMemo, useState } from 'react'
 import Image from 'next/image'
 
-import { Check, ChevronDown } from 'lucide-react'
+import {
+  IconCheck as Check,
+  IconChevronDown as ChevronDown
+} from '@tabler/icons-react'
 
 import {
   MODEL_SELECTION_COOKIE,

components/question-confirmation.tsx

@@ -2,7 +2,11 @@
 
 import { useState } from 'react'
 
-import { ArrowRight, Check, SkipForward } from 'lucide-react'
+import {
+  IconArrowRight as ArrowRight,
+  IconCheck as Check,
+  IconPlayerTrackNext as SkipForward
+} from '@tabler/icons-react'
 
 import type { ToolPart } from '@/lib/types/ai'
 

components/research-process-section.tsx

@@ -4,7 +4,10 @@ import { useCallback, useState } from 'react'
 
 import type { ReasoningPart } from '@ai-sdk/provider-utils'
 import { UseChatHelpers } from '@ai-sdk/react'
-import { ChevronDown, Waypoints } from 'lucide-react'
+import {
+  IconChevronDown as ChevronDown,
+  IconRoute as Waypoints
+} from '@tabler/icons-react'
 
 import type { ToolPart, UIDataTypes, UIMessage, UITools } from '@/lib/types/ai'
 import type { DynamicToolPart } from '@/lib/types/dynamic-tools'

components/retry-button.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { RotateCcw } from 'lucide-react'
+import { IconRefresh as RotateCcw } from '@tabler/icons-react'
 
 import { Button } from './ui/button'
 

components/search-mode-selector.tsx

@@ -2,7 +2,10 @@
 
 import { useEffect, useState, useSyncExternalStore } from 'react'
 
-import { Check, ChevronDown } from 'lucide-react'
+import {
+  IconCheck as Check,
+  IconChevronDown as ChevronDown
+} from '@tabler/icons-react'
 
 import { SEARCH_MODE_CONFIGS } from '@/lib/config/search-modes'
 import { SearchMode } from '@/lib/types/search'

components/search-results-image.tsx

@@ -11,7 +11,7 @@ import {
   useState
 } from 'react'
 
-import { Images } from 'lucide-react'
+import { IconPhoto as Images } from '@tabler/icons-react'
 
 import { SearchResultImage } from '@/lib/types'