diff --git a/apps/web/app/admin.dub.co/(dashboard)/revenue/client.tsx b/apps/web/app/admin.dub.co/(dashboard)/revenue/client.tsx
index ebc9c4a81bb..50d00fb9a7e 100644
--- a/apps/web/app/admin.dub.co/(dashboard)/revenue/client.tsx
+++ b/apps/web/app/admin.dub.co/(dashboard)/revenue/client.tsx
@@ -1,9 +1,6 @@
 "use client";
 
-import Areas from "@/ui/charts/areas";
-import TimeSeriesChart from "@/ui/charts/time-series-chart";
-import XAxis from "@/ui/charts/x-axis";
-import YAxis from "@/ui/charts/y-axis";
+import { Areas, TimeSeriesChart, XAxis, YAxis } from "@dub/ui/charts";
 import { currencyFormatter } from "@dub/utils";
 import { Fragment } from "react";
 
diff --git a/apps/web/app/app.dub.co/(auth)/invites/[code]/page.tsx b/apps/web/app/app.dub.co/(auth)/invites/[code]/page.tsx
index eb2a0fccc1c..538c09c3862 100644
--- a/apps/web/app/app.dub.co/(auth)/invites/[code]/page.tsx
+++ b/apps/web/app/app.dub.co/(auth)/invites/[code]/page.tsx
@@ -2,7 +2,7 @@ import { getSession } from "@/lib/auth";
 import EmptyState from "@/ui/shared/empty-state";
 import { prisma } from "@dub/prisma";
 import { LoadingSpinner } from "@dub/ui";
-import { LinkBroken, Users6 } from "@dub/ui/src/icons";
+import { LinkBroken, Users6 } from "@dub/ui/icons";
 import { APP_NAME } from "@dub/utils";
 import { redirect } from "next/navigation";
 import { Suspense } from "react";
diff --git a/apps/web/app/app.dub.co/(auth)/oauth/authorize/authorize-form.tsx b/apps/web/app/app.dub.co/(auth)/oauth/authorize/authorize-form.tsx
index db95326babf..cd0d5a7e823 100644
--- a/apps/web/app/app.dub.co/(auth)/oauth/authorize/authorize-form.tsx
+++ b/apps/web/app/app.dub.co/(auth)/oauth/authorize/authorize-form.tsx
@@ -5,7 +5,7 @@ import z from "@/lib/zod";
 import { authorizeRequestSchema } from "@/lib/zod/schemas/oauth";
 import { useAddWorkspaceModal } from "@/ui/modals/add-workspace-modal";
 import { Button, InputSelect, InputSelectItemProps } from "@dub/ui";
-import { OfficeBuilding } from "@dub/ui/src/icons";
+import { OfficeBuilding } from "@dub/ui/icons";
 import { DICEBEAR_AVATAR_URL } from "@dub/utils";
 import { useSession } from "next-auth/react";
 import { useEffect, useMemo, useState } from "react";
diff --git a/apps/web/app/app.dub.co/(auth)/oauth/authorize/page.tsx b/apps/web/app/app.dub.co/(auth)/oauth/authorize/page.tsx
index 22879b43ea3..4a88fc5e186 100644
--- a/apps/web/app/app.dub.co/(auth)/oauth/authorize/page.tsx
+++ b/apps/web/app/app.dub.co/(auth)/oauth/authorize/page.tsx
@@ -4,7 +4,7 @@ import z from "@/lib/zod";
 import { authorizeRequestSchema } from "@/lib/zod/schemas/oauth";
 import EmptyState from "@/ui/shared/empty-state";
 import { BlurImage, Logo } from "@dub/ui";
-import { CircleWarning, CubeSettings } from "@dub/ui/src/icons";
+import { CircleWarning, CubeSettings } from "@dub/ui/icons";
 import { HOME_DOMAIN, constructMetadata } from "@dub/utils";
 import { ArrowLeftRight } from "lucide-react";
 import { redirect } from "next/navigation";
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/page-client.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/page-client.tsx
index f5198804fc9..b60c46721c8 100644
--- a/apps/web/app/app.dub.co/(dashboard)/[slug]/page-client.tsx
+++ b/apps/web/app/app.dub.co/(dashboard)/[slug]/page-client.tsx
@@ -21,7 +21,7 @@ import {
   TooltipContent,
   useMediaQuery,
 } from "@dub/ui";
-import { Download, Globe, TableIcon, Tag } from "@dub/ui/src/icons";
+import { Download, Globe, TableIcon, Tag } from "@dub/ui/icons";
 import { useSession } from "next-auth/react";
 import { useRouter } from "next/navigation";
 import posthog from "posthog-js";
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/branding/page-client.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/branding/page-client.tsx
index 787dcd84de5..eef9d443882 100644
--- a/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/branding/page-client.tsx
+++ b/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/branding/page-client.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { AnimatedEmptyState } from "@/ui/shared/animated-empty-state";
-import { Palette2, Photo, Post } from "@dub/ui/src/icons";
+import { Palette2, Photo, Post } from "@dub/ui/icons";
 
 const emptyStateIcons = [Post, Palette2, Photo];
 
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/overview-chart.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/overview-chart.tsx
index 23c969b6449..cc4a1512f4a 100644
--- a/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/overview-chart.tsx
+++ b/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/overview-chart.tsx
@@ -1,14 +1,16 @@
 import { IntervalOptions } from "@/lib/analytics/types";
 import useProgramAnalytics from "@/lib/swr/use-program-analytics";
 import useProgramMetrics from "@/lib/swr/use-program-metrics";
-import Areas from "@/ui/charts/areas";
-import { ChartContext } from "@/ui/charts/chart-context";
-import TimeSeriesChart from "@/ui/charts/time-series-chart";
-import XAxis from "@/ui/charts/x-axis";
-import YAxis from "@/ui/charts/y-axis";
 import SimpleDateRangePicker from "@/ui/shared/simple-date-range-picker";
 import { useRouterStuff } from "@dub/ui";
-import { LoadingSpinner } from "@dub/ui/src/icons";
+import {
+  Areas,
+  ChartContext,
+  TimeSeriesChart,
+  XAxis,
+  YAxis,
+} from "@dub/ui/charts";
+import { LoadingSpinner } from "@dub/ui/icons";
 import { currencyFormatter, formatDate } from "@dub/utils";
 import NumberFlow from "@number-flow/react";
 import { LinearGradient } from "@visx/gradient";
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/partners/invites-table-link.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/partners/invites-table-link.tsx
index 11b32eadb16..d096ac69501 100644
--- a/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/partners/invites-table-link.tsx
+++ b/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/partners/invites-table-link.tsx
@@ -1,8 +1,7 @@
 "use client";
 
-import { buttonVariants } from "@dub/ui";
-import { EnvelopeArrowRight } from "@dub/ui/src/icons";
-import { Tooltip } from "@dub/ui/src/tooltip";
+import { buttonVariants, Tooltip } from "@dub/ui";
+import { EnvelopeArrowRight } from "@dub/ui/icons";
 import { cn } from "@dub/utils";
 import Link from "next/link";
 import { useParams } from "next/navigation";
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/partners/invites/page-client.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/partners/invites/page-client.tsx
index 9fc5dbc507f..d0e4550f952 100644
--- a/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/partners/invites/page-client.tsx
+++ b/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/partners/invites/page-client.tsx
@@ -13,12 +13,7 @@ import {
   useRouterStuff,
   useTable,
 } from "@dub/ui";
