feat(ui): batch of small file migrations

- Filters/FilterInput: antd Input with prefix \u2192 shadcn Input with
  absolutely positioned lucide icon.
- Filters/FiltersButton: antd Badge dot \u2192 absolute blue dot over
  shadcn Button variant='outline'.
- Filters/ResetFiltersButton: antd Button \u2192 shadcn Button with
  lucide RotateCcw.
- OnboardingLoadingView: antd Spin \u2192 lucide Loader2 spinner.
- OnboardingErrorView: antd Alert + Button \u2192 destructive-tinted
  div + shadcn Button with asChild anchor.
- prompt_editor_view/EmptyState: @ant-design RobotOutlined \u2192
  lucide Bot.
- prompt_editor_view/DeveloperMessageCard: @tremor Card/Text \u2192
  shadcn Card + semantic <p>/muted-foreground.
- playground/EndpointSelector: antd Select \u2192 shadcn Select.
- playground/ChatImageRenderer + ResponsesImageRenderer: @ant-design
  FilePdfOutlined \u2192 lucide FileText with destructive palette.
- YourRoleCell: inline eslint-disable on preserved tremor TableCell
  import (table family whitelisted in phase 1).

Gates: TS \u2713 (new errors 0, pre-existing test errors unchanged) |
Build \u2713.

Co-authored-by: yuneng-jiang <yuneng-berri@users.noreply.github.com>

ui/litellm-dashboard/src/app/(dashboard)/teams/components/TeamsTable/YourRoleCell/YourRoleCell.tsx

@@ -1,3 +1,4 @@
+// eslint-disable-next-line litellm-ui/no-banned-ui-imports
 import { TableCell } from "@tremor/react";
 import { Team } from "@/components/key_team_helpers/key_list";
 import TeamRoleBadge from "@/app/(dashboard)/teams/components/TeamsTable/YourRoleCell/TeamRoleBadge";

ui/litellm-dashboard/src/app/onboarding/OnboardingErrorView.tsx

@@ -1,17 +1,23 @@
 import React from "react";
