From 45daa53b63e5cb50ae3253870bff3645eff29795 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Thu, 23 Apr 2026 21:04:16 +0000
Subject: [PATCH] feat(ui): ModelSelect/ModelSelect Tooltip + Skeleton to
 shadcn

- antd Skeleton/Tooltip \u2192 shadcn Skeleton/Tooltip. Dropped the
  unused optionRender helper.
- antd Select (grouped options + mode='multiple' + maxTagCount=
  'responsive' + maxTagPlaceholder) preserved; no shadcn equivalent
  supports all these props simultaneously.

Gates: TS \u2713 | Build \u2713.

Co-authored-by: yuneng-jiang <yuneng-berri@users.noreply.github.com>
---
 .../components/ModelSelect/ModelSelect.tsx    | 31 ++++++++++++-------
 1 file changed, 19 insertions(+), 12 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/ModelSelect/ModelSelect.tsx b/ui/litellm-dashboard/src/components/ModelSelect/ModelSelect.tsx
index 74b2619f7f3..0cab4f4618a 100644
--- a/ui/litellm-dashboard/src/components/ModelSelect/ModelSelect.tsx
+++ b/ui/litellm-dashboard/src/components/ModelSelect/ModelSelect.tsx
@@ -2,7 +2,14 @@ import { ProxyModel, useAllProxyModels } from "@/app/(dashboard)/hooks/models/us
 import { useOrganization } from "@/app/(dashboard)/hooks/organizations/useOrganizations";
 import { useTeam } from "@/app/(dashboard)/hooks/teams/useTeams";
 import { useCurrentUser } from "@/app/(dashboard)/hooks/users/useCurrentUser";
-import { Select, Skeleton, Tooltip, type SelectProps } from "antd";
+import { Select } from "antd";
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { Organization, Team } from "../networking";
 import { splitWildcardModels } from "./modelUtils";
 
@@ -106,13 +113,9 @@ export const ModelSelect = (props: ModelSelectProps) => {
     (organizationHasAllProxyModels && includeSpecialOptions) || context === "global";
 
   if (isLoading) {
-    return <Skeleton.Input active block />;
+    return <Skeleton className="h-10 w-full" />;
   }
 
-  const optionRender: NonNullable<SelectProps["optionRender"]> = (option) => {
-    return <span>{option.label}</span>;
-  };
-
   const handleChange = (values: string[]) => {
     const specialValues = values.filter(isSpecialOption);
 
@@ -204,12 +207,16 @@ export const ModelSelect = (props: ModelSelectProps) => {
       allowClear
       maxTagCount="responsive"
       maxTagPlaceholder={(omittedValues) => (
-        <Tooltip
-          styles={{ root: { pointerEvents: "none" } }}
-          title={omittedValues.map(({ value }) => value).join(", ")}
-        >
-          <span>+{omittedValues.length} more</span>
-        </Tooltip>
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span>+{omittedValues.length} more</span>
+            </TooltipTrigger>
+            <TooltipContent>
+              {omittedValues.map(({ value }) => value).join(", ")}
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
       )}
     />
   );