-import {
-  Dots,
-  EnvelopeArrowRight,
-  LoadingSpinner,
-  Users,
-} from "@dub/ui/src/icons";
+import { Dots, EnvelopeArrowRight, LoadingSpinner, Users } from "@dub/ui/icons";
 import {
   cn,
   DICEBEAR_AVATAR_URL,
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/partners/partner-stats.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/partners/partner-stats.tsx
index a728745bdf6..a2120da1930 100644
--- a/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/partners/partner-stats.tsx
+++ b/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/partners/partner-stats.tsx
@@ -4,7 +4,7 @@ import usePartnersCount from "@/lib/swr/use-partners-count";
 import { PartnerStatusBadges } from "@/ui/partners/partner-status-badges";
 import { ProgramStatsFilter } from "@/ui/partners/program-stats-filter";
 import { useRouterStuff } from "@dub/ui";
-import { ChartLine, Users } from "@dub/ui/src/icons";
+import { ChartLine, Users } from "@dub/ui/icons";
 import { useParams } from "next/navigation";
 
 interface PartnerCount {
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/partners/partner-table.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/partners/partner-table.tsx
index ac843ff8362..a1d1ec4347c 100644
--- a/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/partners/partner-table.tsx
+++ b/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/partners/partner-table.tsx
@@ -21,7 +21,7 @@ import {
   useRouterStuff,
   useTable,
 } from "@dub/ui";
-import { Dots, Users } from "@dub/ui/src/icons";
+import { Dots, Users } from "@dub/ui/icons";
 import {
   cn,
   COUNTRIES,
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/partners/use-partner-filters.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/partners/use-partner-filters.tsx
index b07d879332c..b477e64c91b 100644
--- a/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/partners/use-partner-filters.tsx
+++ b/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/partners/use-partner-filters.tsx
@@ -2,7 +2,7 @@ import usePartnersCount from "@/lib/swr/use-partners-count";
 import useWorkspace from "@/lib/swr/use-workspace";
 import { PartnerStatusBadges } from "@/ui/partners/partner-status-badges";
 import { useRouterStuff } from "@dub/ui";
-import { CircleDotted, FlagWavy } from "@dub/ui/src/icons";
+import { CircleDotted, FlagWavy } from "@dub/ui/icons";
 import { cn, COUNTRIES, nFormatter } from "@dub/utils";
 import { useMemo } from "react";
 
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/payouts/payout-settings-link.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/payouts/payout-settings-link.tsx
index 5f18cde28d8..9e12df3f02b 100644
--- a/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/payouts/payout-settings-link.tsx
+++ b/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/payouts/payout-settings-link.tsx
@@ -1,8 +1,7 @@
 "use client";
 
-import { buttonVariants } from "@dub/ui";
-import { GreekTemple } from "@dub/ui/src/icons";
-import { Tooltip } from "@dub/ui/src/tooltip";
+import { buttonVariants, Tooltip } from "@dub/ui";
+import { GreekTemple } from "@dub/ui/icons";
 import { cn } from "@dub/utils";
 import Link from "next/link";
 import { useParams } from "next/navigation";
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/payouts/payout-table.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/payouts/payout-table.tsx
index d9c6f0f0f01..b53e46f28cf 100644
--- a/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/payouts/payout-table.tsx
+++ b/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/payouts/payout-table.tsx
@@ -19,7 +19,7 @@ import {
   useRouterStuff,
   useTable,
 } from "@dub/ui";
-import { Dots, MoneyBill2, MoneyBills2 } from "@dub/ui/src/icons";
+import { Dots, MoneyBill2, MoneyBills2 } from "@dub/ui/icons";
 import {
   cn,
   currencyFormatter,
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/payouts/use-payout-filters.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/payouts/use-payout-filters.tsx
index 270529830e2..17b5086e4f6 100644
--- a/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/payouts/use-payout-filters.tsx
+++ b/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/payouts/use-payout-filters.tsx
@@ -6,7 +6,7 @@ import { EnrolledPartnerProps } from "@/lib/types";
 import { PARTNERS_MAX_PAGE_SIZE } from "@/lib/zod/schemas/partners";
 import { PayoutStatusBadges } from "@/ui/partners/payout-status-badges";
 import { useRouterStuff } from "@dub/ui";
-import { CircleDotted, Users } from "@dub/ui/src/icons";
+import { CircleDotted, Users } from "@dub/ui/icons";
 import { cn, DICEBEAR_AVATAR_URL, nFormatter } from "@dub/utils";
 import { useMemo, useState } from "react";
 import { useDebounce } from "use-debounce";
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/program-metrics.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/program-metrics.tsx
index e6418a6e477..c31d5998fc1 100644
--- a/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/program-metrics.tsx
+++ b/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/program-metrics.tsx
@@ -1,6 +1,6 @@
 import useProgramMetrics from "@/lib/swr/use-program-metrics";
 import { Icon } from "@dub/ui";
-import { Check2, CurrencyDollar, MoneyBills2, Users } from "@dub/ui/src/icons";
+import { Check2, CurrencyDollar, MoneyBills2, Users } from "@dub/ui/icons";
 import { currencyFormatter, nFormatter } from "@dub/utils";
 import Link from "next/link";
 import { useParams } from "next/navigation";
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/resources/page-client.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/resources/page-client.tsx
index 0b0fb068ade..ddc9e7b8b58 100644
--- a/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/resources/page-client.tsx
+++ b/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/resources/page-client.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { AnimatedEmptyState } from "@/ui/shared/animated-empty-state";
-import { FileZip2, Palette2, Post } from "@dub/ui/src/icons";
+import { FileZip2, Palette2, Post } from "@dub/ui/icons";
 
 const emptyStateIcons = [Post, Palette2, FileZip2];
 
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/sales/sale-stats.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/sales/sale-stats.tsx
index 3d40774446c..84e6709fae3 100644
--- a/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/sales/sale-stats.tsx
+++ b/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/sales/sale-stats.tsx
@@ -4,7 +4,7 @@ import useSalesCount from "@/lib/swr/use-sales-count";
 import { ProgramStatsFilter } from "@/ui/partners/program-stats-filter";
 import { SaleStatusBadges } from "@/ui/partners/sale-status-badges";
 import { useRouterStuff } from "@dub/ui";
-import { Users } from "@dub/ui/src/icons";
+import { Users } from "@dub/ui/icons";
 import { useParams } from "next/navigation";
 
 export function SaleStats() {
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/sales/sale-table.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/sales/sale-table.tsx
index f4575d77031..91a1ee24555 100644
--- a/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/sales/sale-table.tsx
+++ b/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/sales/sale-table.tsx
@@ -17,7 +17,7 @@ import {
   useRouterStuff,
   useTable,
 } from "@dub/ui";
-import { MoneyBill2 } from "@dub/ui/src/icons";
+import { MoneyBill2 } from "@dub/ui/icons";
 import {
   currencyFormatter,
   DICEBEAR_AVATAR_URL,
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/sales/use-sale-filters.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/sales/use-sale-filters.tsx
index 87a923ab872..c02220a5000 100644
--- a/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/sales/use-sale-filters.tsx
+++ b/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/sales/use-sale-filters.tsx
@@ -8,7 +8,7 @@ import { CUSTOMERS_MAX_PAGE_SIZE } from "@/lib/zod/schemas/customers";
 import { PARTNERS_MAX_PAGE_SIZE } from "@/lib/zod/schemas/partners";
 import { SaleStatusBadges } from "@/ui/partners/sale-status-badges";
 import { CircleDotted, useRouterStuff } from "@dub/ui";
-import { User, Users } from "@dub/ui/src/icons";
+import { User, Users } from "@dub/ui/icons";
 import { cn, DICEBEAR_AVATAR_URL, nFormatter } from "@dub/utils";
 import { useMemo, useState } from "react";
 import { useDebounce } from "use-debounce";
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/settings/program-settings.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/settings/program-settings.tsx
index 319aed8dcca..6376994a5ae 100644
--- a/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/settings/program-settings.tsx
+++ b/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/settings/program-settings.tsx
@@ -7,7 +7,7 @@ import { ProgramProps } from "@/lib/types";
 import { EmbedDocsSheet } from "@/ui/partners/embed-docs-sheet";
 import { ProgramCommissionDescription } from "@/ui/partners/program-commission-description";
 import { AnimatedSizeContainer, Button } from "@dub/ui";
-import { CircleCheckFill, Code, LoadingSpinner } from "@dub/ui/src/icons";
+import { CircleCheckFill, Code, LoadingSpinner } from "@dub/ui/icons";
 import { cn, pluralize } from "@dub/utils";
 import { useAction } from "next-safe-action/hooks";
 import { useState } from "react";
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/settings/tracking-settings.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/settings/tracking-settings.tsx
index 3ff504344d0..717c9762b50 100644
--- a/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/settings/tracking-settings.tsx
+++ b/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/settings/tracking-settings.tsx
@@ -6,7 +6,7 @@ import useProgram from "@/lib/swr/use-program";
 import useWorkspace from "@/lib/swr/use-workspace";
 import { ProgramProps } from "@/lib/types";
 import { Badge, Button } from "@dub/ui";
-import { CircleCheckFill, LoadingSpinner } from "@dub/ui/src/icons";
+import { CircleCheckFill, LoadingSpinner } from "@dub/ui/icons";
 import { cn } from "@dub/utils";
 import { useAction } from "next-safe-action/hooks";
 import { useForm } from "react-hook-form";
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/billing/page-client.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/billing/page-client.tsx
index 71b8cca4914..dec897413a6 100644
--- a/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/billing/page-client.tsx
+++ b/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/billing/page-client.tsx
@@ -12,7 +12,7 @@ import {
   ProgressBar,
   useRouterStuff,
 } from "@dub/ui";
-import { CircleDollar, CursorRays, Hyperlink } from "@dub/ui/src/icons";
+import { CircleDollar, CursorRays, Hyperlink } from "@dub/ui/icons";
 import { cn, getFirstAndLastDay, nFormatter } from "@dub/utils";
 import NumberFlow from "@number-flow/react";
 import Link from "next/link";
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/billing/usage-chart.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/billing/usage-chart.tsx
index 0c92f5568c1..22c7936c787 100644
--- a/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/billing/usage-chart.tsx
+++ b/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/billing/usage-chart.tsx
@@ -1,10 +1,7 @@
 import useUsage from "@/lib/swr/use-usage";
-import { Bars } from "@/ui/charts/bars";
-import TimeSeriesChart from "@/ui/charts/time-series-chart";
-import XAxis from "@/ui/charts/x-axis";
-import YAxis from "@/ui/charts/y-axis";
 import { EmptyState, LoadingSpinner } from "@dub/ui";
-import { CircleDollar, CursorRays, Hyperlink } from "@dub/ui/src/icons";
+import { Bars, TimeSeriesChart, XAxis, YAxis } from "@dub/ui/charts";
+import { CircleDollar, CursorRays, Hyperlink } from "@dub/ui/icons";
 import { formatDate, nFormatter } from "@dub/utils";
 import { LinearGradient } from "@visx/gradient";
 import { useSearchParams } from "next/navigation";
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/domains/default-domains.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/domains/default-domains.tsx
index 1dd6ac15807..bc5470ce9f0 100644
--- a/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/domains/default-domains.tsx
+++ b/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/domains/default-domains.tsx
@@ -14,7 +14,7 @@ import {
   GitHubEnhanced,
   GoogleEnhanced,
   Spotify,
-} from "@dub/ui/src/icons";
+} from "@dub/ui/icons";
 import { DUB_DOMAINS } from "@dub/utils";
 import Link from "next/link";
 import { useEffect, useState } from "react";
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/integrations/[integrationSlug]/page-client.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/integrations/[integrationSlug]/page-client.tsx
index a6d18d5c0a7..49b035eaf9e 100644
--- a/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/integrations/[integrationSlug]/page-client.tsx
+++ b/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/integrations/[integrationSlug]/page-client.tsx
@@ -26,7 +26,7 @@ import {
   Globe,
   OfficeBuilding,
   ShieldCheck,
-} from "@dub/ui/src/icons";
+} from "@dub/ui/icons";
 import {
   cn,
   formatDate,
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/library/tags/page-client.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/library/tags/page-client.tsx
index 64bb0944399..aa97f583b77 100644
--- a/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/library/tags/page-client.tsx
+++ b/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/library/tags/page-client.tsx
@@ -13,7 +13,7 @@ import {
   usePagination,
   useRouterStuff,
 } from "@dub/ui";
-import { Tag } from "@dub/ui/src/icons";
+import { Tag } from "@dub/ui/icons";
 import { createContext, Dispatch, SetStateAction, useState } from "react";
 import { TagCard } from "./tag-card";
 import { TagCardPlaceholder } from "./tag-card-placeholder";
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/library/tags/tag-card.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/library/tags/tag-card.tsx
index 5036ed4278c..4d5a7d2720f 100644
--- a/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/library/tags/tag-card.tsx
+++ b/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/library/tags/tag-card.tsx
@@ -12,12 +12,7 @@ import {
   useCopyToClipboard,
   useKeyboardShortcut,
 } from "@dub/ui";
-import {
-  CircleCheck,
-  Copy,
-  LoadingSpinner,
-  PenWriting,
-} from "@dub/ui/src/icons";
+import { CircleCheck, Copy, LoadingSpinner, PenWriting } from "@dub/ui/icons";
 import { cn, nFormatter, pluralize } from "@dub/utils";
 import Link from "next/link";
 import { useContext, useState } from "react";
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/library/utm/template-card.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/library/utm/template-card.tsx
index 11256098dc7..cdd60ba1a74 100644
--- a/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/library/utm/template-card.tsx
+++ b/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/library/utm/template-card.tsx
@@ -13,11 +13,7 @@ import {
   useKeyboardShortcut,
   UTM_PARAMETERS,
 } from "@dub/ui";
-import {
-  DiamondTurnRight,
-  LoadingSpinner,
-  PenWriting,
-} from "@dub/ui/src/icons";
+import { DiamondTurnRight, LoadingSpinner, PenWriting } from "@dub/ui/icons";
 import { cn, formatDate } from "@dub/utils";
 import { Fragment, useContext, useState } from "react";
 import { toast } from "sonner";
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/notifications/page-client.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/notifications/page-client.tsx
index d9b8ea32489..d4fb33e6148 100644
--- a/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/notifications/page-client.tsx
+++ b/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/notifications/page-client.tsx
@@ -3,7 +3,7 @@
 import { updateNotificationPreference } from "@/lib/actions/update-notification-preference";
 import useWorkspace from "@/lib/swr/use-workspace";
 import { Switch, useOptimisticUpdate } from "@dub/ui";
-import { Globe, Hyperlink } from "@dub/ui/src/icons";
+import { Globe, Hyperlink } from "@dub/ui/icons";
 import { useAction } from "next-safe-action/hooks";
 
 type PreferenceType = "linkUsageSummary" | "domainConfigurationUpdates";
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/oauth-apps/page-client.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/oauth-apps/page-client.tsx
index c62457a4d94..80af41cc864 100644
--- a/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/oauth-apps/page-client.tsx
+++ b/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/oauth-apps/page-client.tsx
@@ -6,8 +6,7 @@ import { OAuthAppProps } from "@/lib/types";
 import OAuthAppCard from "@/ui/oauth-apps/oauth-app-card";
 import OAuthAppPlaceholder from "@/ui/oauth-apps/oauth-app-placeholder";
 import EmptyState from "@/ui/shared/empty-state";
-import { Button, Cube, TooltipContent } from "@dub/ui";
-import { InfoTooltip } from "@dub/ui/src/tooltip";
+import { Button, Cube, InfoTooltip, TooltipContent } from "@dub/ui";
 import { fetcher } from "@dub/utils";
 import { useRouter } from "next/navigation";
 import useSWR from "swr";
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/payouts/page-client.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/payouts/page-client.tsx
index b941353bb04..b42875fe33a 100644
--- a/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/payouts/page-client.tsx
+++ b/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/payouts/page-client.tsx
@@ -4,7 +4,7 @@ import useWorkspace from "@/lib/swr/use-workspace";
 import { useAddBankAccountModal } from "@/ui/modals/add-bank-account-modal";
 import { AnimatedEmptyState } from "@/ui/shared/animated-empty-state";
 import { Button } from "@dub/ui";
-import { BadgeCheck, GreekTemple } from "@dub/ui/src/icons";
+import { BadgeCheck, GreekTemple } from "@dub/ui/icons";
 import { truncate } from "@dub/utils";
 import { WorkspaceDepositActivity } from "./activity";
 import { BankAccount } from "./bank-account";
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/tokens/page-client.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/tokens/page-client.tsx
index 56599a0f222..682ea4beb20 100644
--- a/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/tokens/page-client.tsx
+++ b/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/tokens/page-client.tsx
@@ -17,7 +17,7 @@ import {
   TokenAvatar,
   Tooltip,
 } from "@dub/ui";
-import { Key } from "@dub/ui/src/icons";
+import { Key } from "@dub/ui/icons";
 import { fetcher, timeAgo } from "@dub/utils";
 import { Edit3, MoreVertical } from "lucide-react";
 import { useState } from "react";
diff --git a/apps/web/app/app.dub.co/(dashboard)/account/settings/referrals/page.tsx b/apps/web/app/app.dub.co/(dashboard)/account/settings/referrals/page.tsx
index aa5e67f4427..5d39813daf5 100644
--- a/apps/web/app/app.dub.co/(dashboard)/account/settings/referrals/page.tsx
+++ b/apps/web/app/app.dub.co/(dashboard)/account/settings/referrals/page.tsx
@@ -3,12 +3,7 @@ import { dub } from "@/lib/dub";
 import LayoutLoader from "@/ui/layout/layout-loader";
 import { AnimatedEmptyState } from "@/ui/shared/animated-empty-state";
 import { DubWidget } from "@dub/embed-react";
-import {
-  CursorRays,
-  Hyperlink,
-  InvoiceDollar,
-  UserCheck,
-} from "@dub/ui/src/icons";
+import { CursorRays, Hyperlink, InvoiceDollar, UserCheck } from "@dub/ui/icons";
 import { Suspense } from "react";
 
 export const dynamic = "auto";
diff --git a/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/domain/custom/page.tsx b/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/domain/custom/page.tsx
index 20a7c763eca..93dd08317b3 100644
--- a/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/domain/custom/page.tsx
+++ b/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/domain/custom/page.tsx
@@ -1,4 +1,4 @@
-import { Globe } from "@dub/ui/src/icons";
+import { Globe } from "@dub/ui/icons";
 import { StepPage } from "../../step-page";
 import { Form } from "./form";
 
diff --git a/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/domain/domain-selector.tsx b/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/domain/domain-selector.tsx
index bd032af050c..48ddbf92648 100644
--- a/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/domain/domain-selector.tsx
+++ b/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/domain/domain-selector.tsx
@@ -4,7 +4,7 @@ import useLinks from "@/lib/swr/use-links";
 import useWorkspace from "@/lib/swr/use-workspace";
 import { CheckCircleFill } from "@/ui/shared/icons";
 import { Button } from "@dub/ui";
-import { Globe2, LoadingSpinner } from "@dub/ui/src/icons";
+import { Globe2, LoadingSpinner } from "@dub/ui/icons";
 import { cn } from "@dub/utils";
 import { Crown } from "lucide-react";
 import { ReactNode, useEffect, useState } from "react";
diff --git a/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/domain/page.tsx b/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/domain/page.tsx
index 491a45ec478..a817deea6b4 100644
--- a/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/domain/page.tsx
+++ b/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/domain/page.tsx
@@ -1,4 +1,4 @@
-import { Globe } from "@dub/ui/src/icons";
+import { Globe } from "@dub/ui/icons";
 import { StepPage } from "../step-page";
 import { DomainSelector } from "./domain-selector";
 
diff --git a/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/domain/register/page.tsx b/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/domain/register/page.tsx
index 1a66106ccc7..018daa2554c 100644
--- a/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/domain/register/page.tsx
+++ b/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/domain/register/page.tsx
@@ -1,4 +1,4 @@
-import { Globe } from "@dub/ui/src/icons";
+import { Globe } from "@dub/ui/icons";
 import { StepPage } from "../../step-page";
 import { Form } from "./form";
 
diff --git a/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/exit-button.tsx b/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/exit-button.tsx
index 0af1c16e832..ba3ac8c4ece 100644
--- a/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/exit-button.tsx
+++ b/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/exit-button.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { ExpandingArrow, LoadingSpinner } from "@dub/ui/src/icons";
+import { ExpandingArrow, LoadingSpinner } from "@dub/ui/icons";
 import { useOnboardingProgress } from "../use-onboarding-progress";
 
 export function ExitButton() {
diff --git a/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/invite/page.tsx b/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/invite/page.tsx
index 0e949685cfd..76ba7f2ad74 100644
--- a/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/invite/page.tsx
+++ b/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/invite/page.tsx
@@ -1,4 +1,4 @@
-import { Users } from "@dub/ui/src/icons";
+import { Users } from "@dub/ui/icons";
 import { StepPage } from "../step-page";
 import { Form } from "./form";
 
diff --git a/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/link/form.tsx b/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/link/form.tsx
index 0747389ccbd..0cf3450d87a 100644
--- a/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/link/form.tsx
+++ b/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/link/form.tsx
@@ -6,7 +6,7 @@ import { ShortLinkInput } from "@/ui/links/short-link-input";
 import { useAvailableDomains } from "@/ui/links/use-available-domains";
 import { UpgradeRequiredToast } from "@/ui/shared/upgrade-required-toast";
 import { Button } from "@dub/ui";
-import { LoadingCircle, Photo } from "@dub/ui/src/icons";
+import { LoadingCircle, Photo } from "@dub/ui/icons";
 import { getUrlWithoutUTMParams } from "@dub/utils";
 import posthog from "posthog-js";
 import { useEffect, useState } from "react";
diff --git a/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/link/page.tsx b/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/link/page.tsx
index 6c6df319293..74b46fc794e 100644
--- a/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/link/page.tsx
+++ b/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/link/page.tsx
@@ -1,4 +1,4 @@
-import { LinkBroken } from "@dub/ui/src/icons";
+import { LinkBroken } from "@dub/ui/icons";
 import { StepPage } from "../step-page";
 import { Form } from "./form";
 
diff --git a/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/workspace/page.tsx b/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/workspace/page.tsx
index 182f4c69f00..4388fabf001 100644
--- a/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/workspace/page.tsx
+++ b/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/workspace/page.tsx
@@ -1,4 +1,4 @@
-import { GridPlus } from "@dub/ui/src/icons";
+import { GridPlus } from "@dub/ui/icons";
 import { StepPage } from "../step-page";
 import { Form } from "./form";
 
diff --git a/apps/web/app/app.dub.co/(onboarding)/onboarding/later-button.tsx b/apps/web/app/app.dub.co/(onboarding)/onboarding/later-button.tsx
index 4462118d485..a4371646dc3 100644
--- a/apps/web/app/app.dub.co/(onboarding)/onboarding/later-button.tsx
+++ b/apps/web/app/app.dub.co/(onboarding)/onboarding/later-button.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { OnboardingStep } from "@/lib/onboarding/types";
-import { LoadingSpinner } from "@dub/ui/src/icons";
+import { LoadingSpinner } from "@dub/ui/icons";
 import { cn } from "@dub/utils";
 import { PropsWithChildren } from "react";
 import { useOnboardingProgress } from "./use-onboarding-progress";
diff --git a/apps/web/app/app.dub.co/embed/loading.tsx b/apps/web/app/app.dub.co/embed/loading.tsx
index 479406107d7..c500943e90a 100644
--- a/apps/web/app/app.dub.co/embed/loading.tsx
+++ b/apps/web/app/app.dub.co/embed/loading.tsx
@@ -1,4 +1,4 @@
-import { LoadingSpinner } from "@dub/ui/src/icons";
+import { LoadingSpinner } from "@dub/ui/icons";
 
 export default function EmbedLoading() {
   return (
diff --git a/apps/web/app/app.dub.co/embed/widget/page-client.tsx b/apps/web/app/app.dub.co/embed/widget/page-client.tsx
index 18b8ff51fb7..86a64fc9aba 100644
--- a/apps/web/app/app.dub.co/embed/widget/page-client.tsx
+++ b/apps/web/app/app.dub.co/embed/widget/page-client.tsx
@@ -18,7 +18,7 @@ import {
   LinkedIn,
   QRCode,
   Twitter,
-} from "@dub/ui/src/icons";
+} from "@dub/ui/icons";
 import { cn, fetcher, getPrettyUrl } from "@dub/utils";
 import { motion } from "framer-motion";
 import { CSSProperties, useState } from "react";
diff --git a/apps/web/app/expired/[domain]/page.tsx b/apps/web/app/expired/[domain]/page.tsx
index 39e006a1726..69ac5fa9656 100644
--- a/apps/web/app/expired/[domain]/page.tsx
+++ b/apps/web/app/expired/[domain]/page.tsx
@@ -1,6 +1,6 @@
 import { getDomainViaEdge } from "@/lib/planetscale/get-domain-via-edge";
 import { Background, Footer, Nav, NavMobile } from "@dub/ui";
-import { CircleHalfDottedClock } from "@dub/ui/src/icons";
+import { CircleHalfDottedClock } from "@dub/ui/icons";
 import { constructMetadata } from "@dub/utils";
 import { redirect } from "next/navigation";
 
diff --git a/apps/web/app/partners.dub.co/(apply)/apply/[programSlug]/application/success/page.tsx b/apps/web/app/partners.dub.co/(apply)/apply/[programSlug]/application/success/page.tsx
index 5faf9800b72..4f634a77e83 100644
--- a/apps/web/app/partners.dub.co/(apply)/apply/[programSlug]/application/success/page.tsx
+++ b/apps/web/app/partners.dub.co/(apply)/apply/[programSlug]/application/success/page.tsx
@@ -1,7 +1,7 @@
 import { getProgram } from "@/lib/fetchers/get-program";
 import { prisma } from "@dub/prisma";
 import { Logo } from "@dub/ui";
-import { BoltFill, CursorRays, LinesY, MoneyBills2 } from "@dub/ui/src/icons";
+import { BoltFill, CursorRays, LinesY, MoneyBills2 } from "@dub/ui/icons";
 import { DICEBEAR_AVATAR_URL } from "@dub/utils";
 import { subDays } from "date-fns";
 import { Store } from "lucide-react";
diff --git a/apps/web/app/partners.dub.co/(apply)/apply/[programSlug]/details-grid.tsx b/apps/web/app/partners.dub.co/(apply)/apply/[programSlug]/details-grid.tsx
index dc14f36c2d0..c0a5f72e65f 100644
--- a/apps/web/app/partners.dub.co/(apply)/apply/[programSlug]/details-grid.tsx
+++ b/apps/web/app/partners.dub.co/(apply)/apply/[programSlug]/details-grid.tsx
@@ -1,5 +1,5 @@
 import { Program } from "@dub/prisma/client";
-import { Calendar6, MoneyBills2 } from "@dub/ui/src/icons";
+import { Calendar6, MoneyBills2 } from "@dub/ui/icons";
 import { cn, currencyFormatter } from "@dub/utils";
 
 export function DetailsGrid({
diff --git a/apps/web/app/partners.dub.co/(auth)/page-client.tsx b/apps/web/app/partners.dub.co/(auth)/page-client.tsx
index b733b210d20..a12f2c2b071 100644
--- a/apps/web/app/partners.dub.co/(auth)/page-client.tsx
+++ b/apps/web/app/partners.dub.co/(auth)/page-client.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { buttonVariants } from "@dub/ui";
-import { LinkedIn, Twitter } from "@dub/ui/src/icons";
+import { LinkedIn, Twitter } from "@dub/ui/icons";
 import { cn } from "@dub/utils";
 import Link from "next/link";
 
diff --git a/apps/web/app/partners.dub.co/(dashboard)/marketplace/page.tsx b/apps/web/app/partners.dub.co/(dashboard)/marketplace/page.tsx
index 6c813bb0a40..1e66f8167e6 100644
--- a/apps/web/app/partners.dub.co/(dashboard)/marketplace/page.tsx
+++ b/apps/web/app/partners.dub.co/(dashboard)/marketplace/page.tsx
@@ -1,7 +1,7 @@
 import { PageContent } from "@/ui/layout/page-content";
 import { AnimatedEmptyState } from "@/ui/shared/animated-empty-state";
 import { MaxWidthWrapper } from "@dub/ui";
-import { Folder, Globe } from "@dub/ui/src/icons";
+import { Folder, Globe } from "@dub/ui/icons";
 
 export default function MarketplacePage() {
   return (
diff --git a/apps/web/app/partners.dub.co/(dashboard)/programs/[programSlug]/page-client.tsx b/apps/web/app/partners.dub.co/(dashboard)/programs/[programSlug]/page-client.tsx
index 19319dae27e..fef237563a6 100644
--- a/apps/web/app/partners.dub.co/(dashboard)/programs/[programSlug]/page-client.tsx
+++ b/apps/web/app/partners.dub.co/(dashboard)/programs/[programSlug]/page-client.tsx
@@ -3,11 +3,6 @@
 import { IntervalOptions } from "@/lib/analytics/types";
 import usePartnerAnalytics from "@/lib/swr/use-partner-analytics";
 import useProgramEnrollment from "@/lib/swr/use-program-enrollment";
-import Areas from "@/ui/charts/areas";
-import { ChartContext } from "@/ui/charts/chart-context";
-import TimeSeriesChart from "@/ui/charts/time-series-chart";
-import XAxis from "@/ui/charts/x-axis";
-import YAxis from "@/ui/charts/y-axis";
 import { HeroBackground } from "@/ui/partners/hero-background";
 import { ProgramCommissionDescription } from "@/ui/partners/program-commission-description";
 import SimpleDateRangePicker from "@/ui/shared/simple-date-range-picker";
@@ -19,7 +14,14 @@ import {
   useCopyToClipboard,
   useRouterStuff,
 } from "@dub/ui";
-import { Check, Copy, LoadingSpinner, MoneyBill2 } from "@dub/ui/src/icons";
+import {
+  Areas,
+  ChartContext,
+  TimeSeriesChart,
+  XAxis,
+  YAxis,
+} from "@dub/ui/charts";
+import { Check, Copy, LoadingSpinner, MoneyBill2 } from "@dub/ui/icons";
 import { cn, currencyFormatter, formatDate, getPrettyUrl } from "@dub/utils";
 import NumberFlow, { NumberFlowGroup } from "@number-flow/react";
 import { LinearGradient } from "@visx/gradient";
diff --git a/apps/web/app/partners.dub.co/(dashboard)/programs/[programSlug]/payouts/payout-table.tsx b/apps/web/app/partners.dub.co/(dashboard)/programs/[programSlug]/payouts/payout-table.tsx
index e6633f20a39..b912c880383 100644
--- a/apps/web/app/partners.dub.co/(dashboard)/programs/[programSlug]/payouts/payout-table.tsx
+++ b/apps/web/app/partners.dub.co/(dashboard)/programs/[programSlug]/payouts/payout-table.tsx
@@ -12,7 +12,7 @@ import {
   useRouterStuff,
   useTable,
 } from "@dub/ui";
-import { MoneyBill2 } from "@dub/ui/src/icons";
+import { MoneyBill2 } from "@dub/ui/icons";
 import { currencyFormatter, formatDate } from "@dub/utils";
 import { fetcher } from "@dub/utils/src/functions/fetcher";
 import { useEffect, useState } from "react";
diff --git a/apps/web/app/partners.dub.co/(dashboard)/programs/[programSlug]/payouts/payouts-settings-link.tsx b/apps/web/app/partners.dub.co/(dashboard)/programs/[programSlug]/payouts/payouts-settings-link.tsx
index f99cbc9a6c7..a5636b975ff 100644
--- a/apps/web/app/partners.dub.co/(dashboard)/programs/[programSlug]/payouts/payouts-settings-link.tsx
+++ b/apps/web/app/partners.dub.co/(dashboard)/programs/[programSlug]/payouts/payouts-settings-link.tsx
@@ -1,6 +1,6 @@
 "use client";
 import { buttonVariants } from "@dub/ui";
-import { Gear } from "@dub/ui/src/icons";
+import { Gear } from "@dub/ui/icons";
 import { cn } from "@dub/utils";
 import Link from "next/link";
 
diff --git a/apps/web/app/partners.dub.co/(dashboard)/programs/[programSlug]/resources/page-client.tsx b/apps/web/app/partners.dub.co/(dashboard)/programs/[programSlug]/resources/page-client.tsx
index 05a25615df5..bc61e681884 100644
--- a/apps/web/app/partners.dub.co/(dashboard)/programs/[programSlug]/resources/page-client.tsx
+++ b/apps/web/app/partners.dub.co/(dashboard)/programs/[programSlug]/resources/page-client.tsx
@@ -2,7 +2,7 @@
 
 import { AnimatedEmptyState } from "@/ui/shared/animated-empty-state";
 import { MaxWidthWrapper } from "@dub/ui";
-import { FileZip2, Palette2, Post } from "@dub/ui/src/icons";
+import { FileZip2, Palette2, Post } from "@dub/ui/icons";
 
 const emptyStateIcons = [Post, Palette2, FileZip2];
 
diff --git a/apps/web/app/partners.dub.co/(dashboard)/programs/[programSlug]/sales/sale-table.tsx b/apps/web/app/partners.dub.co/(dashboard)/programs/[programSlug]/sales/sale-table.tsx
index 5fe931b7485..5bfef912653 100644
--- a/apps/web/app/partners.dub.co/(dashboard)/programs/[programSlug]/sales/sale-table.tsx
+++ b/apps/web/app/partners.dub.co/(dashboard)/programs/[programSlug]/sales/sale-table.tsx
@@ -12,7 +12,7 @@ import {
   useRouterStuff,
   useTable,
 } from "@dub/ui";
-import { CircleDollar } from "@dub/ui/src/icons";
+import { CircleDollar } from "@dub/ui/icons";
 import { currencyFormatter, fetcher, formatDate } from "@dub/utils";
 import useSWR from "swr";
 
diff --git a/apps/web/app/partners.dub.co/(dashboard)/programs/page-client.tsx b/apps/web/app/partners.dub.co/(dashboard)/programs/page-client.tsx
index 0349f5e989b..20222fbd701 100644
--- a/apps/web/app/partners.dub.co/(dashboard)/programs/page-client.tsx
+++ b/apps/web/app/partners.dub.co/(dashboard)/programs/page-client.tsx
@@ -6,7 +6,7 @@ import { ProgramCard, ProgramCardSkeleton } from "@/ui/partners/program-card";
 import { ProgramInviteCard } from "@/ui/partners/program-invite-card";
 import { AnimatedEmptyState } from "@/ui/shared/animated-empty-state";
 import { MaxWidthWrapper } from "@dub/ui";
-import { CircleDollar, GridIcon } from "@dub/ui/src/icons";
+import { CircleDollar, GridIcon } from "@dub/ui/icons";
 
 export function PartnersDashboardPageClient() {
   const { programEnrollments, isLoading } = useProgramEnrollments();
diff --git a/apps/web/app/partners.dub.co/(dashboard)/settings/wallet/page-client.tsx b/apps/web/app/partners.dub.co/(dashboard)/settings/wallet/page-client.tsx
index f499ddf3016..73be6e794f1 100644
--- a/apps/web/app/partners.dub.co/(dashboard)/settings/wallet/page-client.tsx
+++ b/apps/web/app/partners.dub.co/(dashboard)/settings/wallet/page-client.tsx
@@ -9,7 +9,7 @@ import { usePayoutWithdrawSheet } from "@/ui/partners/payout-withdraw-sheet";
 import { AnimatedEmptyState } from "@/ui/shared/animated-empty-state";
 import { CheckCircleFill, X } from "@/ui/shared/icons";
 import { Button, Modal, Note, SimpleTooltipContent, Tooltip } from "@dub/ui";
-import { GiftFill, GreekTemple, MobilePhone } from "@dub/ui/src/icons";
+import { GiftFill, GreekTemple, MobilePhone } from "@dub/ui/icons";
 import {
   cn,
   currencyFormatter,
diff --git a/apps/web/app/partners.dub.co/(onboarding)/onboarding/page.tsx b/apps/web/app/partners.dub.co/(onboarding)/onboarding/page.tsx
index badb512597a..e660df5eb99 100644
--- a/apps/web/app/partners.dub.co/(onboarding)/onboarding/page.tsx
+++ b/apps/web/app/partners.dub.co/(onboarding)/onboarding/page.tsx
@@ -1,4 +1,4 @@
-import { ConnectedDots4 } from "@dub/ui/src/icons";
+import { ConnectedDots4 } from "@dub/ui/icons";
 import { OnboardingForm } from "./onboarding-form";
 
 export default function Onboarding() {
diff --git a/apps/web/app/partners.dub.co/(onboarding)/onboarding/verify/page.tsx b/apps/web/app/partners.dub.co/(onboarding)/onboarding/verify/page.tsx
index eb1e5e5c7dd..3806292c9ff 100644
--- a/apps/web/app/partners.dub.co/(onboarding)/onboarding/verify/page.tsx
+++ b/apps/web/app/partners.dub.co/(onboarding)/onboarding/verify/page.tsx
@@ -1,4 +1,4 @@
-import { ConnectedDots4 } from "@dub/ui/src/icons";
+import { ConnectedDots4 } from "@dub/ui/icons";
 import { VerificationForm } from "./verification-form";
 
 export default function OnboardingVerify() {
diff --git a/apps/web/app/partners.dub.co/(onboarding)/onboarding/verify/verification-form.tsx b/apps/web/app/partners.dub.co/(onboarding)/onboarding/verify/verification-form.tsx
index ce5a693fe66..51571ec465d 100644
--- a/apps/web/app/partners.dub.co/(onboarding)/onboarding/verify/verification-form.tsx
+++ b/apps/web/app/partners.dub.co/(onboarding)/onboarding/verify/verification-form.tsx
@@ -5,7 +5,7 @@ import { verifyPartnerAction } from "@/lib/actions/partners/verify-partner";
 import useDotsUser from "@/lib/swr/use-dots-user";
 import useRefreshSession from "@/lib/swr/use-refresh-session";
 import { Button, LoadingSpinner, useMediaQuery } from "@dub/ui";
-import { MobilePhone } from "@dub/ui/src/icons";
+import { MobilePhone } from "@dub/ui/icons";
 import { cn } from "@dub/utils/src/functions";
 import { OTPInput } from "input-otp";
 import { useAction } from "next-safe-action/hooks";
diff --git a/apps/web/package.json b/apps/web/package.json
index e73225da9b7..2e8ed638156 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -43,10 +43,7 @@
     "@vercel/edge-config": "^0.4.1",
     "@vercel/functions": "^1.4.2",
     "@vercel/og": "^0.6.3",
-    "@visx/axis": "^2.14.0",
-    "@visx/clip-path": "^3.3.0",
     "@visx/curve": "^3.3.0",
-    "@visx/event": "^2.6.0",
     "@visx/geo": "^2.10.0",
     "@visx/gradient": "^3.3.0",
     "@visx/grid": "^2.12.2",
@@ -55,7 +52,6 @@
     "@visx/scale": "^3.3.0",
     "@visx/shape": "^2.12.2",
     "@visx/text": "^3.3.0",
-    "@visx/tooltip": "^2.16.0",
     "ai": "^3.4.8",
     "aws4fetch": "^1.0.19",
     "bcryptjs": "^2.4.3",
@@ -64,7 +60,6 @@
     "cobe": "^0.6.3",
     "concurrently": "^8.0.1",
     "csv-parse": "^5.5.6",
-    "d3-array": "^3.2.4",
     "date-fns": "^3.6.0",
     "dub": "^0.46.1",
     "framer-motion": "^10.16.16",
diff --git a/apps/web/ui/analytics/analytics-area-chart.tsx b/apps/web/ui/analytics/analytics-area-chart.tsx
index 0cb240f7bd4..da364bf8c46 100644
--- a/apps/web/ui/analytics/analytics-area-chart.tsx
+++ b/apps/web/ui/analytics/analytics-area-chart.tsx
@@ -1,12 +1,9 @@
 import { EventType } from "@/lib/analytics/types";
 import { editQueryString } from "@/lib/analytics/utils";
+import { Areas, TimeSeriesChart, XAxis, YAxis } from "@dub/ui/charts";
 import { cn, fetcher, getDaysDifference, nFormatter } from "@dub/utils";
 import { Fragment, useCallback, useContext, useMemo } from "react";
 import useSWR from "swr";
-import Areas from "../charts/areas";
-import TimeSeriesChart from "../charts/time-series-chart";
-import XAxis from "../charts/x-axis";
-import YAxis from "../charts/y-axis";
 import { AnalyticsLoadingSpinner } from "./analytics-loading-spinner";
 import { AnalyticsContext } from "./analytics-provider";
 
diff --git a/apps/web/ui/analytics/analytics-card.tsx b/apps/web/ui/analytics/analytics-card.tsx
index 85e5efc6913..774a64bf406 100644
--- a/apps/web/ui/analytics/analytics-card.tsx
+++ b/apps/web/ui/analytics/analytics-card.tsx
@@ -1,6 +1,6 @@
 import { EventType } from "@/lib/analytics/types";
 import { Button, Modal, Popover, TabSelect, useMediaQuery } from "@dub/ui";
-import { CursorRays, InvoiceDollar, UserCheck } from "@dub/ui/src/icons";
+import { CursorRays, InvoiceDollar, UserCheck } from "@dub/ui/icons";
 import { cn } from "@dub/utils";
 import { ChevronsUpDown } from "lucide-react";
 import {
diff --git a/apps/web/ui/analytics/analytics-funnel-chart.tsx b/apps/web/ui/analytics/analytics-funnel-chart.tsx
index c0ef3830aaa..486f2b03c56 100644
--- a/apps/web/ui/analytics/analytics-funnel-chart.tsx
+++ b/apps/web/ui/analytics/analytics-funnel-chart.tsx
@@ -1,243 +1,45 @@
-import { useMediaQuery } from "@dub/ui";
-import { cn, nFormatter } from "@dub/utils";
-import { curveBasis } from "@visx/curve";
-import { ParentSize } from "@visx/responsive";
-import { scaleLinear } from "@visx/scale";
-import { Area } from "@visx/shape";
-import { Text } from "@visx/text";
-import { motion } from "framer-motion";
-import { Fragment, useCallback, useContext, useMemo, useState } from "react";
+import { FunnelChart } from "@dub/ui/charts";
+import { useContext, useMemo } from "react";
 import { AnalyticsLoadingSpinner } from "./analytics-loading-spinner";
 import { AnalyticsContext } from "./analytics-provider";
 
-const steps = [
-  {
-    id: "clicks",
-    label: "Clicks",
-    colorClassName: "text-blue-600",
-  },
-  {
-    id: "leads",
-    label: "Leads",
-    colorClassName: "text-violet-600",
-  },
-  {
-    id: "sales",
-    label: "Sales",
-    colorClassName: "text-teal-400",
-  },
-];
-
-const layers = [
-  {
-    opacity: 1,
-    padding: 0,
-  },
-  {
-    opacity: 0.3,
-    padding: 8,
-  },
-  {
-    opacity: 0.15,
-    padding: 16,
-  },
-];
-
-const maxLayerPadding = 16;
-const chartPadding = 40;
-
 export function AnalyticsFunnelChart() {
-  return (
-    // p-5 pt-10 sm:p-10
-    <div className="flex h-[444px] w-full items-center justify-center sm:h-[464px]">
-      <ParentSize className="relative">
-        {({ width, height }) =>
-          width && height ? (
-            <AnalyticsFunnelChartInner width={width} height={height} />
-          ) : null
-        }
-      </ParentSize>
-    </div>
-  );
-}
-
-export function AnalyticsFunnelChartInner({
-  width,
-  height,
-}: {
-  width: number;
-  height: number;
-}) {
   const { totalEvents } = useContext(AnalyticsContext);
 
-  const { isMobile } = useMediaQuery();
-
-  const [tooltip, setTooltip] = useState<string | null>(null);
-  const tooltipStep = steps.find(({ id }) => id === tooltip);
-
-  const stepValue = useCallback(
-    (step: string) => totalEvents?.[step] ?? 0,
+  const steps = useMemo(
+    () => [
+      {
+        id: "clicks",
+        label: "Clicks",
+        value: totalEvents?.clicks ?? 0,
+        colorClassName: "text-blue-600",
+      },
+      {
+        id: "leads",
+        label: "Leads",
+        value: totalEvents?.leads ?? 0,
+        colorClassName: "text-violet-600",
+      },
+      {
+        id: "sales",
+        label: "Sales",
+        value: totalEvents?.sales ?? 0,
+        additionalValue: totalEvents?.saleAmount ?? 0,
+        colorClassName: "text-teal-400",
+      },
+    ],
     [totalEvents],
   );
 
-  const data = useMemo(() => {
-    return Object.fromEntries(
-      steps.map(({ id }, idx) => {
-        const current = stepValue(id);
-        const next = stepValue(
-          steps[idx + 1]?.id ?? steps[steps.length - 1].id,
-        );
-        return [id, interpolate(current, next)];
-      }),
-    );
-  }, [stepValue]);
-
-  const zeroData = useMemo(() => interpolate(0, 0), [steps]);
-
-  const maxValue = useMemo(
-    () => Math.max(...steps.map((step) => stepValue(step.id))),
-    [stepValue],
-  );
-
-  const xScale = scaleLinear({
-    domain: [0, steps.length],
-    range: [0, width],
-  });
-
-  const yScale = scaleLinear({
-    domain: [maxValue, -maxValue],
-    range: [
-      height - maxLayerPadding - chartPadding,
-      maxLayerPadding + chartPadding,
-    ],
-  });
-
-  return totalEvents ? (
-    <div className="relative">
-      <svg width={width} height={height}>
-        {steps.map(({ id, colorClassName }, idx) => (
-          <Fragment key={id}>
-            {/* Background */}
-            <rect
-              x={xScale(idx)}
-              y={0}
-              width={width / steps.length}
-              height={height}
-              className="fill-transparent transition-colors hover:fill-blue-600/5"
-              onPointerEnter={() => setTooltip(id)}
-              onPointerDown={() => setTooltip(id)}
-              onPointerLeave={() => !isMobile && setTooltip(null)}
-            />
-            {/* Divider line */}
-            <line
-              x1={xScale(idx)}
-              y1={0}
-              x2={xScale(idx)}
-              y2={height}
-              className="stroke-black/5 sm:stroke-black/10"
-            />
-
-            {/* Funnel */}
-            {layers.map(({ opacity, padding }) => (
-              <Area
-                data={data[id]}
-                curve={curveBasis}
-                x={(d) => xScale(idx + d.x)}
-                y0={(d) => yScale(-d.y) - padding}
-                y1={(d) => yScale(d.y) + padding}
-              >
-                {({ path }) => {
-                  return (
-                    <motion.path
-                      initial={{ d: path(zeroData) || "", opacity: 0 }}
-                      animate={{ d: path(data[id]) || "", opacity }}
-                      className={cn(colorClassName, "pointer-events-none")}
-                      fill="currentColor"
-                    />
-                  );
-                }}
-              </Area>
-            ))}
-
-            {/* Percentage */}
-            {totalEvents && (
-              <Text
-                x={(xScale(idx) + xScale(idx + 1)) / 2}
-                y={height / 2}
-                textAnchor="middle"
-                verticalAnchor="middle"
-                fill="white"
-                fontSize={16}
-                className="pointer-events-none select-none"
-              >
-                {formatPercentage((totalEvents?.[id] / maxValue) * 100) + "%"}
-              </Text>
-            )}
-          </Fragment>
-        ))}
-      </svg>
-      {tooltipStep && (
-        <div
-          key={tooltipStep.id}
-          className="animate-slide-up-fade pointer-events-none absolute top-16 flex items-center justify-center px-1 pb-4 sm:top-12"
-          style={{
-            left: xScale(steps.findIndex(({ id }) => id === tooltipStep.id)),
-            width: width / steps.length,
-          }}
-        >
-          <div
-            className={cn(
-              "rounded-lg border border-gray-200 bg-white text-base shadow-sm",
-            )}
-          >
-            <p className="border-b border-gray-200 px-3 py-2 text-sm text-gray-900 sm:px-4 sm:py-3">
-              {tooltipStep.label}
-            </p>
-            <div className="flex flex-wrap justify-between gap-x-4 gap-y-2 px-3 py-2 text-sm sm:px-4 sm:py-3">
-              <div className="flex items-center gap-2">
-                <div
-                  className={cn(
-                    tooltipStep.colorClassName,
-                    "h-2 w-2 shrink-0 rounded-sm bg-current opacity-50 shadow-[inset_0_0_0_1px_#0003]",
-                  )}
-                />
-                <p className="whitespace-nowrap capitalize text-gray-600">
-                  {formatPercentage(
-                    (stepValue(tooltipStep.id) / maxValue) * 100,
-                  ) + "%"}
-                </p>
-              </div>
-              <p className="whitespace-nowrap font-medium text-gray-900">
-                {nFormatter(stepValue(tooltipStep.id), { full: true })}
-                {tooltipStep.id === "sales" && (
-                  <span className="text-gray-500">
-                    {" "}
-                    (${nFormatter(totalEvents.saleAmount / 100)})
-                  </span>
-                )}
-              </p>
-            </div>
-          </div>
+  return (
+    <div className="h-[444px] w-full sm:h-[464px]">
+      {totalEvents ? (
+        <FunnelChart steps={steps} />
+      ) : (
+        <div className="flex h-full w-full items-center justify-center">
+          <AnalyticsLoadingSpinner />
         </div>
       )}
     </div>
-  ) : (
-    <div className="flex h-full w-full items-center justify-center">
-      <AnalyticsLoadingSpinner />
-    </div>
   );
 }
-
-const formatPercentage = (value: number) => {
-  return value > 0 && value < 0.01
-    ? "< 0.01"
-    : nFormatter(value, { digits: 2 });
-};
-
-const interpolate = (from: number, to: number) => [
-  { x: 0, y: from },
-  { x: 0.3, y: from },
-  { x: 0.5, y: (from + to) / 2 },
-  { x: 0.7, y: to },
-  { x: 1, y: to },
-];
diff --git a/apps/web/ui/analytics/continent-icon.tsx b/apps/web/ui/analytics/continent-icon.tsx
index d4c28f752dc..f1886ae0614 100644
--- a/apps/web/ui/analytics/continent-icon.tsx
+++ b/apps/web/ui/analytics/continent-icon.tsx
@@ -6,7 +6,7 @@ import {
   NorthAmerica,
   Oceania,
   SouthAmerica,
-} from "@dub/ui/src/icons";
+} from "@dub/ui/icons";
 
 export default function ContinentIcon({
   display,
diff --git a/apps/web/ui/analytics/device-icon.tsx b/apps/web/ui/analytics/device-icon.tsx
index 6fc0bd03d92..0512322d327 100644
--- a/apps/web/ui/analytics/device-icon.tsx
+++ b/apps/web/ui/analytics/device-icon.tsx
@@ -10,7 +10,7 @@ import {
   TV,
   Tablet,
   Watch,
-} from "@dub/ui/src/icons";
+} from "@dub/ui/icons";
 
 export default function DeviceIcon({
   display,
diff --git a/apps/web/ui/analytics/devices.tsx b/apps/web/ui/analytics/devices.tsx
index d16663df923..9dd5962480b 100644
--- a/apps/web/ui/analytics/devices.tsx
+++ b/apps/web/ui/analytics/devices.tsx
@@ -4,7 +4,7 @@ import {
 } from "@/lib/analytics/constants";
 import { DeviceTabs } from "@/lib/analytics/types";
 import { useRouterStuff } from "@dub/ui";
-import { Cube, CursorRays, MobilePhone, Window } from "@dub/ui/src/icons";
+import { Cube, CursorRays, MobilePhone, Window } from "@dub/ui/icons";
 import { useContext, useState } from "react";
 import { AnalyticsCard } from "./analytics-card";
 import { AnalyticsLoadingSpinner } from "./analytics-loading-spinner";
diff --git a/apps/web/ui/analytics/events/events-table.tsx b/apps/web/ui/analytics/events/events-table.tsx
index 008f6705afa..41fc206e42a 100644
--- a/apps/web/ui/analytics/events/events-table.tsx
+++ b/apps/web/ui/analytics/events/events-table.tsx
@@ -17,7 +17,7 @@ import {
   useRouterStuff,
   useTable,
 } from "@dub/ui";
-import { CursorRays, Globe, Magnifier, QRCode } from "@dub/ui/src/icons";
+import { CursorRays, Globe, Magnifier, QRCode } from "@dub/ui/icons";
 import {
   CONTINENTS,
   COUNTRIES,
diff --git a/apps/web/ui/analytics/events/filter-button.tsx b/apps/web/ui/analytics/events/filter-button.tsx
index 1a6c7d437ef..d745f32fbf6 100644
--- a/apps/web/ui/analytics/events/filter-button.tsx
+++ b/apps/web/ui/analytics/events/filter-button.tsx
@@ -1,5 +1,5 @@
 import { useRouterStuff } from "@dub/ui";
-import { FilterBars } from "@dub/ui/src/icons";
+import { FilterBars } from "@dub/ui/icons";
 import Link from "next/link";
 
 export default function FilterButton({ set }: { set: Record<string, any> }) {
diff --git a/apps/web/ui/analytics/events/index.tsx b/apps/web/ui/analytics/events/index.tsx
index 6d33b9341d9..82a7a9a762c 100644
--- a/apps/web/ui/analytics/events/index.tsx
+++ b/apps/web/ui/analytics/events/index.tsx
@@ -2,7 +2,7 @@
 
 import useWorkspace from "@/lib/swr/use-workspace";
 import EmptyState from "@/ui/shared/empty-state";
-import { Menu3 } from "@dub/ui/src/icons";
+import { Menu3 } from "@dub/ui/icons";
 import { useContext } from "react";
 import AnalyticsProvider, { AnalyticsContext } from "../analytics-provider";
 import Toggle from "../toggle";
diff --git a/apps/web/ui/analytics/events/row-menu-button.tsx b/apps/web/ui/analytics/events/row-menu-button.tsx
index 24655a57abb..d6046a4485a 100644
--- a/apps/web/ui/analytics/events/row-menu-button.tsx
+++ b/apps/web/ui/analytics/events/row-menu-button.tsx
@@ -1,5 +1,5 @@
 import { Button, Icon, Popover, useCopyToClipboard } from "@dub/ui";
-import { Copy, Dots } from "@dub/ui/src/icons";
+import { Copy, Dots } from "@dub/ui/icons";
 import { cn } from "@dub/utils";
 import { Row } from "@tanstack/react-table";
 import { Command } from "cmdk";
diff --git a/apps/web/ui/analytics/export-button.tsx b/apps/web/ui/analytics/export-button.tsx
index b4d8b6a7f54..24d1cca62b3 100644
--- a/apps/web/ui/analytics/export-button.tsx
+++ b/apps/web/ui/analytics/export-button.tsx
@@ -1,5 +1,5 @@
 import { Button } from "@dub/ui";
-import { Download } from "@dub/ui/src/icons";
+import { Download } from "@dub/ui/icons";
 import { Dispatch, SetStateAction, useContext, useState } from "react";
 import { toast } from "sonner";
 import { AnalyticsContext } from "./analytics-provider";
diff --git a/apps/web/ui/analytics/link-preview.tsx b/apps/web/ui/analytics/link-preview.tsx
index 8f651b10f56..fcaad2e5908 100644
--- a/apps/web/ui/analytics/link-preview.tsx
+++ b/apps/web/ui/analytics/link-preview.tsx
@@ -1,6 +1,6 @@
 import { LinkProps } from "@/lib/types";
 import { CopyButton, LinkLogo } from "@dub/ui";
-import { ArrowTurnRight2 } from "@dub/ui/src/icons";
+import { ArrowTurnRight2 } from "@dub/ui/icons";
 import { getApexDomain, getPrettyUrl, linkConstructor } from "@dub/utils";
 
 export default function LinkPreviewTooltip({ data }: { data: LinkProps }) {
diff --git a/apps/web/ui/analytics/locations.tsx b/apps/web/ui/analytics/locations.tsx
index 22d0df4d525..e20540a7310 100644
--- a/apps/web/ui/analytics/locations.tsx
+++ b/apps/web/ui/analytics/locations.tsx
@@ -5,7 +5,7 @@ import {
   LocationPin,
   MapPosition,
   OfficeBuilding,
-} from "@dub/ui/src/icons";
+} from "@dub/ui/icons";
 import { CONTINENTS, COUNTRIES, REGIONS } from "@dub/utils";
 import { useContext, useState } from "react";
 import { AnalyticsCard } from "./analytics-card";
diff --git a/apps/web/ui/analytics/main.tsx b/apps/web/ui/analytics/main.tsx
index e011bc27818..6d348a70149 100644
--- a/apps/web/ui/analytics/main.tsx
+++ b/apps/web/ui/analytics/main.tsx
@@ -1,6 +1,6 @@
 import { EventType } from "@/lib/analytics/types";
 import { Button, Tooltip, useRouterStuff } from "@dub/ui";
-import { ChartLine, Filter2 } from "@dub/ui/src/icons";
+import { ChartLine, Filter2 } from "@dub/ui/icons";
 import { cn } from "@dub/utils";
 import NumberFlow, { NumberFlowGroup } from "@number-flow/react";
 import { ChevronRight, Lock } from "lucide-react";
diff --git a/apps/web/ui/analytics/referer.tsx b/apps/web/ui/analytics/referer.tsx
index e122eb98054..ab29b6ac229 100644
--- a/apps/web/ui/analytics/referer.tsx
+++ b/apps/web/ui/analytics/referer.tsx
@@ -1,6 +1,6 @@
 import { SINGULAR_ANALYTICS_ENDPOINTS } from "@/lib/analytics/constants";
 import { BlurImage, useRouterStuff } from "@dub/ui";
-import { ReferredVia } from "@dub/ui/src/icons";
+import { ReferredVia } from "@dub/ui/icons";
 import { getApexDomain, GOOGLE_FAVICON_URL } from "@dub/utils";
 import { Link2 } from "lucide-react";
 import { useContext, useState } from "react";
diff --git a/apps/web/ui/analytics/toggle.tsx b/apps/web/ui/analytics/toggle.tsx
index 04126877246..5f4f053f0ae 100644
--- a/apps/web/ui/analytics/toggle.tsx
+++ b/apps/web/ui/analytics/toggle.tsx
@@ -45,7 +45,7 @@ import {
   ReferredVia,
   Tag,
   Window,
-} from "@dub/ui/src/icons";
+} from "@dub/ui/icons";
 import {
   APP_DOMAIN,
   CONTINENTS,
diff --git a/apps/web/ui/analytics/top-links.tsx b/apps/web/ui/analytics/top-links.tsx
index 0263e8d91b6..cf2c5908a20 100644
--- a/apps/web/ui/analytics/top-links.tsx
+++ b/apps/web/ui/analytics/top-links.tsx
@@ -1,5 +1,5 @@
 import { LinkLogo, useRouterStuff } from "@dub/ui";
-import { Globe, Hyperlink } from "@dub/ui/src/icons";
+import { Globe, Hyperlink } from "@dub/ui/icons";
 import { getApexDomain } from "@dub/utils";
 import { useContext, useState } from "react";
 import { AnalyticsCard } from "./analytics-card";
diff --git a/apps/web/ui/auth/login/email-sign-in.tsx b/apps/web/ui/auth/login/email-sign-in.tsx
index 136c46c2ea6..d8709445eae 100644
--- a/apps/web/ui/auth/login/email-sign-in.tsx
+++ b/apps/web/ui/auth/login/email-sign-in.tsx
@@ -1,6 +1,6 @@
 import { emailSchema } from "@/lib/zod/schemas/auth";
 import { Button, Input, useMediaQuery } from "@dub/ui";
-import { InputPassword } from "@dub/ui/src/icons";
+import { InputPassword } from "@dub/ui/icons";
 import { cn } from "@dub/utils";
 import { Mail } from "lucide-react";
 import { signIn } from "next-auth/react";
diff --git a/apps/web/ui/auth/login/google-button.tsx b/apps/web/ui/auth/login/google-button.tsx
index cedd04caa9f..108eba1b1c8 100644
--- a/apps/web/ui/auth/login/google-button.tsx
+++ b/apps/web/ui/auth/login/google-button.tsx
@@ -1,5 +1,5 @@
 import { Button } from "@dub/ui";
-import { Google } from "@dub/ui/src/icons";
+import { Google } from "@dub/ui/icons";
 import { signIn } from "next-auth/react";
 import { useSearchParams } from "next/navigation";
 import { useContext } from "react";
diff --git a/apps/web/ui/domains/domain-card-title-column.tsx b/apps/web/ui/domains/domain-card-title-column.tsx
index 1343339f98b..40550963376 100644
--- a/apps/web/ui/domains/domain-card-title-column.tsx
+++ b/apps/web/ui/domains/domain-card-title-column.tsx
@@ -1,4 +1,4 @@
-import { ArrowTurnRight2, Flag2, Globe } from "@dub/ui/src/icons";
+import { ArrowTurnRight2, Flag2, Globe } from "@dub/ui/icons";
 import { cn, getPrettyUrl, punycode } from "@dub/utils";
 import { Star } from "lucide-react";
 
diff --git a/apps/web/ui/domains/domain-card.tsx b/apps/web/ui/domains/domain-card.tsx
index a4ab8b8b647..af247ccd438 100644
--- a/apps/web/ui/domains/domain-card.tsx
+++ b/apps/web/ui/domains/domain-card.tsx
@@ -28,7 +28,7 @@ import {
   Globe,
   Hyperlink,
   PenWriting,
-} from "@dub/ui/src/icons";
+} from "@dub/ui/icons";
 import { cn, DEFAULT_LINK_PROPS, fetcher, nFormatter } from "@dub/utils";
 import { motion } from "framer-motion";
 import { Archive, ChevronDown, FolderInput, QrCode } from "lucide-react";
diff --git a/apps/web/ui/domains/free-dot-link-banner.tsx b/apps/web/ui/domains/free-dot-link-banner.tsx
index a0fc6c415b1..4d48cd76edb 100644
--- a/apps/web/ui/domains/free-dot-link-banner.tsx
+++ b/apps/web/ui/domains/free-dot-link-banner.tsx
@@ -1,6 +1,6 @@
 import useWorkspace from "@/lib/swr/use-workspace";
 import { Grid, useLocalStorage } from "@dub/ui";
-import { LinkBroken } from "@dub/ui/src/icons";
+import { LinkBroken } from "@dub/ui/icons";
 import { useRegisterDomainModal } from "../modals/register-domain-modal";
 import { X } from "../shared/icons";
 
diff --git a/apps/web/ui/domains/register-domain-form.tsx b/apps/web/ui/domains/register-domain-form.tsx
index d7649f601a9..b3e5b8c2a53 100644
--- a/apps/web/ui/domains/register-domain-form.tsx
+++ b/apps/web/ui/domains/register-domain-form.tsx
@@ -7,7 +7,7 @@ import {
   TooltipContent,
   useMediaQuery,
 } from "@dub/ui";
-import { LoadingSpinner } from "@dub/ui/src/icons";
+import { LoadingSpinner } from "@dub/ui/icons";
 import { cn, truncate } from "@dub/utils";
 import { CircleCheck, Star } from "lucide-react";
 import Link from "next/link";
diff --git a/apps/web/ui/dots/platforms.tsx b/apps/web/ui/dots/platforms.tsx
index cf9e0c25aba..4257d7e83b8 100644
--- a/apps/web/ui/dots/platforms.tsx
+++ b/apps/web/ui/dots/platforms.tsx
@@ -6,7 +6,7 @@ import {
   Payoneer,
   Paypal,
   Venmo,
-} from "@dub/ui/src/icons";
+} from "@dub/ui/icons";
 
 export const DOTS_PAYOUT_PLATFORMS = [
   {
diff --git a/apps/web/ui/integrations/integration-card.tsx b/apps/web/ui/integrations/integration-card.tsx
index 99e9db65fc1..25c45ec0382 100644
--- a/apps/web/ui/integrations/integration-card.tsx
+++ b/apps/web/ui/integrations/integration-card.tsx
@@ -9,7 +9,7 @@ import {
   Download,
   OfficeBuilding,
   ShieldCheck,
-} from "@dub/ui/src/icons";
+} from "@dub/ui/icons";
 import { pluralize } from "@dub/utils";
 import Link from "next/link";
 
diff --git a/apps/web/ui/layout/sidebar/app-sidebar-nav.tsx b/apps/web/ui/layout/sidebar/app-sidebar-nav.tsx
index ec13a0330c7..6692bf86652 100644
--- a/apps/web/ui/layout/sidebar/app-sidebar-nav.tsx
+++ b/apps/web/ui/layout/sidebar/app-sidebar-nav.tsx
@@ -19,7 +19,7 @@ import {
   ShieldCheck,
   Users6,
   Webhook,
-} from "@dub/ui/src/icons";
+} from "@dub/ui/icons";
 import { Session } from "next-auth";
 import { useSession } from "next-auth/react";
 import { useParams, usePathname } from "next/navigation";
diff --git a/apps/web/ui/layout/sidebar/partner-program-dropdown.tsx b/apps/web/ui/layout/sidebar/partner-program-dropdown.tsx
index 0f7b156297e..9f1800bcd9d 100644
--- a/apps/web/ui/layout/sidebar/partner-program-dropdown.tsx
+++ b/apps/web/ui/layout/sidebar/partner-program-dropdown.tsx
@@ -4,7 +4,7 @@ import usePartnerProfile from "@/lib/swr/use-partner-profile";
 import useProgramEnrollments from "@/lib/swr/use-program-enrollments";
 import { PartnerProps, ProgramProps } from "@/lib/types";
 import { BlurImage, Popover, useScrollProgress } from "@dub/ui";
-import { Check2, Gear } from "@dub/ui/src/icons";
+import { Check2, Gear } from "@dub/ui/icons";
 import { cn, DICEBEAR_AVATAR_URL } from "@dub/utils";
 import { ChevronsUpDown } from "lucide-react";
 import Link from "next/link";
diff --git a/apps/web/ui/layout/sidebar/partners-sidebar-nav.tsx b/apps/web/ui/layout/sidebar/partners-sidebar-nav.tsx
index 7a657c9b340..7bf0774d58b 100644
--- a/apps/web/ui/layout/sidebar/partners-sidebar-nav.tsx
+++ b/apps/web/ui/layout/sidebar/partners-sidebar-nav.tsx
@@ -20,7 +20,7 @@ import {
   User,
   UserCheck,
   Users,
-} from "@dub/ui/src/icons";
+} from "@dub/ui/icons";
 import { cn, currencyFormatter } from "@dub/utils";
 import { Store } from "lucide-react";
 import Link from "next/link";
diff --git a/apps/web/ui/layout/sidebar/refer-button.tsx b/apps/web/ui/layout/sidebar/refer-button.tsx
index 648f0d1804c..f9d0a9d2ff9 100644
--- a/apps/web/ui/layout/sidebar/refer-button.tsx
+++ b/apps/web/ui/layout/sidebar/refer-button.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { DubWidget } from "@dub/embed-react";
-import { Gift } from "@dub/ui/src/icons";
+import { Gift } from "@dub/ui/icons";
 import { cn, fetcher } from "@dub/utils";
 import { AnimatePresence, motion } from "framer-motion";
 import useSWRImmutable from "swr/immutable";
diff --git a/apps/web/ui/layout/sidebar/usage.tsx b/apps/web/ui/layout/sidebar/usage.tsx
index 7e4cc2b0f35..ff3084c67bb 100644
--- a/apps/web/ui/layout/sidebar/usage.tsx
+++ b/apps/web/ui/layout/sidebar/usage.tsx
@@ -3,7 +3,7 @@
 import useWorkspace from "@/lib/swr/use-workspace";
 import ManageSubscriptionButton from "@/ui/workspaces/manage-subscription-button";
 import { AnimatedSizeContainer, Icon, buttonVariants } from "@dub/ui";
-import { CursorRays, Hyperlink } from "@dub/ui/src/icons";
+import { CursorRays, Hyperlink } from "@dub/ui/icons";
 import { cn, getFirstAndLastDay, getNextPlan, nFormatter } from "@dub/utils";
 import { AnimatePresence, motion } from "framer-motion";
 import { ChevronRight } from "lucide-react";
diff --git a/apps/web/ui/layout/sidebar/workspace-dropdown.tsx b/apps/web/ui/layout/sidebar/workspace-dropdown.tsx
index d36fb01f337..cd73769b0fc 100644
--- a/apps/web/ui/layout/sidebar/workspace-dropdown.tsx
+++ b/apps/web/ui/layout/sidebar/workspace-dropdown.tsx
@@ -9,7 +9,7 @@ import {
   Popover,
   useScrollProgress,
 } from "@dub/ui";
-import { Book2, Check2, Plus } from "@dub/ui/src/icons";
+import { Book2, Check2, Plus } from "@dub/ui/icons";
 import { cn, DICEBEAR_AVATAR_URL } from "@dub/utils";
 import { ChevronsUpDown, HelpCircle } from "lucide-react";
 import { useSession } from "next-auth/react";
diff --git a/apps/web/ui/layout/toolbar/onboarding/onboarding-button.tsx b/apps/web/ui/layout/toolbar/onboarding/onboarding-button.tsx
index 82d4807b71e..9e774a05b69 100644
--- a/apps/web/ui/layout/toolbar/onboarding/onboarding-button.tsx
+++ b/apps/web/ui/layout/toolbar/onboarding/onboarding-button.tsx
@@ -5,7 +5,7 @@ import useLinksCount from "@/lib/swr/use-links-count";
 import useUsers from "@/lib/swr/use-users";
 import { CheckCircleFill, ThreeDots } from "@/ui/shared/icons";
 import { Button, Popover, useLocalStorage, useMediaQuery } from "@dub/ui";
-import { CircleDotted, ExpandingArrow } from "@dub/ui/src/icons";
+import { CircleDotted, ExpandingArrow } from "@dub/ui/icons";
 import { ChevronDown } from "lucide-react";
 import Link from "next/link";
 import { useParams } from "next/navigation";
diff --git a/apps/web/ui/layout/user-survey/survey-form.tsx b/apps/web/ui/layout/user-survey/survey-form.tsx
index 1e42e4b87b5..dca17bda335 100644
--- a/apps/web/ui/layout/user-survey/survey-form.tsx
+++ b/apps/web/ui/layout/user-survey/survey-form.tsx
@@ -11,7 +11,7 @@ import {
   useMediaQuery,
   Wordmark,
 } from "@dub/ui";
-import { Globe } from "@dub/ui/src/icons";
+import { Globe } from "@dub/ui/icons";
 import { cn } from "@dub/utils";
 import { ChevronRight } from "lucide-react";
 import { useContext, useState } from "react";
diff --git a/apps/web/ui/links/archived-links-hint.tsx b/apps/web/ui/links/archived-links-hint.tsx
index 6530150f137..2c76592a86a 100644
--- a/apps/web/ui/links/archived-links-hint.tsx
+++ b/apps/web/ui/links/archived-links-hint.tsx
@@ -1,6 +1,6 @@
 import useLinksCount from "@/lib/swr/use-links-count";
 import { Button, Tooltip } from "@dub/ui";
-import { BoxArchive } from "@dub/ui/src/icons";
+import { BoxArchive } from "@dub/ui/icons";
 import { pluralize } from "@dub/utils";
 import { useSearchParams } from "next/navigation";
 import { useContext } from "react";
diff --git a/apps/web/ui/links/link-controls.tsx b/apps/web/ui/links/link-controls.tsx
index 884b4e29e16..6673d2197b9 100644
--- a/apps/web/ui/links/link-controls.tsx
+++ b/apps/web/ui/links/link-controls.tsx
@@ -10,7 +10,7 @@ import {
   useCopyToClipboard,
   useKeyboardShortcut,
 } from "@dub/ui";
-import { BoxArchive, CircleCheck, Copy, QRCode } from "@dub/ui/src/icons";
+import { BoxArchive, CircleCheck, Copy, QRCode } from "@dub/ui/icons";
 import { cn, isDubDomain, nanoid, punycode } from "@dub/utils";
 import { CopyPlus, Delete, FolderInput } from "lucide-react";
 import { useParams } from "next/navigation";
diff --git a/apps/web/ui/links/link-details-column.tsx b/apps/web/ui/links/link-details-column.tsx
index 7f1203e892f..fd0a16f39af 100644
--- a/apps/web/ui/links/link-details-column.tsx
+++ b/apps/web/ui/links/link-details-column.tsx
@@ -11,7 +11,7 @@ import {
   UserCheck,
   useRouterStuff,
 } from "@dub/ui";
-import { ReferredVia } from "@dub/ui/src/icons";
+import { ReferredVia } from "@dub/ui/icons";
 import {
   APP_DOMAIN,
   cn,
diff --git a/apps/web/ui/links/link-display.tsx b/apps/web/ui/links/link-display.tsx
index ef61a51138e..eff4b5a8883 100644
--- a/apps/web/ui/links/link-display.tsx
+++ b/apps/web/ui/links/link-display.tsx
@@ -11,7 +11,7 @@ import {
   GridLayoutRows,
   Sliders,
   TableRows2,
-} from "@dub/ui/src/icons";
+} from "@dub/ui/icons";
 import { cn } from "@dub/utils";
 import { AnimatePresence, motion } from "framer-motion";
 import { ChevronDown } from "lucide-react";
diff --git a/apps/web/ui/links/link-title-column.tsx b/apps/web/ui/links/link-title-column.tsx
index 5a7433875e0..9b39123e80b 100644
--- a/apps/web/ui/links/link-title-column.tsx
+++ b/apps/web/ui/links/link-title-column.tsx
@@ -24,7 +24,7 @@ import {
   InputPassword,
   Page2,
   Robot,
-} from "@dub/ui/src/icons";
+} from "@dub/ui/icons";
 import {
   cn,
   fetcher,
diff --git a/apps/web/ui/links/links-container.tsx b/apps/web/ui/links/links-container.tsx
index 8189c5c0654..b8f2f6bc4cc 100644
--- a/apps/web/ui/links/links-container.tsx
+++ b/apps/web/ui/links/links-container.tsx
@@ -9,7 +9,7 @@ import {
   PaginationControls,
   usePagination,
 } from "@dub/ui";
-import { CursorRays, Hyperlink, LoadingSpinner } from "@dub/ui/src/icons";
+import { CursorRays, Hyperlink, LoadingSpinner } from "@dub/ui/icons";
 import { cn } from "@dub/utils";
 import { useSearchParams } from "next/navigation";
 import {
diff --git a/apps/web/ui/links/short-link-input.tsx b/apps/web/ui/links/short-link-input.tsx
index 89ebd8d5eb0..f22baef1436 100644
--- a/apps/web/ui/links/short-link-input.tsx
+++ b/apps/web/ui/links/short-link-input.tsx
@@ -15,7 +15,7 @@ import {
   Twitter,
   useKeyboardShortcut,
 } from "@dub/ui";
-import { ArrowTurnRight2 } from "@dub/ui/src/icons";
+import { ArrowTurnRight2 } from "@dub/ui/icons";
 import {
   cn,
   DUB_DOMAINS,
diff --git a/apps/web/ui/modals/import-csv-modal/field-mapping.tsx b/apps/web/ui/modals/import-csv-modal/field-mapping.tsx
index 456d06f4ddf..b41aad3f66d 100644
--- a/apps/web/ui/modals/import-csv-modal/field-mapping.tsx
+++ b/apps/web/ui/modals/import-csv-modal/field-mapping.tsx
@@ -8,7 +8,7 @@ import {
   LoadingSpinner,
   TableIcon,
   Xmark,
-} from "@dub/ui/src/icons";
+} from "@dub/ui/icons";
 import {
   cn,
   formatDate,
diff --git a/apps/web/ui/modals/import-csv-modal/index.tsx b/apps/web/ui/modals/import-csv-modal/index.tsx
index 7f03d9f0ff6..92a4b0ca1f2 100644
--- a/apps/web/ui/modals/import-csv-modal/index.tsx
+++ b/apps/web/ui/modals/import-csv-modal/index.tsx
@@ -8,7 +8,7 @@ import {
   Modal,
   useRouterStuff,
 } from "@dub/ui";
-import { TableIcon } from "@dub/ui/src/icons";
+import { TableIcon } from "@dub/ui/icons";
 import { ArrowRight } from "lucide-react";
 import { useParams, useRouter, useSearchParams } from "next/navigation";
 import {
diff --git a/apps/web/ui/modals/invite-teammate-modal.tsx b/apps/web/ui/modals/invite-teammate-modal.tsx
index e8441e69db9..a441fb8b068 100644
--- a/apps/web/ui/modals/invite-teammate-modal.tsx
+++ b/apps/web/ui/modals/invite-teammate-modal.tsx
@@ -1,7 +1,7 @@
 import useWorkspace from "@/lib/swr/use-workspace";
 import { Invite } from "@/lib/zod/schemas/invites";
 import { BlurImage, Logo, Modal } from "@dub/ui";
-import { LoadingSpinner } from "@dub/ui/src/icons";
+import { LoadingSpinner } from "@dub/ui/icons";
 import { fetcher } from "@dub/utils";
 import {
   Dispatch,
diff --git a/apps/web/ui/modals/link-builder/constants.ts b/apps/web/ui/modals/link-builder/constants.ts
index e9bf3184136..39e70d15567 100644
--- a/apps/web/ui/modals/link-builder/constants.ts
+++ b/apps/web/ui/modals/link-builder/constants.ts
@@ -6,7 +6,7 @@ import {
   InputPassword,
   SquareChart,
   WindowSearch,
-} from "@dub/ui/src/icons";
+} from "@dub/ui/icons";
 import { UseFormSetValue } from "react-hook-form";
 import { LinkFormData } from ".";
 import { getExpirationLabel } from "./expiration-modal";
diff --git a/apps/web/ui/modals/link-builder/draft-controls.tsx b/apps/web/ui/modals/link-builder/draft-controls.tsx
index 0d317f4c266..acd1bb4bcb5 100644
--- a/apps/web/ui/modals/link-builder/draft-controls.tsx
+++ b/apps/web/ui/modals/link-builder/draft-controls.tsx
@@ -1,11 +1,6 @@
 import { ExpandedLinkProps } from "@/lib/types";
 import { AnimatedSizeContainer, Button, Popover, useMediaQuery } from "@dub/ui";
-import {
-  CircleCheck,
-  CircleInfo,
-  LoadingCircle,
-  Xmark,
-} from "@dub/ui/src/icons";
+import { CircleCheck, CircleInfo, LoadingCircle, Xmark } from "@dub/ui/icons";
 import { cn, nanoid, punycode, timeAgo, truncate } from "@dub/utils";
 import { ChevronDown } from "lucide-react";
 import {
diff --git a/apps/web/ui/modals/link-builder/expiration-modal.tsx b/apps/web/ui/modals/link-builder/expiration-modal.tsx
index 35c4b45848f..08cec972a03 100644
--- a/apps/web/ui/modals/link-builder/expiration-modal.tsx
+++ b/apps/web/ui/modals/link-builder/expiration-modal.tsx
@@ -8,7 +8,7 @@ import {
   useKeyboardShortcut,
   useMediaQuery,
 } from "@dub/ui";
-import { CircleHalfDottedClock } from "@dub/ui/src/icons";
+import { CircleHalfDottedClock } from "@dub/ui/icons";
 import {
   cn,
   formatDateTime,
diff --git a/apps/web/ui/modals/link-builder/link-preview.tsx b/apps/web/ui/modals/link-builder/link-preview.tsx
index 36bd58abc7d..296c755bf81 100644
--- a/apps/web/ui/modals/link-builder/link-preview.tsx
+++ b/apps/web/ui/modals/link-builder/link-preview.tsx
@@ -16,7 +16,7 @@ import {
   NucleoPhoto,
   Pen2,
   Twitter,
-} from "@dub/ui/src/icons";
+} from "@dub/ui/icons";
 import { cn, getDomainWithoutWWW, resizeImage } from "@dub/utils";
 import {
   ChangeEvent,
diff --git a/apps/web/ui/modals/link-builder/more-dropdown.tsx b/apps/web/ui/modals/link-builder/more-dropdown.tsx
index ef9ce5974be..f7925725781 100644
--- a/apps/web/ui/modals/link-builder/more-dropdown.tsx
+++ b/apps/web/ui/modals/link-builder/more-dropdown.tsx
@@ -6,7 +6,7 @@ import {
   useKeyboardShortcut,
   useMediaQuery,
 } from "@dub/ui";
-import { Dots } from "@dub/ui/src/icons";
+import { Dots } from "@dub/ui/icons";
 import { cn } from "@dub/utils";
 import { Settings } from "lucide-react";
 import { useContext, useMemo, useState } from "react";
diff --git a/apps/web/ui/modals/link-builder/og-modal.tsx b/apps/web/ui/modals/link-builder/og-modal.tsx
index 4e09bc36513..b8b1d83bd72 100644
--- a/apps/web/ui/modals/link-builder/og-modal.tsx
+++ b/apps/web/ui/modals/link-builder/og-modal.tsx
@@ -11,7 +11,7 @@ import {
   SimpleTooltipContent,
   Tooltip,
 } from "@dub/ui";
-import { LoadingCircle, Magic, Unsplash } from "@dub/ui/src/icons";
+import { LoadingCircle, Magic, Unsplash } from "@dub/ui/icons";
 import { resizeImage } from "@dub/utils";
 import { useCompletion } from "ai/react";
 import posthog from "posthog-js";
diff --git a/apps/web/ui/modals/link-builder/options-list.tsx b/apps/web/ui/modals/link-builder/options-list.tsx
index 9302f6f999b..2a570622577 100644
--- a/apps/web/ui/modals/link-builder/options-list.tsx
+++ b/apps/web/ui/modals/link-builder/options-list.tsx
@@ -1,6 +1,6 @@
 import { AlertCircleFill, CheckCircleFill, X } from "@/ui/shared/icons";
 import { Tooltip, useMediaQuery } from "@dub/ui";
-import { LoadingSpinner } from "@dub/ui/src/icons";
+import { LoadingSpinner } from "@dub/ui/icons";
 import { cn, fetcher, isValidUrl as isValidUrlFn } from "@dub/utils";
 import { AnimatePresence, motion } from "framer-motion";
 import { ReactNode, useMemo } from "react";
diff --git a/apps/web/ui/modals/link-builder/password-modal.tsx b/apps/web/ui/modals/link-builder/password-modal.tsx
index 9de5c3dd114..1233598ce82 100644
--- a/apps/web/ui/modals/link-builder/password-modal.tsx
+++ b/apps/web/ui/modals/link-builder/password-modal.tsx
@@ -8,7 +8,7 @@ import {
   useKeyboardShortcut,
   useMediaQuery,
 } from "@dub/ui";
-import { Eye, EyeSlash, InputPassword, Shuffle } from "@dub/ui/src/icons";
+import { Eye, EyeSlash, InputPassword, Shuffle } from "@dub/ui/icons";
 import { cn, nanoid } from "@dub/utils";
 import {
   Dispatch,
diff --git a/apps/web/ui/modals/link-builder/qr-code-preview.tsx b/apps/web/ui/modals/link-builder/qr-code-preview.tsx
index 36469ce496e..5ecece14ad0 100644
--- a/apps/web/ui/modals/link-builder/qr-code-preview.tsx
+++ b/apps/web/ui/modals/link-builder/qr-code-preview.tsx
@@ -8,7 +8,7 @@ import {
   useLocalStorage,
   useMediaQuery,
 } from "@dub/ui";
-import { Pen2, QRCode as QRCodeIcon } from "@dub/ui/src/icons";
+import { Pen2, QRCode as QRCodeIcon } from "@dub/ui/icons";
 import { DUB_QR_LOGO, linkConstructor } from "@dub/utils";
 import { AnimatePresence, motion } from "framer-motion";
 import { useMemo } from "react";
diff --git a/apps/web/ui/modals/link-builder/targeting-modal.tsx b/apps/web/ui/modals/link-builder/targeting-modal.tsx
index 701d786a0a3..c2b700efe87 100644
--- a/apps/web/ui/modals/link-builder/targeting-modal.tsx
+++ b/apps/web/ui/modals/link-builder/targeting-modal.tsx
@@ -8,7 +8,7 @@ import {
   useKeyboardShortcut,
   UTM_PARAMETERS,
 } from "@dub/ui";
-import { Crosshairs3, Trash } from "@dub/ui/src/icons";
+import { Crosshairs3, Trash } from "@dub/ui/icons";
 import {
   cn,
   constructURLFromUTMParams,
diff --git a/apps/web/ui/modals/link-builder/utm-templates-button.tsx b/apps/web/ui/modals/link-builder/utm-templates-button.tsx
index aa7cf700156..30f33f78b2a 100644
--- a/apps/web/ui/modals/link-builder/utm-templates-button.tsx
+++ b/apps/web/ui/modals/link-builder/utm-templates-button.tsx
@@ -8,7 +8,7 @@ import {
   Popover,
   useMediaQuery,
 } from "@dub/ui";
-import { DiamondTurnRight, LoadingSpinner, Note } from "@dub/ui/src/icons";
+import { DiamondTurnRight, LoadingSpinner, Note } from "@dub/ui/icons";
 import { fetcher } from "@dub/utils";
 import { useState } from "react";
 import { useFormContext } from "react-hook-form";
diff --git a/apps/web/ui/modals/link-qr-modal.tsx b/apps/web/ui/modals/link-qr-modal.tsx
index a8cecb0c4d3..c6a673f7830 100644
--- a/apps/web/ui/modals/link-qr-modal.tsx
+++ b/apps/web/ui/modals/link-qr-modal.tsx
@@ -19,14 +19,7 @@ import {
   useLocalStorage,
   useMediaQuery,
 } from "@dub/ui";
-import {
-  Check,
-  Check2,
-  Copy,
-  Download,
-  Hyperlink,
-  Photo,
-} from "@dub/ui/src/icons";
+import { Check, Check2, Copy, Download, Hyperlink, Photo } from "@dub/ui/icons";
 import { API_DOMAIN, cn, DUB_QR_LOGO, linkConstructor } from "@dub/utils";
 import { AnimatePresence, motion } from "framer-motion";
 import {
diff --git a/apps/web/ui/modals/share-dashboard-modal.tsx b/apps/web/ui/modals/share-dashboard-modal.tsx
index a1559a5490b..54d345eb780 100644
--- a/apps/web/ui/modals/share-dashboard-modal.tsx
+++ b/apps/web/ui/modals/share-dashboard-modal.tsx
@@ -13,7 +13,7 @@ import {
   Tick,
   useCopyToClipboard,
 } from "@dub/ui";
-import { ArrowTurnRight2, Globe } from "@dub/ui/src/icons";
+import { ArrowTurnRight2, Globe } from "@dub/ui/icons";
 import {
   APP_DOMAIN,
   fetcher,
diff --git a/apps/web/ui/partners/earnings-chart.tsx b/apps/web/ui/partners/earnings-chart.tsx
index c7d28d8eb93..d0903514855 100644
--- a/apps/web/ui/partners/earnings-chart.tsx
+++ b/apps/web/ui/partners/earnings-chart.tsx
@@ -1,13 +1,15 @@
 "use client";
 
 import { IntervalOptions } from "@/lib/analytics/types";
-import Areas from "@/ui/charts/areas";
-import { ChartContext } from "@/ui/charts/chart-context";
-import TimeSeriesChart from "@/ui/charts/time-series-chart";
-import XAxis from "@/ui/charts/x-axis";
-import YAxis from "@/ui/charts/y-axis";
 import SimpleDateRangePicker from "@/ui/shared/simple-date-range-picker";
-import { LoadingSpinner } from "@dub/ui/src/icons";
+import {
+  Areas,
+  ChartContext,
+  TimeSeriesChart,
+  XAxis,
+  YAxis,
+} from "@dub/ui/charts";
+import { LoadingSpinner } from "@dub/ui/icons";
 import { cn, currencyFormatter, formatDate } from "@dub/utils";
 import { LinearGradient } from "@visx/gradient";
 import { createContext, useId, useMemo } from "react";
diff --git a/apps/web/ui/partners/lander-blocks/FilesBlock.tsx b/apps/web/ui/partners/lander-blocks/FilesBlock.tsx
index 4b417daabd3..c78e30179d7 100644
--- a/apps/web/ui/partners/lander-blocks/FilesBlock.tsx
+++ b/apps/web/ui/partners/lander-blocks/FilesBlock.tsx
@@ -1,5 +1,5 @@
 import { programLanderFilesBlockSchema } from "@/lib/zod/schemas/program-lander";
-import { ArrowUpRight, Download } from "@dub/ui/src/icons";
+import { ArrowUpRight, Download } from "@dub/ui/icons";
 import { z } from "zod";
 import { BlockTitle } from "./BlockTitle";
 
diff --git a/apps/web/ui/partners/partner-details-sheet.tsx b/apps/web/ui/partners/partner-details-sheet.tsx
index ac691f55035..3308f212760 100644
--- a/apps/web/ui/partners/partner-details-sheet.tsx
+++ b/apps/web/ui/partners/partner-details-sheet.tsx
@@ -18,7 +18,7 @@ import {
   useTable,
   useTablePagination,
 } from "@dub/ui";
-import { GreekTemple, LinesY } from "@dub/ui/src/icons";
+import { GreekTemple, LinesY } from "@dub/ui/icons";
 import {
   cn,
   COUNTRIES,
diff --git a/apps/web/ui/partners/partner-link-selector.tsx b/apps/web/ui/partners/partner-link-selector.tsx
index b90cced129d..b5aab8a2633 100644
--- a/apps/web/ui/partners/partner-link-selector.tsx
+++ b/apps/web/ui/partners/partner-link-selector.tsx
@@ -2,7 +2,7 @@ import useLink from "@/lib/swr/use-link";
 import useLinks from "@/lib/swr/use-links";
 import { LinkProps } from "@/lib/types";
 import { Combobox, LinkLogo } from "@dub/ui";
-import { ArrowTurnRight2 } from "@dub/ui/src/icons";
+import { ArrowTurnRight2 } from "@dub/ui/icons";
 import { cn, getApexDomain, linkConstructor } from "@dub/utils";
 import { useMemo, useState } from "react";
 import { useDebounce } from "use-debounce";
diff --git a/apps/web/ui/partners/partner-status-badges.ts b/apps/web/ui/partners/partner-status-badges.ts
index 30fe8850b3b..ccda2cda4cd 100644
--- a/apps/web/ui/partners/partner-status-badges.ts
+++ b/apps/web/ui/partners/partner-status-badges.ts
@@ -1,8 +1,4 @@
-import {
-  CircleCheck,
-  CircleHalfDottedClock,
-  CircleXmark,
-} from "@dub/ui/src/icons";
+import { CircleCheck, CircleHalfDottedClock, CircleXmark } from "@dub/ui/icons";
 
 export const PartnerStatusBadges = {
   approved: {
diff --git a/apps/web/ui/partners/payout-status-badges.tsx b/apps/web/ui/partners/payout-status-badges.tsx
index 947148c38c3..725b05f5cff 100644
--- a/apps/web/ui/partners/payout-status-badges.tsx
+++ b/apps/web/ui/partners/payout-status-badges.tsx
@@ -2,7 +2,7 @@ import {
   CircleCheck,
   CircleHalfDottedClock,
   CircleWarning,
-} from "@dub/ui/src/icons";
+} from "@dub/ui/icons";
 
 export const PayoutStatusBadges = {
   pending: {
diff --git a/apps/web/ui/partners/payout-type-badge.tsx b/apps/web/ui/partners/payout-type-badge.tsx
index fe5e688c997..5d025e7c7ae 100644
--- a/apps/web/ui/partners/payout-type-badge.tsx
+++ b/apps/web/ui/partners/payout-type-badge.tsx
@@ -3,7 +3,7 @@ import {
   InvoiceDollar,
   MoneyBill2,
   UserCheck,
-} from "@dub/ui/src/icons";
+} from "@dub/ui/icons";
 import { capitalize } from "@dub/utils/src/functions";
 
 export const PayoutTypeBadge = ({
diff --git a/apps/web/ui/partners/sale-row-menu.tsx b/apps/web/ui/partners/sale-row-menu.tsx
index 6c08e8ce256..d3c862fbb6a 100644
--- a/apps/web/ui/partners/sale-row-menu.tsx
+++ b/apps/web/ui/partners/sale-row-menu.tsx
@@ -7,7 +7,7 @@ import {
   Dots,
   Duplicate,
   ShieldAlert,
-} from "@dub/ui/src/icons";
+} from "@dub/ui/icons";
 import { cn } from "@dub/utils";
 import { Row } from "@tanstack/react-table";
 import { Command } from "cmdk";
diff --git a/apps/web/ui/partners/sale-status-badges.tsx b/apps/web/ui/partners/sale-status-badges.tsx
index 6f45fb32413..18a8e99d0cd 100644
--- a/apps/web/ui/partners/sale-status-badges.tsx
+++ b/apps/web/ui/partners/sale-status-badges.tsx
@@ -4,7 +4,7 @@ import {
   CircleXmark,
   Duplicate,
   ShieldAlert,
-} from "@dub/ui/src/icons";
+} from "@dub/ui/icons";
 
 export const SaleStatusBadges = {
   pending: {
diff --git a/apps/web/ui/partners/stat-card.tsx b/apps/web/ui/partners/stat-card.tsx
index 295791fe991..a7ed9924491 100644
--- a/apps/web/ui/partners/stat-card.tsx
+++ b/apps/web/ui/partners/stat-card.tsx
@@ -1,5 +1,5 @@
 import { MiniAreaChart } from "@dub/ui";
-import { LoadingSpinner } from "@dub/ui/src/icons";
+import { LoadingSpinner } from "@dub/ui/icons";
 import { currencyFormatter, nFormatter } from "@dub/utils";
 import Link from "next/link";
 
diff --git a/apps/web/ui/shared/search-box.tsx b/apps/web/ui/shared/search-box.tsx
index 1efeb688f08..ac9d7603e31 100644
--- a/apps/web/ui/shared/search-box.tsx
+++ b/apps/web/ui/shared/search-box.tsx
@@ -1,5 +1,5 @@
 import { LoadingSpinner, useRouterStuff } from "@dub/ui";
-import { CircleXmark, Magnifier } from "@dub/ui/src/icons";
+import { CircleXmark, Magnifier } from "@dub/ui/icons";
 import { cn } from "@dub/utils";
 import {
   forwardRef,
diff --git a/apps/web/ui/webhooks/webhook-events.tsx b/apps/web/ui/webhooks/webhook-events.tsx
index eee7cf82ebf..a0967515bea 100644
--- a/apps/web/ui/webhooks/webhook-events.tsx
+++ b/apps/web/ui/webhooks/webhook-events.tsx
@@ -9,7 +9,7 @@ import {
   useCopyToClipboard,
   useMediaQuery,
 } from "@dub/ui";
-import { CircleCheck, CircleHalfDottedClock, Copy } from "@dub/ui/src/icons";
+import { CircleCheck, CircleHalfDottedClock, Copy } from "@dub/ui/icons";
 import { PropsWithChildren, useEffect, useState } from "react";
 import { Highlighter } from "shiki";
 import { toast } from "sonner";
diff --git a/apps/web/ui/workspaces/invite-teammates-form.tsx b/apps/web/ui/workspaces/invite-teammates-form.tsx
index f37cf265ad0..61fa56310d5 100644
--- a/apps/web/ui/workspaces/invite-teammates-form.tsx
+++ b/apps/web/ui/workspaces/invite-teammates-form.tsx
@@ -2,7 +2,7 @@ import useWorkspace from "@/lib/swr/use-workspace";
 import { Role, roles } from "@/lib/types";
 import { Invite } from "@/lib/zod/schemas/invites";
 import { Button, useMediaQuery } from "@dub/ui";
-import { Trash } from "@dub/ui/src/icons";
+import { Trash } from "@dub/ui/icons";
 import { capitalize, cn, pluralize } from "@dub/utils";
 import { Plus } from "lucide-react";
 import posthog from "posthog-js";
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 37f867dad26..7f04b2de5c8 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -9,6 +9,23 @@
   "files": [
     "dist/**"
   ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./icons": {
+      "types": "./dist/icons/index.d.ts",
+      "import": "./dist/icons/index.mjs",
+      "require": "./dist/icons/index.js"
+    },
+    "./charts": {
+      "types": "./dist/charts/index.d.ts",
+      "import": "./dist/charts/index.mjs",
+      "require": "./dist/charts/index.js"
+    }
+  },
   "scripts": {
     "build": "tsup",
     "lint": "eslint src/",
@@ -23,6 +40,7 @@
   "devDependencies": {
     "@dub/tailwind-config": "workspace:*",
     "@dub/utils": "workspace:*",
+    "@types/d3-array": "^3.2.1",
     "@types/js-cookie": "^3.0.6",
     "@types/react": "^18.2.47",
     "@types/react-dom": "^18.2.14",
@@ -52,14 +70,20 @@
     "@react-aria/datepicker": "^3.10.0",
     "@react-stately/datepicker": "^3.9.3",
     "@tanstack/react-table": "^8.17.3",
+    "@visx/axis": "^2.14.0",
+    "@visx/clip-path": "^3.3.0",
     "@visx/curve": "^3.3.0",
+    "@visx/event": "^2.6.0",
     "@visx/gradient": "^3.3.0",
     "@visx/group": "^3.3.0",
     "@visx/responsive": "^2.10.0",
     "@visx/scale": "^3.3.0",
     "@visx/shape": "^2.12.2",
+    "@visx/text": "^3.3.0",
+    "@visx/tooltip": "^2.16.0",
     "class-variance-authority": "^0.7.0",
     "cmdk": "^0.2.0",
+    "d3-array": "^3.2.4",
     "date-fns": "^3.6.0",
     "embla-carousel-autoplay": "^8.1.7",
     "embla-carousel-react": "^8.1.7",
diff --git a/apps/web/ui/charts/areas.tsx b/packages/ui/src/charts/areas.tsx
similarity index 99%
rename from apps/web/ui/charts/areas.tsx
rename to packages/ui/src/charts/areas.tsx
index 9526a4422c8..ab1dfe0731e 100644
--- a/apps/web/ui/charts/areas.tsx
+++ b/packages/ui/src/charts/areas.tsx
@@ -6,7 +6,7 @@ import { AnimatePresence, motion } from "framer-motion";
 import { useMemo } from "react";
 import { useChartContext, useChartTooltipContext } from "./chart-context";
 
-export default function Areas({
+export function Areas({
   seriesStyles,
 }: {
   seriesStyles?: {
diff --git a/apps/web/ui/charts/bars.tsx b/packages/ui/src/charts/bars.tsx
similarity index 100%
rename from apps/web/ui/charts/bars.tsx
rename to packages/ui/src/charts/bars.tsx
diff --git a/apps/web/ui/charts/chart-context.ts b/packages/ui/src/charts/chart-context.ts
similarity index 100%
rename from apps/web/ui/charts/chart-context.ts
rename to packages/ui/src/charts/chart-context.ts
diff --git a/packages/ui/src/charts/funnel-chart.tsx b/packages/ui/src/charts/funnel-chart.tsx
new file mode 100644
index 00000000000..8b52b4eee68
--- /dev/null
+++ b/packages/ui/src/charts/funnel-chart.tsx
@@ -0,0 +1,234 @@
+import { cn, nFormatter } from "@dub/utils";
+import { curveBasis } from "@visx/curve";
+import { ParentSize } from "@visx/responsive";
+import { scaleLinear } from "@visx/scale";
+import { Area } from "@visx/shape";
+import { Text } from "@visx/text";
+import { motion } from "framer-motion";
+import { Fragment, useMemo, useState } from "react";
+import { useMediaQuery } from "../hooks";
+
+const layers = [
+  {
+    opacity: 1,
+    padding: 0,
+  },
+  {
+    opacity: 0.3,
+    padding: 8,
+  },
+  {
+    opacity: 0.15,
+    padding: 16,
+  },
+];
+
+const maxLayerPadding = 16;
+const chartPadding = 40;
+
+type FunnelChartProps = {
+  steps: {
+    id: string;
+    label: string;
+    value: number;
+    additionalValue?: number;
+    colorClassName: string;
+  }[];
+  persistentPercentages?: boolean;
+  defaultTooltipStepId?: string;
+};
+
+export function FunnelChart(props: FunnelChartProps) {
+  return (
+    <div className="size-full">
+      <ParentSize className="relative">
+        {({ width, height }) =>
+          width && height ? (
+            <FunnelChartInner {...props} width={width} height={height} />
+          ) : null
+        }
+      </ParentSize>
+    </div>
+  );
+}
+
+function FunnelChartInner({
+  width,
+  height,
+  steps,
+  persistentPercentages = true,
+  defaultTooltipStepId,
+}: {
+  width: number;
+  height: number;
+} & FunnelChartProps) {
+  const { isMobile } = useMediaQuery();
+
+  const [tooltip, setTooltip] = useState<string | null>(
+    defaultTooltipStepId ?? null,
+  );
+  const tooltipStep = steps.find(({ id }) => id === tooltip);
+
+  const data = useMemo(() => {
+    return Object.fromEntries(
+      steps.map(({ id, value }, idx) => [
+        id,
+        interpolate(
+          value,
+          steps[idx + 1]?.value ?? steps[steps.length - 1].value,
+        ),
+      ]),
+    );
+  }, [steps]);
+
+  const zeroData = useMemo(() => interpolate(0, 0), [steps]);
+
+  const maxValue = useMemo(
+    () => Math.max(...steps.map((step) => step.value)),
+    [steps],
+  );
+
+  const xScale = scaleLinear({
+    domain: [0, steps.length],
+    range: [0, width],
+  });
+
+  const yScale = scaleLinear({
+    domain: [maxValue, -maxValue],
+    range: [
+      height - maxLayerPadding - chartPadding,
+      maxLayerPadding + chartPadding,
+    ],
+  });
+
+  return (
+    <div className="relative">
+      <svg width={width} height={height}>
+        {steps.map(({ id, value, colorClassName }, idx) => (
+          <Fragment key={id}>
+            {/* Background */}
+            <rect
+              x={xScale(idx)}
+              y={0}
+              width={width / steps.length}
+              height={height}
+              className="fill-transparent transition-colors hover:fill-blue-600/5"
+              onPointerEnter={() => setTooltip(id)}
+              onPointerDown={() => setTooltip(id)}
+              onPointerLeave={() =>
+                !isMobile && setTooltip(defaultTooltipStepId ?? null)
+              }
+            />
+
+            {/* Divider line */}
+            <line
+              x1={xScale(idx)}
+              y1={0}
+              x2={xScale(idx)}
+              y2={height}
+              className="stroke-black/5 sm:stroke-black/10"
+            />
+
+            {/* Funnel */}
+            {layers.map(({ opacity, padding }) => (
+              <Area
+                data={data[id]}
+                curve={curveBasis}
+                x={(d) => xScale(idx + d.x)}
+                y0={(d) => yScale(-d.y) - padding}
+                y1={(d) => yScale(d.y) + padding}
+              >
+                {({ path }) => {
+                  return (
+                    <motion.path
+                      initial={{ d: path(zeroData) || "", opacity: 0 }}
+                      animate={{ d: path(data[id]) || "", opacity }}
+                      className={cn(colorClassName, "pointer-events-none")}
+                      fill="currentColor"
+                    />
+                  );
+                }}
+              </Area>
+            ))}
+
+            {/* Percentage */}
+            {persistentPercentages && (
+              <Text
+                x={(xScale(idx) + xScale(idx + 1)) / 2}
+                y={height / 2}
+                textAnchor="middle"
+                verticalAnchor="middle"
+                fill="white"
+                fontSize={16}
+                className="pointer-events-none select-none"
+              >
+                {formatPercentage((value / maxValue) * 100) + "%"}
+              </Text>
+            )}
+          </Fragment>
+        ))}
+      </svg>
+      {tooltipStep && (
+        <div
+          key={tooltipStep.id}
+          className={cn(
+            "pointer-events-none absolute flex items-center justify-center px-1 pb-4",
+            persistentPercentages
+              ? "animate-slide-up-fade top-16 sm:top-12"
+              : "animate-fade-in top-1/2 -translate-y-1/2",
+          )}
+          style={{
+            left: xScale(steps.findIndex(({ id }) => id === tooltipStep.id)),
+            width: width / steps.length,
+          }}
+        >
+          <div
+            className={cn(
+              "rounded-lg border border-gray-200 bg-white text-base shadow-sm",
+            )}
+          >
+            <p className="border-b border-gray-200 px-3 py-2 text-sm text-gray-900 sm:px-4 sm:py-3">
+              {tooltipStep.label}
+            </p>
+            <div className="flex flex-wrap justify-between gap-x-4 gap-y-2 px-3 py-2 text-sm sm:px-4 sm:py-3">
+              <div className="flex items-center gap-2">
+                <div
+                  className={cn(
+                    tooltipStep.colorClassName,
+                    "h-2 w-2 shrink-0 rounded-sm bg-current opacity-50 shadow-[inset_0_0_0_1px_#0003]",
+                  )}
+                />
+                <p className="whitespace-nowrap capitalize text-gray-600">
+                  {formatPercentage((tooltipStep.value / maxValue) * 100) + "%"}
+                </p>
+              </div>
+              <p className="whitespace-nowrap font-medium text-gray-900">
+                {nFormatter(tooltipStep.value, { full: true })}
+                {tooltipStep.additionalValue !== undefined && (
+                  <span className="text-gray-500">
+                    {" "}
+                    (${nFormatter(tooltipStep.additionalValue / 100)})
+                  </span>
+                )}
+              </p>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+const formatPercentage = (value: number) => {
+  return value > 0 && value < 0.01
+    ? "< 0.01"
+    : nFormatter(value, { digits: 2 });
+};
+
+const interpolate = (from: number, to: number) => [
+  { x: 0, y: from },
+  { x: 0.3, y: from },
+  { x: 0.5, y: (from + to) / 2 },
+  { x: 0.7, y: to },
+  { x: 1, y: to },
+];
diff --git a/packages/ui/src/charts/index.ts b/packages/ui/src/charts/index.ts
new file mode 100644
index 00000000000..528aa9e7a63
--- /dev/null
+++ b/packages/ui/src/charts/index.ts
@@ -0,0 +1,7 @@
+export * from "./areas";
+export * from "./bars";
+export * from "./chart-context";
+export * from "./funnel-chart";
+export * from "./time-series-chart";
+export * from "./x-axis";
+export * from "./y-axis";
diff --git a/apps/web/ui/charts/time-series-chart.tsx b/packages/ui/src/charts/time-series-chart.tsx
similarity index 97%
rename from apps/web/ui/charts/time-series-chart.tsx
rename to packages/ui/src/charts/time-series-chart.tsx
index a9a625215be..bca2b83c070 100644
--- a/apps/web/ui/charts/time-series-chart.tsx
+++ b/packages/ui/src/charts/time-series-chart.tsx
@@ -14,7 +14,7 @@ import { useTooltip } from "./useTooltip";
 
 type TimeSeriesChartProps<T extends Datum> = PropsWithChildren<ChartProps<T>>;
 
-export default function TimeSeriesChart<T extends Datum>(
+export function TimeSeriesChart<T extends Datum>(
   props: TimeSeriesChartProps<T>,
 ) {
   return (
@@ -40,6 +40,7 @@ function TimeSeriesChartInner<T extends Datum>({
   series,
   tooltipContent = (d) => series[0].valueAccessor(d).toString(),
   tooltipClassName = "",
+  defaultTooltipIndex = null,
   margin: marginProp = {
     top: 12,
     right: 4,
@@ -125,7 +126,7 @@ function TimeSeriesChartInner<T extends Datum>({
     series,
     startDate,
     endDate,
-    xScale,
+    xScale: xScale as any,
     yScale,
     minY,
     maxY,
@@ -133,6 +134,7 @@ function TimeSeriesChartInner<T extends Datum>({
     padding,
     tooltipContent,
     tooltipClassName,
+    defaultTooltipIndex,
     leftAxisMargin,
     setLeftAxisMargin,
   };
@@ -140,6 +142,7 @@ function TimeSeriesChartInner<T extends Datum>({
   const tooltipContext = useTooltip({
     seriesId: series[0].id,
     chartContext,
+    defaultIndex: defaultTooltipIndex ?? undefined,
   });
 
   const {
diff --git a/apps/web/ui/charts/types.ts b/packages/ui/src/charts/types.ts
similarity index 98%
rename from apps/web/ui/charts/types.ts
rename to packages/ui/src/charts/types.ts
index c5ea5c8a8a1..285ae9a7f0a 100644
--- a/apps/web/ui/charts/types.ts
+++ b/packages/ui/src/charts/types.ts
@@ -33,6 +33,7 @@ type ChartOptionalProps<T extends Datum = any> = {
   type?: "area" | "bar";
   tooltipContent?: (datum: TimeSeriesDatum<T>) => ReactElement | string;
   tooltipClassName?: string;
+  defaultTooltipIndex?: number | null;
 
   /**
    * Absolute pixel values for margins around the chart area.
diff --git a/apps/web/ui/charts/useTooltip.ts b/packages/ui/src/charts/useTooltip.ts
similarity index 62%
rename from apps/web/ui/charts/useTooltip.ts
rename to packages/ui/src/charts/useTooltip.ts
index 277639a5326..a1674257803 100644
--- a/apps/web/ui/charts/useTooltip.ts
+++ b/packages/ui/src/charts/useTooltip.ts
@@ -5,7 +5,7 @@ import {
   useTooltip as useVisxTooltip,
 } from "@visx/tooltip";
 import { bisector } from "d3-array";
-import { useCallback } from "react";
+import { useCallback, useMemo } from "react";
 import {
   ChartContext,
   ChartTooltipContext,
@@ -22,6 +22,7 @@ export type TooltipOptions<T extends Datum> = {
   renderInPortal?: boolean;
   snapToX?: boolean;
   snapToY?: boolean;
+  defaultIndex?: number;
 };
 
 export function useTooltip<T extends Datum>({
@@ -30,6 +31,7 @@ export function useTooltip<T extends Datum>({
   renderInPortal = false,
   snapToY = false,
   snapToX = true,
+  defaultIndex,
 }: TooltipOptions<T>): ChartTooltipContext {
   const { series, data, xScale, yScale, margin } = chartContext;
 
@@ -39,7 +41,30 @@ export function useTooltip<T extends Datum>({
     debounce: 200,
   });
 
-  const visxTooltip = useVisxTooltip<TimeSeriesDatum<T>>();
+  const defaultTooltipDatum =
+    defaultIndex !== undefined ? data[defaultIndex] : undefined;
+
+  const defaultTooltipData = useMemo(
+    () =>
+      defaultTooltipDatum !== undefined
+        ? {
+            tooltipData: defaultTooltipDatum,
+            tooltipLeft: snapToX ? xScale(defaultTooltipDatum.date) : 0,
+            tooltipTop: snapToY
+              ? yScale(
+                  series
+                    .find((s) => s.id === seriesId)!
+                    .valueAccessor(defaultTooltipDatum),
+                )
+              : 0,
+          }
+        : undefined,
+    [defaultTooltipDatum, snapToX, snapToY, xScale, yScale, series, seriesId],
+  );
+
+  const visxTooltip = useVisxTooltip<TimeSeriesDatum<T>>(
+    defaultTooltipData ?? undefined,
+  );
 
   const handleTooltip = useCallback(
     (
@@ -57,7 +82,9 @@ export function useTooltip<T extends Datum>({
             ] as Date | undefined);
 
       if (x0 === undefined) {
-        visxTooltip.hideTooltip();
+        console.log("x0 is undefined", { defaultTooltipData });
+        if (defaultTooltipData) visxTooltip.showTooltip(defaultTooltipData);
+        else visxTooltip.hideTooltip();
         return;
       }
       const index = bisectDate(data, x0, 1);
@@ -78,7 +105,15 @@ export function useTooltip<T extends Datum>({
           : 0,
       });
     },
-    [seriesId, data, xScale, yScale, series, visxTooltip.showTooltip],
+    [
+      seriesId,
+      data,
+      xScale,
+      yScale,
+      series,
+      defaultTooltipData,
+      visxTooltip.showTooltip,
+    ],
   );
 
   const TooltipWrapper = renderInPortal
@@ -90,5 +125,9 @@ export function useTooltip<T extends Datum>({
     TooltipWrapper,
     containerRef: visxTooltipInPortal.containerRef,
     ...visxTooltip,
+    hideTooltip: () =>
+      defaultTooltipData
+        ? visxTooltip.showTooltip(defaultTooltipData)
+        : visxTooltip.hideTooltip(),
   };
 }
diff --git a/apps/web/ui/charts/utils.ts b/packages/ui/src/charts/utils.ts
similarity index 100%
rename from apps/web/ui/charts/utils.ts
rename to packages/ui/src/charts/utils.ts
diff --git a/apps/web/ui/charts/x-axis.tsx b/packages/ui/src/charts/x-axis.tsx
similarity index 98%
rename from apps/web/ui/charts/x-axis.tsx
rename to packages/ui/src/charts/x-axis.tsx
index 7a634a992e8..acfd9438e31 100644
--- a/apps/web/ui/charts/x-axis.tsx
+++ b/packages/ui/src/charts/x-axis.tsx
@@ -27,7 +27,7 @@ export type XAxisProps = {
   tickFormat?: (date: Date) => string;
 };
 
-export default function XAxis({
+export function XAxis({
   maxTicks: maxTicksProp,
   showGridLines = false,
   highlightLast = true,
diff --git a/apps/web/ui/charts/y-axis.tsx b/packages/ui/src/charts/y-axis.tsx
similarity index 98%
rename from apps/web/ui/charts/y-axis.tsx
rename to packages/ui/src/charts/y-axis.tsx
index 0a24b3a7200..6dd08fe3c18 100644
--- a/apps/web/ui/charts/y-axis.tsx
+++ b/packages/ui/src/charts/y-axis.tsx
@@ -37,7 +37,7 @@ export type YAxisProps = {
   tickAxisSpacing?: number;
 };
 
-export default function YAxis({
+export function YAxis({
   numTicks: numTicksProp,
   showGridLines = false,
   integerTicks = false,
diff --git a/packages/ui/tsup.config.ts b/packages/ui/tsup.config.ts
index 6a8a1e5cb02..9eb078d4240 100644
--- a/packages/ui/tsup.config.ts
+++ b/packages/ui/tsup.config.ts
@@ -1,7 +1,12 @@
 import { defineConfig, Options } from "tsup";
 
 export default defineConfig((options: Options) => ({
-  entry: ["src/**/*.tsx"],
+  entry: {
+    index: "src/index.tsx",
+    "icons/index": "src/icons/index.tsx",
+    "charts/index": "src/charts/index.ts",
+  },
+
   format: ["esm"],
   esbuildOptions(options) {
     options.banner = {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0d675064006..382bf22baa0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -126,18 +126,9 @@ importers:
       '@vercel/og':
         specifier: ^0.6.3
         version: 0.6.3
-      '@visx/axis':
-        specifier: ^2.14.0
-        version: 2.14.0(react@18.2.0)
-      '@visx/clip-path':
-        specifier: ^3.3.0
-        version: 3.3.0(react@18.2.0)
       '@visx/curve':
         specifier: ^3.3.0
         version: 3.3.0
-      '@visx/event':
-        specifier: ^2.6.0
-        version: 2.6.0
       '@visx/geo':
         specifier: ^2.10.0
         version: 2.10.0(react@18.2.0)
@@ -162,9 +153,6 @@ importers:
       '@visx/text':
         specifier: ^3.3.0
         version: 3.3.0(react@18.2.0)
-      '@visx/tooltip':
-        specifier: ^2.16.0
-        version: 2.16.0(react-dom@18.2.0)(react@18.2.0)
       ai:
         specifier: ^3.4.8
         version: 3.4.8(react@18.2.0)(svelte@4.2.14)(vue@3.4.21)(zod@3.22.4)
@@ -189,9 +177,6 @@ importers:
       csv-parse:
         specifier: ^5.5.6
         version: 5.5.6
-      d3-array:
-        specifier: ^3.2.4
-        version: 3.2.4
       date-fns:
         specifier: ^3.6.0
         version: 3.6.0
@@ -663,9 +648,18 @@ importers:
       '@tanstack/react-table':
         specifier: ^8.17.3
         version: 8.17.3(react-dom@18.2.0)(react@18.2.0)
+      '@visx/axis':
+        specifier: ^2.14.0
+        version: 2.14.0(react@18.2.0)
+      '@visx/clip-path':
+        specifier: ^3.3.0
+        version: 3.3.0(react@18.2.0)
       '@visx/curve':
         specifier: ^3.3.0
         version: 3.3.0
+      '@visx/event':
+        specifier: ^2.6.0
+        version: 2.6.0
       '@visx/gradient':
         specifier: ^3.3.0
         version: 3.3.0(react@18.2.0)
@@ -681,12 +675,21 @@ importers:
       '@visx/shape':
         specifier: ^2.12.2
         version: 2.12.2(react@18.2.0)
+      '@visx/text':
+        specifier: ^3.3.0
+        version: 3.3.0(react@18.2.0)
+      '@visx/tooltip':
+        specifier: ^2.16.0
+        version: 2.16.0(react-dom@18.2.0)(react@18.2.0)
       class-variance-authority:
         specifier: ^0.7.0
         version: 0.7.0
       cmdk:
         specifier: ^0.2.0
         version: 0.2.0(@types/react-dom@18.2.14)(@types/react@18.2.48)(react-dom@18.2.0)(react@18.2.0)
+      d3-array:
+        specifier: ^3.2.4
+        version: 3.2.4
       date-fns:
         specifier: ^3.6.0
         version: 3.6.0
@@ -739,6 +742,9 @@ importers:
       '@dub/utils':
         specifier: workspace:*
         version: link:../utils
+      '@types/d3-array':
+        specifier: ^3.2.1
+        version: 3.2.1
       '@types/js-cookie':
         specifier: ^3.0.6
         version: 3.0.6
@@ -9503,6 +9509,10 @@ packages:
     resolution: {integrity: sha512-Reoy+pKnvsksN0lQUlcH6dOGjRZ/3WRwXR//m+/8lt1BXeI4xyaUZoqULNjyXXRuh0Mj4LNpkCvhUpQlY3X5xQ==}
     dev: false
 
+  /@types/d3-array@3.2.1:
+    resolution: {integrity: sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg==}
+    dev: true
+
   /@types/d3-color@1.4.3:
     resolution: {integrity: sha512-jcHMwBcuuQ1LPt43jdbOhdOFczfDfhzvAZ1+1L0KiXPv4VqGsWAltxfxUDvtSuIMsvTZ2eeua+tOtxI6qqxYUg==}
     dev: false