From fc8a6b2a8d8537c3a564fa863a71f001855b5901 Mon Sep 17 00:00:00 2001
From: ryan-crabbe-berri <ryan@berri.ai>
Date: Wed, 19 Aug 2026 17:25:09 -0700
Subject: [PATCH] refactor(ui): migrate shared primitives and common components
 off antd (#37521)

* refactor(ui): migrate shared primitives and common components off antd

Adds the success variant to the shared Alert plus success, warning and
info variants to Badge, introduces UtcDateTimeInput to replace antd's
DatePicker, and converts the common components and key/team helpers onto
the shadcn primitives.

* fix(ui): keep MultiSelect and budget input faithful to their antd behaviour

Restore the clear-all control MultiSelect lost, split comma-separated
custom entries into one value per token, and stop rounding the budget
input on every keystroke so a fractional amount survives typing.

* test(ui): drive the access group picker through the migrated MultiSelect

AccessGroupSelector no longer renders an antd Select, so the placeholder
is an input label rather than a text node and the popup inerts the page
until it closes.
---
 ui/litellm-dashboard/eslint-suppressions.json | 58 +-------------
 .../components/UsagePageView.test.tsx         |  4 +-
 .../common_components/AccessGroupSelector.tsx | 55 ++++---------
 .../RateLimitTypeFormItem.test.tsx            | 34 ++------
 .../check_openapi_schema.tsx                  | 50 ++++++++----
 .../user_search_modal.test.tsx                |  2 +-
 .../BudgetFallbacksEditor.tsx                 | 46 ++++-------
 .../key_team_helpers/BudgetWindowsEditor.tsx  | 53 ++++++++----
 .../create_key_button.integration.test.tsx    |  9 +--
 .../src/components/shared/Alert.test.tsx      | 80 +++++++++++++++++++
 .../src/components/shared/Alert.tsx           | 11 ++-
 .../components/shared/MultiSelect.test.tsx    | 25 ++++++
 .../src/components/shared/MultiSelect.tsx     | 23 +++++-
 .../shared/PaginatedSearchSelect.tsx          |  4 +-
 .../src/components/shared/SearchSelect.tsx    |  7 ++
 .../src/components/ui/badge.tsx               |  4 +-
 .../src/contexts/AntdGlobalProvider.tsx       |  7 +-
 17 files changed, 266 insertions(+), 206 deletions(-)
 create mode 100644 ui/litellm-dashboard/src/components/shared/Alert.test.tsx

diff --git a/ui/litellm-dashboard/eslint-suppressions.json b/ui/litellm-dashboard/eslint-suppressions.json
index 31e8f81f3b3..d625cca0c60 100644
--- a/ui/litellm-dashboard/eslint-suppressions.json
+++ b/ui/litellm-dashboard/eslint-suppressions.json
@@ -542,11 +542,6 @@
       "count": 1
     }
   },
-  "src/app/(dashboard)/mcp-servers/_components/EnvVarsSection.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "src/app/(dashboard)/mcp-servers/_components/IdJagFormFields.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -647,9 +642,6 @@
   "src/app/(dashboard)/mcp-servers/_components/UserEnvVarsModal.tsx": {
     "no-nested-ternary": {
       "count": 2
-    },
-    "no-restricted-imports": {
-      "count": 1
     }
   },
   "src/app/(dashboard)/mcp-servers/_components/index.tsx": {
@@ -661,9 +653,6 @@
     "local/filename-pascal-case": {
       "count": 1
     },
-    "no-restricted-imports": {
-      "count": 1
-    },
     "react-hooks/static-components": {
       "count": 4
     }
@@ -1475,11 +1464,6 @@
       "count": 1
     }
   },
-  "src/components/Settings/AdminSettings/LoggingSettings/LoggingSettings.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "src/components/Settings/AdminSettings/MCPSemanticFilterSettings/MCPSemanticFilterSettings.tsx": {
     "no-nested-ternary": {
       "count": 1
@@ -1506,11 +1490,6 @@
       "count": 1
     }
   },
-  "src/components/Settings/AdminSettings/SSOSettings/RoleMappings.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "src/components/Settings/AdminSettings/UISettings/PageVisibilitySettings.tsx": {
     "react-hooks/set-state-in-render": {
       "count": 1
@@ -1590,9 +1569,6 @@
   "src/components/VirtualKeysPage/keyTableColumns.tsx": {
     "local/filename-pascal-case": {
       "count": 1
-    },
-    "no-restricted-imports": {
-      "count": 1
     }
   },
   "src/components/activity_metrics.tsx": {
@@ -1603,11 +1579,6 @@
       "count": 1
     }
   },
-  "src/components/add_model/AdaptiveRoutingConfig.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "src/components/add_model/AddModelForm.test.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -1620,26 +1591,6 @@
     "no-nested-ternary": {
       "count": 1
     },
