diff --git a/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/ProjectUsage/ProjectSpendBreakdown.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/ProjectUsage/ProjectSpendBreakdown.test.tsx
new file mode 100644
index 00000000000..4e67c870de0
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/ProjectUsage/ProjectSpendBreakdown.test.tsx
@@ -0,0 +1,66 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import ProjectSpendBreakdown from "./ProjectSpendBreakdown";
+import type { ProjectSpendRow } from "./projectUsageAggregations";
+
+vi.mock("@/components/shared/chart_loader", () => ({
+ ChartLoader: ({ isDateChanging }: { isDateChanging: boolean }) => (
+ {isDateChanging ? "Processing date selection..." : "Loading chart data..."}
+ ),
+}));
+
+const mockProjectSpend: ProjectSpendRow[] = [
+ {
+ project_id: "project-alpha",
+ project_alias: "Project Alpha",
+ spend: 150.5,
+ requests: 100,
+ successful_requests: 95,
+ failed_requests: 5,
+ tokens: 50000,
+ },
+ {
+ project_id: "project-beta",
+ project_alias: "Project Beta",
+ spend: 200.75,
+ requests: 120,
+ successful_requests: 115,
+ failed_requests: 5,
+ tokens: 75000,
+ },
+];
+
+describe("ProjectSpendBreakdown", () => {
+ it("displays the title", () => {
+ render();
+ expect(screen.getByText("Spend by Project")).toBeInTheDocument();
+ });
+
+ it("shows the loader instead of chart content while loading", () => {
+ render();
+ expect(screen.getByTestId("chart-loader")).toBeInTheDocument();
+ expect(screen.queryByText("No project usage data")).not.toBeInTheDocument();
+ });
+
+ it("displays table headers", () => {
+ render();
+ expect(screen.getByText("Project")).toBeInTheDocument();
+ expect(screen.getByText("Spend")).toBeInTheDocument();
+ expect(screen.getByText("Successful")).toBeInTheDocument();
+ expect(screen.getByText("Failed")).toBeInTheDocument();
+ expect(screen.getByText("Tokens")).toBeInTheDocument();
+ });
+
+ it("displays each project's alias and formatted spend in the table", () => {
+ render();
+ expect(screen.getAllByText("Project Alpha").length).toBeGreaterThan(0);
+ expect(screen.getAllByText("Project Beta").length).toBeGreaterThan(0);
+ expect(screen.getByText("$150.50")).toBeInTheDocument();
+ expect(screen.getByText("$200.75")).toBeInTheDocument();
+ });
+
+ it("shows the empty message when no project has usage", () => {
+ render();
+ expect(screen.getByText("No project usage data")).toBeInTheDocument();
+ });
+});
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/ProjectUsage/ProjectSpendBreakdown.tsx b/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/ProjectUsage/ProjectSpendBreakdown.tsx
new file mode 100644
index 00000000000..e7e41126861
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/ProjectUsage/ProjectSpendBreakdown.tsx
@@ -0,0 +1,84 @@
+import React from "react";
+import type { ColumnDef } from "@tanstack/react-table";
+
+import { DonutChart } from "@/components/shared/charts";
+import { DataTable } from "@/components/shared/DataTable";
+import { MoneyCell } from "@/components/shared/table_cells";
+import { ChartLoader } from "@/components/shared/chart_loader";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { formatNumberWithCommas } from "@/utils/dataUtils";
+
+import type { ProjectSpendRow } from "./projectUsageAggregations";
+
+interface ProjectSpendBreakdownProps {
+ loading: boolean;
+ isDateChanging: boolean;
+ projectSpend: ProjectSpendRow[];
+}
+
+const columns: ColumnDef[] = [
+ {
+ header: "Project",
+ accessorKey: "project_alias",
+ },
+ {
+ header: "Spend",
+ accessorKey: "spend",
+ meta: { numeric: true },
+ cell: ({ row }) => ,
+ },
+ {
+ header: "Successful",
+ accessorKey: "successful_requests",
+ meta: { numeric: true, className: "text-success" },
+ cell: ({ row }) => row.original.successful_requests.toLocaleString(),
+ },
+ {
+ header: "Failed",
+ accessorKey: "failed_requests",
+ meta: { numeric: true, className: "text-destructive" },
+ cell: ({ row }) => row.original.failed_requests.toLocaleString(),
+ },
+ {
+ header: "Tokens",
+ accessorKey: "tokens",
+ meta: { numeric: true },
+ cell: ({ row }) => row.original.tokens.toLocaleString(),
+ },
+];
+
+const ProjectSpendBreakdown: React.FC = ({ loading, isDateChanging, projectSpend }) => (
+
+
+ Spend by Project
+
+
+ {loading ? (
+
+ ) : (
+
+ `$${formatNumberWithCommas(value, 2)}`}
+ colors={["cyan"]}
+ showLabel
+ startAngle={90}
+ endAngle={-270}
+ />
+ row.project_id}
+ noDataMessage="No project usage data"
+ size="compact"
+ />
+
+ )}
+
+
+);
+
+export default ProjectSpendBreakdown;
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/ProjectUsage/ProjectUsage.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/ProjectUsage/ProjectUsage.test.tsx
new file mode 100644
index 00000000000..1e9e0dffefb
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/ProjectUsage/ProjectUsage.test.tsx
@@ -0,0 +1,87 @@
+import userEvent from "@testing-library/user-event";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import { renderWithProviders, screen, testQueryClient, waitFor } from "@/../tests/test-utils";
+import * as networking from "@/components/networking";
+
+import ProjectUsage from "./ProjectUsage";
+import type { EntityList } from "../EntityUsage/EntityUsage";
+
+vi.mock("@/components/networking", () => ({
+ projectDailyActivityCall: vi.fn(),
+}));
+
+const PROJECT_LIST: EntityList[] = [
+ { label: "Project Alpha", value: "project-alpha" },
+ { label: "Project Beta", value: "project-beta" },
+];
+
+const DATE_VALUE = { from: new Date("2026-09-01"), to: new Date("2026-09-08") };
+
+describe("ProjectUsage", () => {
+ const mockProjectDailyActivityCall = vi.mocked(networking.projectDailyActivityCall);
+
+ beforeEach(() => {
+ vi.clearAllMocks();
+ testQueryClient.clear();
+ });
+
+ it("shows an enterprise upsell and never calls the API when the caller is not a premium user", () => {
+ renderWithProviders(
+ ,
+ );
+
+ expect(screen.getByText("Project Usage is an Enterprise feature")).toBeInTheDocument();
+ expect(mockProjectDailyActivityCall).not.toHaveBeenCalled();
+ });
+
+ it("prompts for a project before fetching anything", () => {
+ renderWithProviders(
+ ,
+ );
+
+ expect(screen.getByText("Select at least one project above to view its usage.")).toBeInTheDocument();
+ expect(mockProjectDailyActivityCall).not.toHaveBeenCalled();
+ });
+
+ it("fetches and renders the picked project's daily spend", async () => {
+ mockProjectDailyActivityCall.mockResolvedValue({
+ start_date: "2026-09-01",
+ end_date: "2026-09-08",
+ results: [
+ {
+ date: "2026-09-01",
+ project_id: "project-alpha",
+ project_alias: "Project Alpha",
+ spend: 12.5,
+ prompt_tokens: 100,
+ completion_tokens: 50,
+ total_tokens: 150,
+ api_requests: 4,
+ successful_requests: 3,
+ failed_requests: 1,
+ },
+ ],
+ });
+
+ const user = userEvent.setup();
+ renderWithProviders(
+ ,
+ );
+
+ await user.click(screen.getByRole("combobox"));
+ await user.click(screen.getByRole("option", { name: "Project Alpha" }));
+
+ await waitFor(() => expect(mockProjectDailyActivityCall).toHaveBeenCalledTimes(1));
+ expect(mockProjectDailyActivityCall).toHaveBeenCalledWith(
+ "test-token",
+ DATE_VALUE.from,
+ DATE_VALUE.to,
+ ["project-alpha"],
+ );
+
+ await waitFor(() => expect(screen.getAllByText("$12.50").length).toBeGreaterThan(0));
+ expect(screen.getAllByText("4").length).toBeGreaterThan(0);
+ expect(screen.getAllByText("Project Alpha").length).toBeGreaterThan(0);
+ });
+});
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/ProjectUsage/ProjectUsage.tsx b/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/ProjectUsage/ProjectUsage.tsx
new file mode 100644
index 00000000000..b4f06af67c8
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/ProjectUsage/ProjectUsage.tsx
@@ -0,0 +1,158 @@
+import React, { useMemo, useState } from "react";
+import { keepPreviousData, useQuery } from "@tanstack/react-query";
+import { Info } from "lucide-react";
+
+import { Alert, AlertDescription, AlertTitle } from "@/components/shared/Alert";
+import { BarChart } from "@/components/shared/charts";
+import { ChartLoader } from "@/components/shared/chart_loader";
+import { MultiSelect, type MultiSelectOption } from "@/components/shared/MultiSelect";
+import type { DateRangePickerValue } from "@/components/shared/date_picker_types";
+import { Card as ShadcnCard, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { projectDailyActivityCall } from "@/components/networking";
+import { valueFormatterSpend } from "@/components/UsagePage/utils/value_formatters";
+
+import { buildSummaryTiles, type SummaryTile } from "../EntityUsage/entityUsageSummary";
+import type { EntityList } from "../EntityUsage/EntityUsage";
+import ProjectSpendBreakdown from "./ProjectSpendBreakdown";
+import { buildDailySpendSeries, buildProjectSpendBreakdown, summarizeProjectUsage } from "./projectUsageAggregations";
+
+interface ProjectUsageProps {
+ accessToken: string | null;
+ projectList: EntityList[] | null;
+ dateValue: DateRangePickerValue;
+ premiumUser: boolean;
+}
+
+const renderSummaryTile = ({ title, value, className }: SummaryTile) => (
+
+
+ {title}
+ {value}
+
+
+);
+
+const ProjectUsage: React.FC = ({ accessToken, projectList, dateValue, premiumUser }) => {
+ const [selectedProjectIds, setSelectedProjectIds] = useState([]);
+
+ const startTime = useMemo(() => (dateValue.from ? new Date(dateValue.from) : null), [dateValue.from]);
+ const endTime = useMemo(() => (dateValue.to ? new Date(dateValue.to) : null), [dateValue.to]);
+
+ const projectOptions = useMemo(
+ () => (projectList ?? []).map((project) => ({ label: project.label || project.value, value: project.value })),
+ [projectList],
+ );
+
+ const hasSelection = selectedProjectIds.length > 0;
+ const hasDateRange = !!startTime && !!endTime;
+ const hasRequestWindow = premiumUser && !!accessToken && hasDateRange;
+ const enabled = hasRequestWindow && hasSelection;
+
+ const queryOptions = {
+ queryKey: ["project-daily-activity", selectedProjectIds, startTime?.toISOString(), endTime?.toISOString()],
+ queryFn: () => projectDailyActivityCall(accessToken as string, startTime as Date, endTime as Date, selectedProjectIds),
+ enabled,
+ placeholderData: keepPreviousData,
+ };
+ const { data, isFetching, isPlaceholderData } = useQuery(queryOptions);
+
+ if (!premiumUser) {
+ return (
+
+ Project Usage is an Enterprise feature
+
+ Filtering usage by project requires a LiteLLM Enterprise license. Get a 7 day trial at{" "}
+
+ litellm.ai/enterprise
+
+ .
+
+
+ );
+ }
+
+ const rows = data?.results ?? [];
+ const summary = summarizeProjectUsage(rows);
+ const dailySpend = buildDailySpendSeries(rows);
+ const projectBreakdown = buildProjectSpendBreakdown(rows);
+ const isLoadingRows = isFetching && !isPlaceholderData;
+
+ return (
+
+
+
+
+
+
Projects
+
+ } />
+ Select one or more projects to compare their usage
+
+
+
+
+
+
+
+ {!hasSelection ? (
+
+
+
+
+ Select at least one project above to view its usage.
+
+
+
+
+ ) : (
+ <>
+
+
+
+ Project Spend Overview
+
+ {buildSummaryTiles(summary, false).map(renderSummaryTile)}
+
+
+
+
+
+
+
+
+ Daily Spend
+
+
+ {isLoadingRows ? (
+
+ ) : (
+
+ )}
+
+
+
+
+
+
+ )}
+