-import { Alert, Button } from "antd";
+import { AlertCircle } from "lucide-react";
+import { Button } from "@/components/ui/button";
 
 export function OnboardingErrorView() {
   return (
     <div className="mx-auto w-full max-w-md mt-10">
-      <Alert
-        type="error"
-        message="Failed to load invitation"
-        description="The invitation link may be invalid or expired."
-        showIcon
-      />
+      <div className="flex gap-2 items-start p-4 rounded-md border border-destructive/30 bg-destructive/10 text-destructive">
+        <AlertCircle className="h-5 w-5 mt-0.5 shrink-0" />
+        <div>
+          <div className="font-semibold">Failed to load invitation</div>
+          <div className="text-sm">
+            The invitation link may be invalid or expired.
+          </div>
+        </div>
+      </div>
       <div className="mt-4">
-        <Button href="/ui/login">Back to Login</Button>
+        <Button asChild variant="outline">
+          <a href="/ui/login">Back to Login</a>
+        </Button>
       </div>
     </div>
   );

ui/litellm-dashboard/src/app/onboarding/OnboardingLoadingView.tsx

@@ -1,11 +1,10 @@
 import React from "react";
-import { Spin } from "antd";
-import { LoadingOutlined } from "@ant-design/icons";
+import { Loader2 } from "lucide-react";
 
 export function OnboardingLoadingView() {
   return (
     <div className="mx-auto w-full max-w-md mt-10 flex justify-center">
-      <Spin indicator={<LoadingOutlined spin />} size="large" />
+      <Loader2 className="h-8 w-8 animate-spin text-primary" />
     </div>
   );
 }

ui/litellm-dashboard/src/components/common_components/Filters/FilterInput.tsx

@@ -1,5 +1,5 @@
-import { cx } from "@/lib/cva.config";
-import { Input } from "antd";
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
 import debounce from "lodash/debounce";
 import { LucideIcon } from "lucide-react";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
@@ -15,14 +15,23 @@ interface FilterInputProps {
 
 const DEBOUNCE_DELAY = 300;
 
-export const FilterInput: React.FC<FilterInputProps> = ({ placeholder, value, onChange, icon: Icon, className }) => {
+export const FilterInput: React.FC<FilterInputProps> = ({
+  placeholder,
+  value,
+  onChange,
+  icon: Icon,
+  className,
+}) => {
   const [localValue, setLocalValue] = useState(value);
 
   useEffect(() => {
     setLocalValue(value);
   }, [value]);
 
-  const debouncedOnChange = useMemo(() => debounce((val: string) => onChange(val), DEBOUNCE_DELAY), [onChange]);
+  const debouncedOnChange = useMemo(
+    () => debounce((val: string) => onChange(val), DEBOUNCE_DELAY),
+    [onChange],
+  );
 
   useEffect(() => {
     return () => {
@@ -40,12 +49,19 @@ export const FilterInput: React.FC<FilterInputProps> = ({ placeholder, value, on
   );
 
   return (
-    <Input
-      placeholder={placeholder}
-      value={localValue}
-      onChange={handleChange}
-      prefix={Icon ? <Icon size={16} className="text-gray-500" /> : undefined}
-      className={cx("w-64", className)}
-    />
+    <div className={cn("relative w-64", className)}>
+      {Icon && (
+        <Icon
+          size={16}
+          className="absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none"
+        />
+      )}
+      <Input
+        placeholder={placeholder}
+        value={localValue}
+        onChange={handleChange}
+        className={cn(Icon && "pl-8")}
+      />
+    </div>
   );
 };

ui/litellm-dashboard/src/components/common_components/Filters/FiltersButton.tsx

@@ -1,6 +1,7 @@
-import { Badge, Button } from "antd";
+import { Button } from "@/components/ui/button";
 import { Filter } from "lucide-react";
 import React from "react";
+import { cn } from "@/lib/utils";
 
 interface FiltersButtonProps {
   onClick: () => void;
@@ -16,10 +17,18 @@ export const FiltersButton: React.FC<FiltersButtonProps> = ({
   label = "Filters",
 }) => {
   return (
-    <Badge color="blue" dot={hasActiveFilters}>
-      <Button type="default" onClick={onClick} icon={<Filter size={16} />} className={active ? "bg-gray-100" : ""}>
+    <div className="relative inline-flex">
+      <Button
+        variant="outline"
+        onClick={onClick}
+        className={cn(active && "bg-muted")}
+      >
+        <Filter size={16} />
         {label}
       </Button>
-    </Badge>
+      {hasActiveFilters && (
+        <span className="absolute -top-1 -right-1 h-2 w-2 rounded-full bg-blue-500" />
+      )}
+    </div>
   );
 };

ui/litellm-dashboard/src/components/common_components/Filters/ResetFiltersButton.tsx

@@ -1,4 +1,4 @@
-import { Button } from "antd";
+import { Button } from "@/components/ui/button";
 import { RotateCcw } from "lucide-react";
 import React from "react";
 
@@ -7,9 +7,13 @@ interface ResetFiltersButtonProps {
   label?: string;
 }
 
-export const ResetFiltersButton: React.FC<ResetFiltersButtonProps> = ({ onClick, label = "Reset Filters" }) => {
+export const ResetFiltersButton: React.FC<ResetFiltersButtonProps> = ({
+  onClick,
+  label = "Reset Filters",
+}) => {
   return (
-    <Button type="default" onClick={onClick} icon={<RotateCcw size={16} />}>
+    <Button variant="outline" onClick={onClick}>
+      <RotateCcw size={16} />
       {label}
     </Button>
   );

ui/litellm-dashboard/src/components/playground/chat_ui/ChatImageRenderer.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 import Image from "next/image";
+import { FileText } from "lucide-react";
 import { MessageType } from "./types";
 import { shouldShowChatAttachedImage } from "./ChatImageUtils";
-import { FilePdfOutlined } from "@ant-design/icons";
 
 interface ChatImageRendererProps {
   message: MessageType;
@@ -13,13 +13,15 @@ const ChatImageRenderer: React.FC<ChatImageRendererProps> = ({ message }) => {
     return null;
   }
 
-  const isPdf = typeof message.content === "string" && message.content.includes("[PDF attached]");
+  const isPdf =
+    typeof message.content === "string" &&
+    message.content.includes("[PDF attached]");
 
   return (
     <div className="mb-2">
       {isPdf ? (
-        <div className="w-64 h-32 rounded-md border border-gray-200 bg-red-50 flex items-center justify-center">
-          <FilePdfOutlined style={{ fontSize: "48px", color: "#dc2626" }} />
+        <div className="w-64 h-32 rounded-md border border-border bg-destructive/10 flex items-center justify-center">
+          <FileText className="h-12 w-12 text-destructive" />
         </div>
       ) : (
         <Image
@@ -27,7 +29,7 @@ const ChatImageRenderer: React.FC<ChatImageRendererProps> = ({ message }) => {
           alt="User uploaded image"
           width={256}
           height={200}
-          className="max-w-64 rounded-md border border-gray-200 shadow-sm"
+          className="max-w-64 rounded-md border border-border shadow-sm"
           style={{ maxHeight: "200px", width: "auto", height: "auto" }}
         />
       )}

ui/litellm-dashboard/src/components/playground/chat_ui/EndpointSelector.tsx

@@ -1,28 +1,42 @@
-import { Select } from "antd";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { cn } from "@/lib/utils";
 import React from "react";
 import { ENDPOINT_OPTIONS } from "./chatConstants";
 
 interface EndpointSelectorProps {
-  endpointType: string; // Accept string to avoid type conflicts
+  endpointType: string;
   onEndpointChange: (value: string) => void;
   className?: string;
 }
 
-const EndpointSelector: React.FC<EndpointSelectorProps> = ({ endpointType, onEndpointChange, className }) => {
+const EndpointSelector: React.FC<EndpointSelectorProps> = ({
+  endpointType,
+  onEndpointChange,
+  className,
+}) => {
   return (
-    <div className={className}>
-      <Select
-        showSearch
-        value={endpointType}
-        style={{ width: "100%" }}
-        onChange={onEndpointChange}
-        options={ENDPOINT_OPTIONS}
-        className="rounded-md"
-        filterOption={(input, option) =>
-          (option?.label ?? "").toLowerCase().includes(input.toLowerCase()) ||
-          (option?.value ?? "").toLowerCase().includes(input.toLowerCase())
-        }
-      />
+    <div className={cn(className)}>
+      <Select value={endpointType} onValueChange={onEndpointChange}>
+        <SelectTrigger>
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          {ENDPOINT_OPTIONS.map((opt) => (
+            <SelectItem
+              key={opt.value as string}
+              value={opt.value as string}
+            >
+              {opt.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
     </div>
   );
 };

ui/litellm-dashboard/src/components/playground/chat_ui/ResponsesImageRenderer.tsx

@@ -1,30 +1,35 @@
 import React from "react";
+import { FileText } from "lucide-react";
 import { MessageType } from "./types";
 import { shouldShowAttachedImage } from "./ResponsesImageUtils";
-import { FilePdfOutlined } from "@ant-design/icons";
 
 interface ResponsesImageRendererProps {
   message: MessageType;
 }
 
-const ResponsesImageRenderer: React.FC<ResponsesImageRendererProps> = ({ message }) => {
+const ResponsesImageRenderer: React.FC<ResponsesImageRendererProps> = ({
+  message,
+}) => {
   if (!shouldShowAttachedImage(message)) {
     return null;
   }
 
-  const isPdf = typeof message.content === "string" && message.content.includes("[PDF attached]");
+  const isPdf =
+    typeof message.content === "string" &&
+    message.content.includes("[PDF attached]");
 
   return (
     <div className="mb-2">
       {isPdf ? (
-        <div className="w-64 h-32 rounded-md border border-gray-200 bg-red-50 flex items-center justify-center">
-          <FilePdfOutlined style={{ fontSize: "48px", color: "#dc2626" }} />
+        <div className="w-64 h-32 rounded-md border border-border bg-destructive/10 flex items-center justify-center">
+          <FileText className="h-12 w-12 text-destructive" />
         </div>
       ) : (
+        // eslint-disable-next-line @next/next/no-img-element
         <img
           src={message.imagePreviewUrl}
           alt="User uploaded image"
-          className="max-w-64 rounded-md border border-gray-200 shadow-sm"
+          className="max-w-64 rounded-md border border-border shadow-sm"
           style={{ maxHeight: "200px" }}
         />
       )}

ui/litellm-dashboard/src/components/prompts/prompt_editor_view/DeveloperMessageCard.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Card, Text } from "@tremor/react";
+import { Card } from "@/components/ui/card";
 import VariableTextArea from "../variable_textarea";
 
 interface DeveloperMessageCardProps {
@@ -13,10 +13,10 @@ const DeveloperMessageCard: React.FC<DeveloperMessageCardProps> = ({
 }) => {
   return (
     <Card className="p-3">
-      <Text className="block mb-2 text-sm font-medium">Developer message</Text>
-      <Text className="text-gray-500 text-xs mb-2">
+      <p className="block mb-2 text-sm font-medium">Developer message</p>
+      <p className="text-muted-foreground text-xs mb-2">
         Optional system instructions for the model
-      </Text>
+      </p>
       <VariableTextArea
         value={value}
         onChange={onChange}
@@ -28,4 +28,3 @@ const DeveloperMessageCard: React.FC<DeveloperMessageCardProps> = ({
 };
 
 export default DeveloperMessageCard;
-

ui/litellm-dashboard/src/components/prompts/prompt_editor_view/conversation_panel/EmptyState.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { RobotOutlined } from "@ant-design/icons";
+import { Bot } from "lucide-react";
 
 interface EmptyStateProps {
   hasVariables: boolean;
@@ -7,8 +7,8 @@ interface EmptyStateProps {
 
 const EmptyState: React.FC<EmptyStateProps> = ({ hasVariables }) => {
   return (
-    <div className="h-full flex flex-col items-center justify-center text-gray-400">
-      <RobotOutlined style={{ fontSize: "48px", marginBottom: "16px" }} />
+    <div className="h-full flex flex-col items-center justify-center text-muted-foreground">
+      <Bot className="h-12 w-12 mb-4" />
       <span className="text-base">
         {hasVariables
           ? "Fill in the variables above, then type a message to start testing"
@@ -19,4 +19,3 @@ const EmptyState: React.FC<EmptyStateProps> = ({ hasVariables }) => {
 };
 
 export default EmptyState;
-