-    "no-restricted-imports": {
-      "count": 2
-    }
-  },
-  "src/components/add_model/ClassificationMethodConfig.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
-  "src/components/add_model/ComplexityRouterConfig.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
-  "src/components/add_model/EscalationKeywords.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
-  "src/components/add_model/KeywordTierRules.tsx": {
     "no-restricted-imports": {
       "count": 1
     }
@@ -1649,11 +1600,6 @@
       "count": 1
     }
   },
-  "src/components/add_model/SemanticKeywordMatching.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "src/components/add_model/add_auto_router_tab.tsx": {
     "local/filename-pascal-case": {
       "count": 1
@@ -1672,7 +1618,7 @@
       "count": 1
     },
     "no-restricted-imports": {
-      "count": 3
+      "count": 1
     }
   },
   "src/components/add_model/auto_router_connection_test.tsx": {
@@ -2078,7 +2024,7 @@
   },
   "src/components/model_add/CredentialModal.tsx": {
     "no-restricted-imports": {
-      "count": 2
+      "count": 1
     }
   },
   "src/components/model_add/reuse_credentials.tsx": {
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/UsagePageView.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/UsagePageView.test.tsx
index a6f46ee8242..118371aa9ac 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/UsagePageView.test.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/UsagePageView.test.tsx
@@ -971,8 +971,8 @@ describe("UsagePage", () => {
         expect(mockUserDailyActivityCall).toHaveBeenCalled();
       });
 
-      // Should still render the data from the paginated fallback
-      expect(screen.getByText("1,500")).toBeInTheDocument();
+      // Should still render the data from the paginated fallback, which lands a render after the call
+      expect(await screen.findByText("1,500")).toBeInTheDocument();
     });
 
     it("should stop showing the previous range's paginated pages while a new range is in flight", async () => {
diff --git a/ui/litellm-dashboard/src/components/common_components/AccessGroupSelector.tsx b/ui/litellm-dashboard/src/components/common_components/AccessGroupSelector.tsx
index 96f21f30385..e522e7c7e62 100644
--- a/ui/litellm-dashboard/src/components/common_components/AccessGroupSelector.tsx
+++ b/ui/litellm-dashboard/src/components/common_components/AccessGroupSelector.tsx
@@ -1,6 +1,7 @@
 import React from "react";
-import { Select, Skeleton } from "antd";
 import { Users } from "lucide-react";
+import { Skeleton } from "@/components/ui/skeleton";
+import { MultiSelect, type MultiSelectOption } from "@/components/shared/MultiSelect";
 import { useAccessGroups, AccessGroupResponse } from "@/app/(dashboard)/hooks/accessGroups/useAccessGroups";
 
 export interface AccessGroupSelectorProps {
@@ -12,8 +13,6 @@ export interface AccessGroupSelectorProps {
   className?: string;
   showLabel?: boolean;
   labelText?: string;
-  /** Allow clearing the selection */
-  allowClear?: boolean;
 }
 
 /**
@@ -32,7 +31,6 @@ const AccessGroupSelector: React.FC<AccessGroupSelectorProps> = ({
   className,
   showLabel = false,
   labelText = "Access Group",
-  allowClear = true,
 }) => {
   const { data: accessGroups, isLoading, isError } = useAccessGroups();
 
@@ -45,22 +43,16 @@ const AccessGroupSelector: React.FC<AccessGroupSelectorProps> = ({
             <Users className="mr-2 size-4" /> {labelText}
           </p>
         )}
-        <Skeleton.Input active block style={{ height: 32, ...style }} />
+        <Skeleton className="h-8 w-full" style={style} />
       </div>
     );
   }
 
   // ── Build options ────────────────────────────────────────────────────────
-  const options = (accessGroups ?? []).map((group: AccessGroupResponse) => ({
-    label: (
-      <span>
-        <span className="font-medium">{group.access_group_name}</span>{" "}
-        <span className="text-xs text-muted-foreground">({group.access_group_id})</span>
-      </span>
-    ),
+  const options: MultiSelectOption[] = (accessGroups ?? []).map((group: AccessGroupResponse) => ({
+    label: group.access_group_name,
     value: group.access_group_id,
-    selectedLabel: group.access_group_name,
-    searchText: `${group.access_group_name} ${group.access_group_id}`,
+    description: group.access_group_id,
   }));
 
   // ── Render ───────────────────────────────────────────────────────────────
@@ -71,30 +63,17 @@ const AccessGroupSelector: React.FC<AccessGroupSelectorProps> = ({
           <Users className="mr-2 size-4" /> {labelText}
         </p>
       )}
-      <Select
-        mode="multiple"
-        value={value}
-        placeholder={placeholder}
-        onChange={onChange}
-        disabled={disabled}
-        allowClear={allowClear}
-        showSearch
-        style={{ width: "100%", ...style }}
-        className={`rounded-md ${className ?? ""}`}
-        notFoundContent={
-          isError ? <span className="text-destructive">Failed to load access groups</span> : "No access groups found"
-        }
-        filterOption={(input, option) => {
-          const searchText = options.find((opt) => opt.value === option?.value)?.searchText ?? "";
-          return searchText.toLowerCase().includes(input.toLowerCase());
-        }}
-        optionLabelProp="selectedLabel"
-        options={options.map((opt) => ({
-          label: opt.label,
-          value: opt.value,
-          selectedLabel: opt.selectedLabel,
-        }))}
-      />
+      <div style={style}>
+        <MultiSelect
+          options={options}
+          value={value}
+          onValueChange={onChange ?? (() => {})}
+          placeholder={placeholder}
+          emptyText={isError ? "Failed to load access groups" : "No access groups found"}
+          disabled={disabled}
+          className={`w-full rounded-md ${className ?? ""}`}
+        />
+      </div>
     </div>
   );
 };
diff --git a/ui/litellm-dashboard/src/components/common_components/RateLimitTypeFormItem.test.tsx b/ui/litellm-dashboard/src/components/common_components/RateLimitTypeFormItem.test.tsx
index 617dd4189f7..5b612c4c2eb 100644
--- a/ui/litellm-dashboard/src/components/common_components/RateLimitTypeFormItem.test.tsx
+++ b/ui/litellm-dashboard/src/components/common_components/RateLimitTypeFormItem.test.tsx
@@ -1,57 +1,33 @@
 import { renderWithProviders, screen } from "../../../tests/test-utils";
 import userEvent from "@testing-library/user-event";
 import { vi } from "vitest";
-import { Form } from "antd";
-import React from "react";
 import { RateLimitTypeFormItem } from "./RateLimitTypeFormItem";
 
-const Wrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => <Form>{children}</Form>;
-
 describe("RateLimitTypeFormItem", () => {
   it("should render", () => {
-    renderWithProviders(
-      <Wrapper>
-        <RateLimitTypeFormItem type="tpm" name="tpm_type" />
-      </Wrapper>,
-    );
+    renderWithProviders(<RateLimitTypeFormItem type="tpm" name="tpm_type" />);
     expect(screen.getByText(/TPM Rate Limit Type/)).toBeInTheDocument();
   });
 
   it("should display TPM label for tpm type", () => {
-    renderWithProviders(
-      <Wrapper>
-        <RateLimitTypeFormItem type="tpm" name="tpm_type" />
-      </Wrapper>,
-    );
+    renderWithProviders(<RateLimitTypeFormItem type="tpm" name="tpm_type" />);
     expect(screen.getByText(/TPM Rate Limit Type/)).toBeInTheDocument();
   });
 
   it("should display RPM label for rpm type", () => {
-    renderWithProviders(
-      <Wrapper>
-        <RateLimitTypeFormItem type="rpm" name="rpm_type" />
-      </Wrapper>,
-    );
+    renderWithProviders(<RateLimitTypeFormItem type="rpm" name="rpm_type" />);
     expect(screen.getByText(/RPM Rate Limit Type/)).toBeInTheDocument();
   });
 
   it("should show the select placeholder by default", () => {
-    renderWithProviders(
-      <Wrapper>
-        <RateLimitTypeFormItem type="tpm" name="tpm_type" />
-      </Wrapper>,
-    );
+    renderWithProviders(<RateLimitTypeFormItem type="tpm" name="tpm_type" />);
     expect(screen.getByText("Select rate limit type")).toBeInTheDocument();
   });
 
   it("should call onChange when provided", async () => {
     const user = userEvent.setup();
     const onChange = vi.fn();
-    renderWithProviders(
-      <Wrapper>
-        <RateLimitTypeFormItem type="tpm" name="tpm_type" onChange={onChange} />
-      </Wrapper>,
-    );
+    renderWithProviders(<RateLimitTypeFormItem type="tpm" name="tpm_type" onChange={onChange} />);
     await user.click(screen.getByRole("combobox"));
     await user.click(screen.getByText("Guaranteed throughput"));
     expect(onChange).toHaveBeenCalledWith("guaranteed_throughput");
diff --git a/ui/litellm-dashboard/src/components/common_components/check_openapi_schema.tsx b/ui/litellm-dashboard/src/components/common_components/check_openapi_schema.tsx
index 778198b4ec2..cdeef9acbf7 100644
--- a/ui/litellm-dashboard/src/components/common_components/check_openapi_schema.tsx
+++ b/ui/litellm-dashboard/src/components/common_components/check_openapi_schema.tsx
@@ -1,8 +1,9 @@
 import React, { useState, useEffect } from "react";
-import { Input as AntdInput, InputNumber, Select } from "antd";
 import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Info } from "lucide-react";
-import { Tooltip } from "antd";
+import { SimpleTooltip } from "@/components/ui/tooltip";
 import type { UseFormSetValue } from "react-hook-form";
 import { getOpenAPISchema } from "../networking";
 import { formatLabel } from "@/utils/textUtils";
@@ -57,6 +58,13 @@ const validateJSON = (value: string): boolean => {
 
 const isBlank = (value: unknown): boolean => value === undefined || value === null || value === "";
 
+const toSchemaNumber = (raw: string, isInteger: boolean): number | null => {
+  if (raw === "") return null;
+  const parsed = Number(raw);
+  if (!Number.isFinite(parsed)) return null;
+  return isInteger ? Math.trunc(parsed) : parsed;
+};
+
 const messageOf = (error: unknown): string => (error instanceof Error ? error.message : String(error));
 
 const getFieldHelp = (key: string, property: SchemaProperty, type: string): string => {
@@ -182,9 +190,9 @@ const SchemaFormFields: React.FC<SchemaFormFieldsProps> = ({
     const formLabel = tooltip ? (
       <span>
         {label}{" "}
-        <Tooltip title={tooltip}>
+        <SimpleTooltip content={tooltip}>
           <Info className="ml-1 inline size-3.5 align-text-bottom" />
-        </Tooltip>
+        </SimpleTooltip>
       </span>
     ) : (
       label
@@ -204,7 +212,7 @@ const SchemaFormFields: React.FC<SchemaFormFieldsProps> = ({
         {(control) => {
           if (isJSONField(key, property)) {
             return (
-              <AntdInput.TextArea
+              <Textarea
                 {...control}
                 value={control.value as string | undefined}
                 rows={4}
@@ -215,22 +223,34 @@ const SchemaFormFields: React.FC<SchemaFormFieldsProps> = ({
           }
           if (property.enum) {
             return (
-              <Select {...control} value={control.value as string | undefined}>
-                {property.enum.map((value) => (
-                  <Select.Option key={value} value={value}>
-                    {value}
-                  </Select.Option>
-                ))}
+              <Select value={(control.value as string | undefined) ?? null} onValueChange={control.onChange}>
+                <SelectTrigger
+                  id={control.id}
+                  onBlur={control.onBlur}
+                  aria-invalid={control["aria-invalid"]}
+                  className="w-full"
+                >
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {property.enum.map((value) => (
+                    <SelectItem key={value} value={value}>
+                      {value}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
               </Select>
             );
           }
           if (type === "number" || type === "integer") {
             return (
-              <InputNumber
+              <Input
                 {...control}
-                value={control.value as number | undefined}
-                style={{ width: "100%" }}
-                precision={type === "integer" ? 0 : undefined}
+                type="number"
+                step={type === "integer" ? 1 : "any"}
+                value={(control.value as number | undefined) ?? ""}
+                onChange={(event) => control.onChange(toSchemaNumber(event.target.value, type === "integer"))}
+                className="w-full"
               />
             );
           }
diff --git a/ui/litellm-dashboard/src/components/common_components/user_search_modal.test.tsx b/ui/litellm-dashboard/src/components/common_components/user_search_modal.test.tsx
index cf4461a2b7a..e320a90f01a 100644
--- a/ui/litellm-dashboard/src/components/common_components/user_search_modal.test.tsx
+++ b/ui/litellm-dashboard/src/components/common_components/user_search_modal.test.tsx
@@ -74,7 +74,7 @@ describe("UserSearchModal", () => {
     expect(notice).toHaveTextContent(/users that already exist/i);
     expect(notice).toHaveTextContent(/ask a proxy admin to create their account first/i);
     // info, not warning: a warning here would read as an error state on an empty form
-    expect(notice.className).toMatch(/text-info/);
+    expect(notice).toHaveAttribute("data-variant", "info");
   });
 });
 
diff --git a/ui/litellm-dashboard/src/components/key_team_helpers/BudgetFallbacksEditor.tsx b/ui/litellm-dashboard/src/components/key_team_helpers/BudgetFallbacksEditor.tsx
index 1d327b87346..4e1c17a4c68 100644
--- a/ui/litellm-dashboard/src/components/key_team_helpers/BudgetFallbacksEditor.tsx
+++ b/ui/litellm-dashboard/src/components/key_team_helpers/BudgetFallbacksEditor.tsx
@@ -1,5 +1,5 @@
-import { SimpleTooltip } from "@/components/ui/tooltip";
-import { Select } from "antd";
+import { MultiSelect } from "@/components/shared/MultiSelect";
+import { SearchSelect } from "@/components/shared/SearchSelect";
 import { Button } from "@/components/ui/button";
 import { ArrowDown, Plus, X } from "lucide-react";
 import React, { useState } from "react";
@@ -94,18 +94,15 @@ export function BudgetFallbacksEditor({ value, onChange, availableModels }: Budg
 
             <div className="mb-3">
               <label className="block text-xs font-medium text-gray-600 mb-1">Primary Model</label>
-              <Select
-                className="w-full"
-                placeholder="Select model"
-                value={entry.primaryModel}
-                onChange={(v) => {
-                  const newFallbacks = entry.fallbackModels.filter((m) => m !== v);
-                  updateEntry(entry.id, { primaryModel: v, fallbackModels: newFallbacks });
-                }}
-                showSearch
-                filterOption={(input, option) => (option?.label ?? "").toLowerCase().includes(input.toLowerCase())}
+              <SearchSelect
                 options={availablePrimaryOptions.map((m) => ({ label: m, value: m }))}
-                getPopupContainer={(trigger) => trigger.parentElement || document.body}
+                value={entry.primaryModel ?? ""}
+                onValueChange={(v) => {
+                  const newFallbacks = entry.fallbackModels.filter((m) => m !== v);
+                  updateEntry(entry.id, { primaryModel: v === "" ? null : v, fallbackModels: newFallbacks });
+                }}
+                placeholder="Select model"
+                emptyText="No models found"
               />
             </div>
 
@@ -118,23 +115,14 @@ export function BudgetFallbacksEditor({ value, onChange, availableModels }: Budg
 
             <div>
               <label className="block text-xs font-medium text-gray-600 mb-1">Fallback Models</label>
-              <Select
-                mode="multiple"
-                className="w-full"
-                placeholder={entry.primaryModel ? "Select fallback models" : "Select a primary model first"}
-                value={entry.fallbackModels}
-                onChange={(values) => updateEntry(entry.id, { fallbackModels: values })}
-                disabled={!entry.primaryModel}
-                showSearch
-                filterOption={(input, option) => (option?.label ?? "").toLowerCase().includes(input.toLowerCase())}
+              <MultiSelect
                 options={availableFallbackOptions.map((m) => ({ label: m, value: m }))}
-                getPopupContainer={(trigger) => trigger.parentElement || document.body}
-                maxTagCount="responsive"
-                maxTagPlaceholder={(omittedValues) => (
-                  <SimpleTooltip content={omittedValues.map(({ value: v }) => v).join(", ")}>
-                    <span>+{omittedValues.length} more</span>
-                  </SimpleTooltip>
-                )}
+                value={entry.fallbackModels}
+                onValueChange={(values) => updateEntry(entry.id, { fallbackModels: values })}
+                placeholder={entry.primaryModel ? "Select fallback models" : "Select a primary model first"}
+                emptyText="No models found"
+                disabled={!entry.primaryModel}
+                className="w-full"
               />
               {entry.fallbackModels.length > 1 && (
                 <div className="text-[10px] text-gray-400 mt-1 ml-1">
diff --git a/ui/litellm-dashboard/src/components/key_team_helpers/BudgetWindowsEditor.tsx b/ui/litellm-dashboard/src/components/key_team_helpers/BudgetWindowsEditor.tsx
index c9a422dcb85..43861d43c0d 100644
--- a/ui/litellm-dashboard/src/components/key_team_helpers/BudgetWindowsEditor.tsx
+++ b/ui/litellm-dashboard/src/components/key_team_helpers/BudgetWindowsEditor.tsx
@@ -1,5 +1,6 @@
-import { InputNumber, Select } from "antd";
 import { Button } from "@/components/ui/button";
+import { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText } from "@/components/ui/input-group";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import React from "react";
 
 export interface BudgetWindowEntry {
@@ -41,21 +42,43 @@ export function BudgetWindowsEditor({ value, onChange }: BudgetWindowsEditorProp
           <div key={idx} style={{ marginBottom: 12 }}>
             <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
               <Select
+                items={BUDGET_WINDOW_OPTIONS}
                 value={window.budget_duration}
-                onChange={(v) => updateWindow(idx, "budget_duration", v)}
-                style={{ width: 130 }}
-                options={BUDGET_WINDOW_OPTIONS.map((o) => ({ value: o.value, label: o.label }))}
-              />
-              <InputNumber
-                step={0.01}
-                min={0}
-                precision={2}
-                value={window.max_budget ?? undefined}
-                onChange={(v) => updateWindow(idx, "max_budget", v ?? null)}
-                placeholder="Max spend ($)"
-                style={{ width: 160 }}
-                prefix="$"
-              />
+                onValueChange={(v: string | null) => v && updateWindow(idx, "budget_duration", v)}
+              >
+                <SelectTrigger className="w-[130px]">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {BUDGET_WINDOW_OPTIONS.map((option) => (
+                    <SelectItem key={option.value} value={option.value}>
+                      {option.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <InputGroup className="w-40">
+                <InputGroupAddon>
+                  <InputGroupText>$</InputGroupText>
+                </InputGroupAddon>
+                <InputGroupInput
+                  type="number"
+                  step={0.01}
+                  min={0}
+                  value={window.max_budget ?? ""}
+                  onChange={(event) => {
+                    const typed = event.target.valueAsNumber;
+                    updateWindow(idx, "max_budget", Number.isNaN(typed) ? null : typed);
+                  }}
+                  onBlur={(event) => {
+                    const typed = event.target.valueAsNumber;
+                    if (!Number.isNaN(typed)) {
+                      updateWindow(idx, "max_budget", Number(typed.toFixed(2)));
+                    }
+                  }}
+                  placeholder="Max spend ($)"
+                />
+              </InputGroup>
               <Button
                 variant="ghost"
                 size="sm"
diff --git a/ui/litellm-dashboard/src/components/organisms/create_key_button.integration.test.tsx b/ui/litellm-dashboard/src/components/organisms/create_key_button.integration.test.tsx
index 1dbc7440e3d..b6a9926b144 100644
--- a/ui/litellm-dashboard/src/components/organisms/create_key_button.integration.test.tsx
+++ b/ui/litellm-dashboard/src/components/organisms/create_key_button.integration.test.tsx
@@ -197,10 +197,6 @@ const antdSearchInput = (placeholder: HTMLElement): HTMLInputElement => {
   return input;
 };
 
-const openAntdSelect = async (placeholder: HTMLElement) => {
-  await userEvent.click(antdSearchInput(placeholder));
-};
-
 const openSection = async (name: RegExp) => {
   await userEvent.click(await screen.findByRole("button", { name }));
 };
@@ -468,8 +464,9 @@ describe("CreateKey", () => {
       await nameTheKey();
       await openSection(/Optional Settings/i);
 
-      await openAntdSelect(await screen.findByText("Select access groups (optional)"));
-      await userEvent.click(await screen.findByText("Group One"));
+      await userEvent.click(await screen.findByLabelText("Select access groups (optional)"));
+      await userEvent.click(await screen.findByRole("option", { name: /Group One/ }));
+      await userEvent.keyboard("{Escape}");
       await submit();
 
       expect((await createdPayload()).access_group_ids).toStrictEqual(["ag-1"]);
diff --git a/ui/litellm-dashboard/src/components/shared/Alert.test.tsx b/ui/litellm-dashboard/src/components/shared/Alert.test.tsx
new file mode 100644
index 00000000000..81aa6c95459
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/shared/Alert.test.tsx
@@ -0,0 +1,80 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { Alert, AlertAction, AlertDescription, AlertTitle } from "./Alert";
+
+describe("Alert", () => {
+  it("exposes the alert role plus the slot and variant hooks", () => {
+    render(
+      <Alert variant="warning">
+        <AlertTitle>License expiring</AlertTitle>
+        <AlertDescription>Renew before it lapses.</AlertDescription>
+      </Alert>,
+    );
+
+    const alert = screen.getByRole("alert");
+    expect(alert).toHaveAttribute("data-slot", "alert");
+    expect(alert).toHaveAttribute("data-variant", "warning");
+    expect(alert).toHaveTextContent("License expiring");
+    expect(alert).toHaveTextContent("Renew before it lapses.");
+  });
+
+  it("reports the default variant when none is given", () => {
+    render(<Alert>Heads up</Alert>);
+    expect(screen.getByRole("alert")).toHaveAttribute("data-variant", "default");
+  });
+
+  it.each([
+    ["info", "text-info"],
+    ["success", "text-success"],
+    ["warning", "text-warning"],
+    ["error", "text-red-900"],
+    ["destructive", "text-destructive"],
+  ] as const)("paints the %s variant with its own token color", (variant, tokenClass) => {
+    render(<Alert variant={variant}>message</Alert>);
+    const alert = screen.getByRole("alert");
+    expect(alert).toHaveAttribute("data-variant", variant);
+    expect(alert).toHaveClass(tokenClass);
+  });
+
+  it("keeps success off the warning color so a save does not read as a problem", () => {
+    render(<Alert variant="success">saved</Alert>);
+    expect(screen.getByRole("alert")).not.toHaveClass("text-warning");
+  });
+
+  it("lets className win over the variant classes through twMerge", () => {
+    render(
+      <Alert variant="info" className="bg-card">
+        message
+      </Alert>,
+    );
+    const alert = screen.getByRole("alert");
+    expect(alert).toHaveClass("bg-card");
+    expect(alert).not.toHaveClass("bg-info/5");
+  });
+
+  it("renders the action slot so a dismiss control stays reachable", () => {
+    render(
+      <Alert variant="info">
+        <AlertTitle>SSO enabled</AlertTitle>
+        <AlertAction>
+          <button type="button" aria-label="Close" />
+        </AlertAction>
+      </Alert>,
+    );
+
+    const action = screen.getByRole("button", { name: "Close" }).parentElement;
+    expect(action).toHaveAttribute("data-slot", "alert-action");
+  });
+
+  it("tags the title and description parts for the layout selectors", () => {
+    render(
+      <Alert>
+        <AlertTitle>Title</AlertTitle>
+        <AlertDescription>Description</AlertDescription>
+      </Alert>,
+    );
+
+    expect(screen.getByText("Title")).toHaveAttribute("data-slot", "alert-title");
+    expect(screen.getByText("Description")).toHaveAttribute("data-slot", "alert-description");
+  });
+});
diff --git a/ui/litellm-dashboard/src/components/shared/Alert.tsx b/ui/litellm-dashboard/src/components/shared/Alert.tsx
index 0098d261cfd..a76b4a99c0d 100644
--- a/ui/litellm-dashboard/src/components/shared/Alert.tsx
+++ b/ui/litellm-dashboard/src/components/shared/Alert.tsx
@@ -22,8 +22,15 @@ const alertVariants = cva({
 
 type AlertProps = React.ComponentProps<"div"> & VariantProps<typeof alertVariants>;
 
-const Alert = React.forwardRef<HTMLDivElement, AlertProps>(({ className, variant, ...props }, ref) => (
-  <div ref={ref} data-slot="alert" role="alert" className={cn(alertVariants({ variant }), className)} {...props} />
+const Alert = React.forwardRef<HTMLDivElement, AlertProps>(({ className, variant = "default", ...props }, ref) => (
+  <div
+    ref={ref}
+    data-slot="alert"
+    data-variant={variant}
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+  />
 ));
 Alert.displayName = "Alert";
 
diff --git a/ui/litellm-dashboard/src/components/shared/MultiSelect.test.tsx b/ui/litellm-dashboard/src/components/shared/MultiSelect.test.tsx
index 6fe2f0fe51c..04921974810 100644
--- a/ui/litellm-dashboard/src/components/shared/MultiSelect.test.tsx
+++ b/ui/litellm-dashboard/src/components/shared/MultiSelect.test.tsx
@@ -93,6 +93,31 @@ describe("MultiSelect", () => {
     expect(await screen.findByText("No options found")).toBeInTheDocument();
   });
 
+  it("splits a comma-separated custom entry into one value per token", async () => {
+    const { onValueChange, input } = renderMultiSelect({ allowCustomValues: true });
+
+    await userEvent.type(input, "udp, kafka ,terraform");
+    await userEvent.click(await screen.findByText('Create "udp, kafka ,terraform"'));
+
+    expect(onValueChange).toHaveBeenCalledWith(["udp", "kafka", "terraform"]);
+  });
+
+  it("clears every selection at once", async () => {
+    const onValueChange = vi.fn();
+    render(
+      <MultiSelect
+        options={OPTIONS}
+        value={["vs-alpha", "vs-beta"]}
+        onValueChange={onValueChange}
+        placeholder="Select stores"
+      />,
+    );
+
+    await userEvent.click(screen.getByRole("button", { name: "Clear all" }));
+
+    expect(onValueChange).toHaveBeenCalledWith([]);
+  });
+
   it("marks a disabled option as disabled and refuses to select it", async () => {
     const { onValueChange, input } = renderMultiSelect({
       options: [OPTIONS[0], { ...OPTIONS[1], disabled: true }],
diff --git a/ui/litellm-dashboard/src/components/shared/MultiSelect.tsx b/ui/litellm-dashboard/src/components/shared/MultiSelect.tsx
index c60a019db06..31ca4e099f0 100644
--- a/ui/litellm-dashboard/src/components/shared/MultiSelect.tsx
+++ b/ui/litellm-dashboard/src/components/shared/MultiSelect.tsx
@@ -4,6 +4,7 @@ import { useState } from "react";
 import {
   Combobox,
   ComboboxChip,
+  ComboboxClear,
   ComboboxChips,
   ComboboxChipsInput,
   ComboboxContent,
@@ -34,6 +35,12 @@ interface MultiSelectProps {
   className?: string;
 }
 
+const splitOnCommas = (raw: string): string[] =>
+  raw
+    .split(",")
+    .map((part) => part.trim())
+    .filter((part) => part.length > 0);
+
 const matchesQuery = (option: MultiSelectOption, query: string): boolean => {
   const normalizedQuery = query.trim().toLowerCase();
   return (
@@ -78,15 +85,22 @@ export function MultiSelect({
       ? [...safeOptions, { label: `Create "${customOption}"`, value: customOption }]
       : safeOptions;
 
+  const canClear = (selected: MultiSelectOption[]) => selected.length > 0 && !disabled && !loading;
+
+  const handleValueChange = (selected: MultiSelectOption[]) => {
+    const next = allowCustomValues
+      ? selected.flatMap((option) => splitOnCommas(option.value))
+      : selected.map((option) => option.value);
+    onValueChange(Array.from(new Set(next)));
+    setQuery("");
+  };
+
   return (
     <Combobox
       multiple
       items={items}
       value={selectedOptions}
-      onValueChange={(selected: MultiSelectOption[]) => {
-        onValueChange(selected.map((option) => option.value));
-        setQuery("");
-      }}
+      onValueChange={handleValueChange}
       inputValue={query}
       onInputValueChange={setQuery}
       isItemEqualToValue={(option: MultiSelectOption, selected: MultiSelectOption) => option.value === selected.value}
@@ -109,6 +123,7 @@ export function MultiSelect({
                 className="min-w-24"
                 aria-label={placeholder || undefined}
               />
+              {canClear(selected) && <ComboboxClear className="ml-auto self-center" aria-label="Clear all" />}
             </>
           )}
         </ComboboxValue>
diff --git a/ui/litellm-dashboard/src/components/shared/PaginatedSearchSelect.tsx b/ui/litellm-dashboard/src/components/shared/PaginatedSearchSelect.tsx
index 47dc429bcc5..14a3280dfc3 100644
--- a/ui/litellm-dashboard/src/components/shared/PaginatedSearchSelect.tsx
+++ b/ui/litellm-dashboard/src/components/shared/PaginatedSearchSelect.tsx
@@ -25,7 +25,7 @@ interface PaginatedSearchSelectProps {
   value?: string;
   onValueChange: (value: string) => void;
   onSearchChange: (query: string) => void;
-  onLoadMore: () => void;
+  onLoadMore?: () => void;
   hasNextPage?: boolean;
   isLoading?: boolean;
   isFetchingNextPage?: boolean;
@@ -82,7 +82,7 @@ export function PaginatedSearchSelect({
     if (target.scrollHeight === 0) return;
     const ratio = (target.scrollTop + target.clientHeight) / target.scrollHeight;
     if (ratio >= SCROLL_THRESHOLD && hasNextPage && !isFetchingNextPage) {
-      onLoadMore();
+      onLoadMore?.();
     }
   };
 
diff --git a/ui/litellm-dashboard/src/components/shared/SearchSelect.tsx b/ui/litellm-dashboard/src/components/shared/SearchSelect.tsx
index e2ac466e275..53a5371d72d 100644
--- a/ui/litellm-dashboard/src/components/shared/SearchSelect.tsx
+++ b/ui/litellm-dashboard/src/components/shared/SearchSelect.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import React from "react";
 import {
   Combobox,
   ComboboxContent,
@@ -14,6 +15,8 @@ export interface SearchSelectOption {
   value: string;
   /** Optional muted second line (e.g. an id); also matched when searching. */
   sublabel?: string;
+  /** Optional leading glyph (e.g. a provider logo); not matched when searching. */
+  icon?: React.ReactNode;
 }
 
 interface SearchSelectProps {
@@ -26,6 +29,7 @@ interface SearchSelectProps {
   className?: string;
   inputId?: string;
   allowClear?: boolean;
+  "aria-label"?: string;
 }
 
 const matchesQuery = (option: SearchSelectOption, query: string): boolean => {
@@ -44,6 +48,7 @@ export function SearchSelect({
   className,
   inputId,
   allowClear = true,
+  "aria-label": ariaLabel,
 }: SearchSelectProps) {
   const selected =
     value === undefined || value === ""
@@ -64,6 +69,7 @@ export function SearchSelect({
     >
       <ComboboxInput
         id={inputId}
+        aria-label={ariaLabel}
         placeholder={placeholder}
         showClear={allowClear && value != null && value !== ""}
         className={`h-8 w-full text-sm ${className ?? ""}`}
@@ -73,6 +79,7 @@ export function SearchSelect({
         <ComboboxList>
           {(item: SearchSelectOption) => (
             <ComboboxItem key={item.value} value={item}>
+              {item.icon}
               <span className="flex min-w-0 flex-col">
                 <span className="truncate">{item.label}</span>
                 {item.sublabel != null && item.sublabel !== "" && (
diff --git a/ui/litellm-dashboard/src/components/ui/badge.tsx b/ui/litellm-dashboard/src/components/ui/badge.tsx
index 4044a9d63d1..ec5417d227a 100644
--- a/ui/litellm-dashboard/src/components/ui/badge.tsx
+++ b/ui/litellm-dashboard/src/components/ui/badge.tsx
@@ -11,9 +11,11 @@ const badgeVariants = cva({
     variant: {
       default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
       secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
-      info: "bg-info/10 text-info [a]:hover:bg-info/20",
       destructive:
         "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
+      success: "bg-success/10 text-success dark:bg-success/20 [a]:hover:bg-success/20",
+      warning: "bg-warning/10 text-warning dark:bg-warning/20 [a]:hover:bg-warning/20",
+      info: "bg-info/10 text-info dark:bg-info/20 [a]:hover:bg-info/20",
       outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
       ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
       link: "text-primary underline-offset-4 hover:underline",
diff --git a/ui/litellm-dashboard/src/contexts/AntdGlobalProvider.tsx b/ui/litellm-dashboard/src/contexts/AntdGlobalProvider.tsx
index 90370e3b00b..d7aafd8aaae 100644
--- a/ui/litellm-dashboard/src/contexts/AntdGlobalProvider.tsx
+++ b/ui/litellm-dashboard/src/contexts/AntdGlobalProvider.tsx
@@ -1,13 +1,8 @@
 "use client";
 
 import React from "react";
-import { ConfigProvider } from "antd";
 import { StyleProvider } from "@ant-design/cssinjs";
 
 export default function AntdGlobalProvider({ children }: { children: React.ReactNode }) {
-  return (
-    <StyleProvider layer>
-      <ConfigProvider theme={{ cssVar: true }}>{children}</ConfigProvider>
-    </StyleProvider>
-  );
+  return <StyleProvider layer>{children}</StyleProvider>;
 }