From 336d54236922422b1e556f60de77ef90c0465fd5 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Thu, 23 Apr 2026 15:02:18 +0000
Subject: [PATCH] feat(ui): add_model/litellm_model_name to shadcn Input

- @tremor TextInput/Text + antd Row/Col \u2192 shadcn Input + plain
  grid-cols-24 layout.
- antd Form.Item / AntSelect preserved (parent drives a full antd
  Form with Form.Item noStyle + shouldUpdate patterns).
- Text-gray helper line converted to plain <p> with text-muted-
  foreground.

Gates: TS \u2713 | Build \u2713 | Vitest 2/2 green for litellm_model_name tests.

Co-authored-by: yuneng-jiang <yuneng-berri@users.noreply.github.com>
---
 .../add_model/litellm_model_name.tsx          | 51 +++++++++++--------
 1 file changed, 29 insertions(+), 22 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/add_model/litellm_model_name.tsx b/ui/litellm-dashboard/src/components/add_model/litellm_model_name.tsx
index 56ecfcd3d76..e637a11ebd9 100644
--- a/ui/litellm-dashboard/src/components/add_model/litellm_model_name.tsx
+++ b/ui/litellm-dashboard/src/components/add_model/litellm_model_name.tsx
@@ -1,7 +1,6 @@
 import React from "react";
 import { Form, Select as AntSelect } from "antd";
-import { TextInput, Text } from "@tremor/react";
-import { Row, Col } from "antd";
+import { Input } from "@/components/ui/input";
 import { Providers } from "../provider_info_helpers";
 
 interface LiteLLMModelNameFieldProps {
@@ -79,6 +78,7 @@ const LiteLLMModelNameField: React.FC<LiteLLMModelNameFieldProps> = ({
 
     // Immediately update the model mappings
     const currentMappings = form.getFieldValue("model_mappings") || [];
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const updatedMappings = currentMappings.map((mapping: any) => {
       if (mapping.public_name === "custom" || mapping.litellm_model === "custom") {
         if (selectedProvider === Providers.Azure) {
@@ -118,12 +118,14 @@ const LiteLLMModelNameField: React.FC<LiteLLMModelNameFieldProps> = ({
           {selectedProvider === Providers.Azure ||
           selectedProvider === Providers.OpenAI_Compatible ||
           selectedProvider === Providers.Ollama ? (
-            <>
-              <TextInput
-                placeholder={getPlaceholder(selectedProvider)}
-                onChange={selectedProvider === Providers.Azure ? handleAzureDeploymentNameChange : undefined}
-              />
-            </>
+            <Input
+              placeholder={getPlaceholder(selectedProvider)}
+              onChange={
+                selectedProvider === Providers.Azure
+                  ? handleAzureDeploymentNameChange
+                  : undefined
+              }
+            />
           ) : providerModels.length > 0 ? (
             <AntSelect
               data-testid="model-name-select"
@@ -151,7 +153,7 @@ const LiteLLMModelNameField: React.FC<LiteLLMModelNameFieldProps> = ({
               style={{ width: "100%" }}
             />
           ) : (
-            <TextInput placeholder={getPlaceholder(selectedProvider)} />
+            <Input placeholder={getPlaceholder(selectedProvider)} />
           )}
         </Form.Item>
 
@@ -164,12 +166,19 @@ const LiteLLMModelNameField: React.FC<LiteLLMModelNameFieldProps> = ({
               modelArray.includes("custom") && (
                 <Form.Item
                   name="custom_model_name"
-                  rules={[{ required: true, message: "Please enter a custom model name." }]}
+                  rules={[
+                    {
+                      required: true,
+                      message: "Please enter a custom model name.",
+                    },
+                  ]}
                   className="mt-2"
                 >
-                  <TextInput
+                  <Input
                     placeholder={
-                      selectedProvider === Providers.Azure ? "Enter Azure deployment name" : "Enter custom model name"
+                      selectedProvider === Providers.Azure
+                        ? "Enter Azure deployment name"
+                        : "Enter custom model name"
                     }
                     onChange={handleCustomModelNameChange}
                   />
@@ -179,16 +188,14 @@ const LiteLLMModelNameField: React.FC<LiteLLMModelNameFieldProps> = ({
           }}
         </Form.Item>
       </Form.Item>
-      <Row>
-        <Col span={10}></Col>
-        <Col span={14}>
-          <Text className="mb-3 mt-1">
-            {selectedProvider === Providers.Azure
-              ? "Your deployment name will be saved as the public model name, and LiteLLM will use 'azure/deployment-name' internally"
-              : "The model name LiteLLM will send to the LLM API"}
-          </Text>
-        </Col>
-      </Row>
+      <div className="grid grid-cols-24 gap-2">
+        <div className="col-span-10" />
+        <p className="col-span-14 mb-3 mt-1 text-sm text-muted-foreground">
+          {selectedProvider === Providers.Azure
+            ? "Your deployment name will be saved as the public model name, and LiteLLM will use 'azure/deployment-name' internally"
+            : "The model name LiteLLM will send to the LLM API"}
+        </p>
+      </div>
     </>
   );
 };