diff --git a/packages/features/bookings/Booker/components/DryRunMessage.tsx b/packages/features/bookings/Booker/components/DryRunMessage.tsx
index ebaf51d89e..c0ec6b6378 100644
--- a/packages/features/bookings/Booker/components/DryRunMessage.tsx
+++ b/packages/features/bookings/Booker/components/DryRunMessage.tsx
@@ -1,7 +1,7 @@
import { useState } from "react";
import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Icon } from "@calcom/ui";
+import { Icon } from "@calcom/ui/components/icon";
export const DryRunMessage = ({ isEmbed }: { isEmbed?: boolean }) => {
const { t } = useLocale();
diff --git a/packages/features/bookings/Booker/components/HavingTroubleFindingTime.tsx b/packages/features/bookings/Booker/components/HavingTroubleFindingTime.tsx
index a72dcf33e6..8280c2255c 100644
--- a/packages/features/bookings/Booker/components/HavingTroubleFindingTime.tsx
+++ b/packages/features/bookings/Booker/components/HavingTroubleFindingTime.tsx
@@ -2,7 +2,7 @@ import { useState } from "react";
import { BOOKER_NUMBER_OF_DAYS_TO_LOAD } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Icon } from "@calcom/ui";
+import { Icon } from "@calcom/ui/components/icon";
type Props = {
onButtonClick: () => void;
diff --git a/packages/features/bookings/Booker/components/Header.tsx b/packages/features/bookings/Booker/components/Header.tsx
index 421a2f8702..7ca86d6e00 100644
--- a/packages/features/bookings/Booker/components/Header.tsx
+++ b/packages/features/bookings/Booker/components/Header.tsx
@@ -7,7 +7,11 @@ import { useIsEmbed } from "@calcom/embed-core/embed-iframe";
import { WEBAPP_URL } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { BookerLayouts } from "@calcom/prisma/zod-utils";
-import { Button, ButtonGroup, Icon, ToggleGroup, Tooltip } from "@calcom/ui";
+import { Button } from "@calcom/ui/components/button";
+import { ButtonGroup } from "@calcom/ui/components/buttonGroup";
+import { ToggleGroup } from "@calcom/ui/components/form";
+import { Icon } from "@calcom/ui/components/icon";
+import { Tooltip } from "@calcom/ui/components/tooltip";
import { TimeFormatToggle } from "../../components/TimeFormatToggle";
import { useBookerStore } from "../store";
diff --git a/packages/features/bookings/Booker/components/InstantBooking.tsx b/packages/features/bookings/Booker/components/InstantBooking.tsx
index 08b84b0bce..2f4b6355c3 100644
--- a/packages/features/bookings/Booker/components/InstantBooking.tsx
+++ b/packages/features/bookings/Booker/components/InstantBooking.tsx
@@ -1,7 +1,8 @@
import type { BookerEvent } from "@calcom/features/bookings/types";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import type { User } from "@calcom/prisma/client";
-import { Button, UserAvatarGroupWithOrg } from "@calcom/ui";
+import { UserAvatarGroupWithOrg } from "@calcom/ui/components/avatar";
+import { Button } from "@calcom/ui/components/button";
interface IInstantBookingProps {
onConnectNow: () => void;
diff --git a/packages/features/bookings/Booker/components/OutOfOfficeInSlots.tsx b/packages/features/bookings/Booker/components/OutOfOfficeInSlots.tsx
index dc4d6ccd8b..93afe34bc5 100644
--- a/packages/features/bookings/Booker/components/OutOfOfficeInSlots.tsx
+++ b/packages/features/bookings/Booker/components/OutOfOfficeInSlots.tsx
@@ -4,7 +4,7 @@ import { useRouter } from "next/navigation";
import type { IOutOfOfficeData } from "@calcom/lib/getUserAvailability";
import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button } from "@calcom/ui";
+import { Button } from "@calcom/ui/components/button";
import classNames from "@calcom/ui/classNames";
interface IOutOfOfficeInSlotsProps {
diff --git a/packages/features/bookings/Booker/components/OverlayCalendar/OverlayCalendarContinueModal.tsx b/packages/features/bookings/Booker/components/OverlayCalendar/OverlayCalendarContinueModal.tsx
index 9c8ba5d4db..330a57ce8f 100644
--- a/packages/features/bookings/Booker/components/OverlayCalendar/OverlayCalendarContinueModal.tsx
+++ b/packages/features/bookings/Booker/components/OverlayCalendar/OverlayCalendarContinueModal.tsx
@@ -1,6 +1,7 @@
import { APP_NAME } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button, Dialog, DialogContent, DialogFooter } from "@calcom/ui";
+import { Button } from "@calcom/ui/components/button";
+import { Dialog, DialogContent, DialogFooter } from "@calcom/ui/components/dialog";
interface IOverlayCalendarContinueModalProps {
open?: boolean;
diff --git a/packages/features/bookings/Booker/components/OverlayCalendar/OverlayCalendarSettingsModal.tsx b/packages/features/bookings/Booker/components/OverlayCalendar/OverlayCalendarSettingsModal.tsx
index 0667e2a052..576d47fd96 100644
--- a/packages/features/bookings/Booker/components/OverlayCalendar/OverlayCalendarSettingsModal.tsx
+++ b/packages/features/bookings/Booker/components/OverlayCalendar/OverlayCalendarSettingsModal.tsx
@@ -3,20 +3,14 @@ import { Fragment } from "react";
import { useIsPlatform } from "@calcom/atoms/hooks/useIsPlatform";
import { useLocale } from "@calcom/lib/hooks/useLocale";
-import {
- Alert,
- Dialog,
- DialogClose,
- DialogContent,
- EmptyScreen,
- ListItem,
- ListItemText,
- ListItemTitle,
- SkeletonContainer,
- SkeletonText,
- Switch,
-} from "@calcom/ui";
import classNames from "@calcom/ui/classNames";
+import { Alert } from "@calcom/ui/components/alert";
+import { Dialog, DialogContent, DialogClose } from "@calcom/ui/components/dialog";
+import { EmptyScreen } from "@calcom/ui/components/empty-screen";
+import { Switch } from "@calcom/ui/components/form";
+import { ListItem, ListItemText, ListItemTitle } from "@calcom/ui/components/list";
+import { SkeletonContainer } from "@calcom/ui/components/skeleton";
+import { SkeletonText } from "@calcom/ui/components/skeleton";
import type { UseCalendarsReturnType } from "../hooks/useCalendars";
diff --git a/packages/features/bookings/Booker/components/OverlayCalendar/OverlayCalendarSwitch.tsx b/packages/features/bookings/Booker/components/OverlayCalendar/OverlayCalendarSwitch.tsx
index c98600473c..f449e97c8d 100644
--- a/packages/features/bookings/Booker/components/OverlayCalendar/OverlayCalendarSwitch.tsx
+++ b/packages/features/bookings/Booker/components/OverlayCalendar/OverlayCalendarSwitch.tsx
@@ -1,7 +1,8 @@
import { useEffect } from "react";
import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button, Switch } from "@calcom/ui";
+import { Switch } from "@calcom/ui/components/form";
+import { Button } from "@calcom/ui/components/button";
import classNames from "@calcom/ui/classNames";
import { useBookerStore } from "../../store";
diff --git a/packages/features/bookings/Booker/components/RedirectToInstantMeetingModal.tsx b/packages/features/bookings/Booker/components/RedirectToInstantMeetingModal.tsx
index 264e359c3b..16b8929a66 100644
--- a/packages/features/bookings/Booker/components/RedirectToInstantMeetingModal.tsx
+++ b/packages/features/bookings/Booker/components/RedirectToInstantMeetingModal.tsx
@@ -3,8 +3,8 @@ import { useState, useEffect } from "react";
import dayjs from "@calcom/dayjs";
import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Dialog, DialogContent } from "@calcom/ui";
-import { Button } from "@calcom/ui";
+import { Button } from "@calcom/ui/components/button";
+import { Dialog, DialogContent } from "@calcom/ui/components/dialog";
const handleBeforeUnload = (event: BeforeUnloadEvent) => {
const message = "/o";
diff --git a/packages/features/bookings/Booker/components/hooks/useBookings.ts b/packages/features/bookings/Booker/components/hooks/useBookings.ts
index a3b89eaa22..a8bc894570 100644
--- a/packages/features/bookings/Booker/components/hooks/useBookings.ts
+++ b/packages/features/bookings/Booker/components/hooks/useBookings.ts
@@ -17,7 +17,7 @@ import { localStorage } from "@calcom/lib/webstorage";
import { BookingStatus } from "@calcom/prisma/enums";
import { bookingMetadataSchema } from "@calcom/prisma/zod-utils";
import { trpc } from "@calcom/trpc";
-import { showToast } from "@calcom/ui";
+import { showToast } from "@calcom/ui/components/toast";
import type { UseBookingFormReturnType } from "./useBookingForm";
diff --git a/packages/features/bookings/Booker/components/hooks/useVerifyEmail.ts b/packages/features/bookings/Booker/components/hooks/useVerifyEmail.ts
index 5358d45d96..83353909ad 100644
--- a/packages/features/bookings/Booker/components/hooks/useVerifyEmail.ts
+++ b/packages/features/bookings/Booker/components/hooks/useVerifyEmail.ts
@@ -5,7 +5,7 @@ import { useBookerStore } from "@calcom/features/bookings/Booker/store";
import { useDebounce } from "@calcom/lib/hooks/useDebounce";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc";
-import { showToast } from "@calcom/ui";
+import { showToast } from "@calcom/ui/components/toast";
export interface IUseVerifyEmailProps {
email: string;
diff --git a/packages/features/bookings/Booker/utils/use-brand-colors.tsx b/packages/features/bookings/Booker/utils/use-brand-colors.tsx
index 7d97b9b7e2..d422a2b1f2 100644
--- a/packages/features/bookings/Booker/utils/use-brand-colors.tsx
+++ b/packages/features/bookings/Booker/utils/use-brand-colors.tsx
@@ -1,6 +1,6 @@
import useGetBrandingColours from "@calcom/lib/getBrandColours";
import useTheme from "@calcom/lib/hooks/useTheme";
-import { useCalcomTheme } from "@calcom/ui";
+import { useCalcomTheme } from "@calcom/ui/styles";
export const useBrandColors = ({
brandColor,
diff --git a/packages/features/bookings/UnconfirmedBookingBadge.tsx b/packages/features/bookings/UnconfirmedBookingBadge.tsx
index af693847c0..c55320e816 100644
--- a/packages/features/bookings/UnconfirmedBookingBadge.tsx
+++ b/packages/features/bookings/UnconfirmedBookingBadge.tsx
@@ -2,7 +2,7 @@ import Link from "next/link";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
-import { Badge } from "@calcom/ui";
+import { Badge } from "@calcom/ui/components/badge";
export default function UnconfirmedBookingBadge() {
const { t } = useLocale();
diff --git a/packages/features/bookings/components/AvailableTimes.tsx b/packages/features/bookings/components/AvailableTimes.tsx
index ae3dbddcb0..df800b5753 100644
--- a/packages/features/bookings/components/AvailableTimes.tsx
+++ b/packages/features/bookings/components/AvailableTimes.tsx
@@ -14,7 +14,9 @@ import type { IOutOfOfficeData } from "@calcom/lib/getUserAvailability";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { localStorage } from "@calcom/lib/webstorage";
import type { IGetAvailableSlots } from "@calcom/trpc/server/routers/viewer/slots/util";
-import { Button, Icon, SkeletonText } from "@calcom/ui";
+import { Icon } from "@calcom/ui/components/icon";
+import { SkeletonText } from "@calcom/ui/components/skeleton";
+import { Button } from "@calcom/ui/components/button";
import classNames from "@calcom/ui/classNames";
import { useBookerTime } from "../Booker/components/hooks/useBookerTime";
diff --git a/packages/features/bookings/components/TimeFormatToggle.tsx b/packages/features/bookings/components/TimeFormatToggle.tsx
index 59d29cfce3..44e0e883e8 100644
--- a/packages/features/bookings/components/TimeFormatToggle.tsx
+++ b/packages/features/bookings/components/TimeFormatToggle.tsx
@@ -1,6 +1,6 @@
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { TimeFormat } from "@calcom/lib/timeFormat";
-import { ToggleGroup } from "@calcom/ui";
+import { ToggleGroup } from "@calcom/ui/components/form";
import { useTimePreferences } from "../lib";
diff --git a/packages/features/bookings/components/VerifyCodeDialog.tsx b/packages/features/bookings/components/VerifyCodeDialog.tsx
index 0307d9a6c2..62d6c4d1bc 100644
--- a/packages/features/bookings/components/VerifyCodeDialog.tsx
+++ b/packages/features/bookings/components/VerifyCodeDialog.tsx
@@ -3,17 +3,11 @@ import { useCallback, useEffect, useState } from "react";
import useDigitInput from "react-digit-input";
import { useLocale } from "@calcom/lib/hooks/useLocale";
-import {
- Button,
- Dialog,
- DialogClose,
- DialogContent,
- DialogFooter,
- DialogHeader,
- Icon,
- Input,
- Label,
-} from "@calcom/ui";
+import { Input } from "@calcom/ui/components/form";
+import { Button } from "@calcom/ui/components/button";
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogClose } from "@calcom/ui/components/dialog";
+import { Label } from "@calcom/ui/components/form";
+import { Icon } from "@calcom/ui/components/icon";
export const VerifyCodeDialog = ({
isOpenDialog,
diff --git a/packages/features/bookings/components/event-meta/AvailableEventLocations.tsx b/packages/features/bookings/components/event-meta/AvailableEventLocations.tsx
index 7ff8f5dbc5..0b00ced567 100644
--- a/packages/features/bookings/components/event-meta/AvailableEventLocations.tsx
+++ b/packages/features/bookings/components/event-meta/AvailableEventLocations.tsx
@@ -7,7 +7,8 @@ import { getEventLocationType, getTranslatedLocation } from "@calcom/app-store/l
import { useIsPlatform } from "@calcom/atoms/hooks/useIsPlatform";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import invertLogoOnDark from "@calcom/lib/invertLogoOnDark";
-import { Icon, Tooltip } from "@calcom/ui";
+import { Icon } from "@calcom/ui/components/icon";
+import { Tooltip } from "@calcom/ui/components/tooltip";
import classNames from "@calcom/ui/classNames";
const excludeNullValues = (value: unknown) => !!value;
diff --git a/packages/features/bookings/components/event-meta/Details.tsx b/packages/features/bookings/components/event-meta/Details.tsx
index cfe742e802..c0e65b3cc7 100644
--- a/packages/features/bookings/components/event-meta/Details.tsx
+++ b/packages/features/bookings/components/event-meta/Details.tsx
@@ -5,8 +5,9 @@ import { PriceIcon } from "@calcom/features/bookings/components/event-meta/Price
import type { BookerEvent } from "@calcom/features/bookings/types";
import { getPaymentAppData } from "@calcom/lib/getPaymentAppData";
import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Icon, type IconName } from "@calcom/ui";
import classNames from "@calcom/ui/classNames";
+import { Icon } from "@calcom/ui/components/icon";
+import { type IconName } from "@calcom/ui/components/icon";
import { EventDetailBlocks } from "../../types";
import { AvailableEventLocations } from "./AvailableEventLocations";
diff --git a/packages/features/bookings/components/event-meta/Locations.tsx b/packages/features/bookings/components/event-meta/Locations.tsx
index 72fe72960e..aa4c8b44ee 100644
--- a/packages/features/bookings/components/event-meta/Locations.tsx
+++ b/packages/features/bookings/components/event-meta/Locations.tsx
@@ -1,7 +1,7 @@
import { getEventLocationType, getTranslatedLocation } from "@calcom/app-store/locations";
import type { BookerEvent } from "@calcom/features/bookings/types";
import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Tooltip } from "@calcom/ui";
+import { Tooltip } from "@calcom/ui/components/tooltip";
import classNames from "@calcom/ui/classNames";
import { EventMetaBlock } from "./Details";
diff --git a/packages/features/bookings/components/event-meta/Members.tsx b/packages/features/bookings/components/event-meta/Members.tsx
index 63f5c90731..e9dbc6a947 100644
--- a/packages/features/bookings/components/event-meta/Members.tsx
+++ b/packages/features/bookings/components/event-meta/Members.tsx
@@ -6,7 +6,7 @@ import { getUserAvatarUrl } from "@calcom/lib/getAvatarUrl";
import { getBookerBaseUrlSync } from "@calcom/lib/getBookerUrl/client";
import { getTeamUrlSync } from "@calcom/lib/getBookerUrl/client";
import { SchedulingType } from "@calcom/prisma/enums";
-import { AvatarGroup } from "@calcom/ui";
+import { AvatarGroup } from "@calcom/ui/components/avatar";
export interface EventMembersProps {
/**
diff --git a/packages/features/bookings/components/event-meta/Occurences.tsx b/packages/features/bookings/components/event-meta/Occurences.tsx
index 5fec9cb5e4..adc42f9743 100644
--- a/packages/features/bookings/components/event-meta/Occurences.tsx
+++ b/packages/features/bookings/components/event-meta/Occurences.tsx
@@ -5,8 +5,9 @@ import type { BookerEvent } from "@calcom/features/bookings/types";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { parseRecurringDates } from "@calcom/lib/parse-dates";
import { getRecurringFreq } from "@calcom/lib/recurringStrings";
-import { Tooltip, Alert } from "@calcom/ui";
-import { Input } from "@calcom/ui";
+import { Alert } from "@calcom/ui/components/alert";
+import { Input } from "@calcom/ui/components/form";
+import { Tooltip } from "@calcom/ui/components/tooltip";
import { useBookerTime } from "../../Booker/components/hooks/useBookerTime";
diff --git a/packages/features/bookings/components/event-meta/PayIcon.tsx b/packages/features/bookings/components/event-meta/PayIcon.tsx
index b723c04ea0..a5ba9eab05 100644
--- a/packages/features/bookings/components/event-meta/PayIcon.tsx
+++ b/packages/features/bookings/components/event-meta/PayIcon.tsx
@@ -1,4 +1,4 @@
-import { Icon } from "@calcom/ui";
+import { Icon } from "@calcom/ui/components/icon";
export function PayIcon(props: { currency: string; className?: string }) {
const { className, currency } = props;
diff --git a/packages/features/bookings/components/event-meta/PriceIcon.tsx b/packages/features/bookings/components/event-meta/PriceIcon.tsx
index dd48d79205..2b31bceee7 100644
--- a/packages/features/bookings/components/event-meta/PriceIcon.tsx
+++ b/packages/features/bookings/components/event-meta/PriceIcon.tsx
@@ -1,5 +1,5 @@
-import { Icon } from "@calcom/ui";
-import { SatSymbol } from "@calcom/ui/components/icon/SatSymbol";
+import { Icon } from "@calcom/ui/components/icon";
+import { SatSymbol } from "@calcom/ui/components/icon";
export function PriceIcon(props: { currency: string; className?: string }) {
const { className, currency } = props;
diff --git a/packages/features/bookings/components/event-meta/Skeleton.tsx b/packages/features/bookings/components/event-meta/Skeleton.tsx
index 9740c76069..2536947c59 100644
--- a/packages/features/bookings/components/event-meta/Skeleton.tsx
+++ b/packages/features/bookings/components/event-meta/Skeleton.tsx
@@ -1,4 +1,4 @@
-import { SkeletonText } from "@calcom/ui";
+import { SkeletonText } from "@calcom/ui/components/skeleton";
import classNames from "@calcom/ui/classNames";
export const EventMetaSkeleton = () => (
diff --git a/packages/features/calendars/CalendarSwitch.tsx b/packages/features/calendars/CalendarSwitch.tsx
index aee9919131..8871f77f0d 100644
--- a/packages/features/calendars/CalendarSwitch.tsx
+++ b/packages/features/calendars/CalendarSwitch.tsx
@@ -5,8 +5,10 @@ import { useState } from "react";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
-import { Icon, showToast, Switch } from "@calcom/ui";
import classNames from "@calcom/ui/classNames";
+import { Switch } from "@calcom/ui/components/form";
+import { Icon } from "@calcom/ui/components/icon";
+import { showToast } from "@calcom/ui/components/toast";
export type ICalendarSwitchProps = {
title: string;
diff --git a/packages/features/calendars/DatePicker.tsx b/packages/features/calendars/DatePicker.tsx
index 1b450557ff..3128016841 100644
--- a/packages/features/calendars/DatePicker.tsx
+++ b/packages/features/calendars/DatePicker.tsx
@@ -10,7 +10,8 @@ import { daysInMonth, yyyymmdd } from "@calcom/lib/date-fns";
import type { IFromUser, IToUser } from "@calcom/lib/getUserAvailability";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { weekdayNames } from "@calcom/lib/weekday";
-import { Button, SkeletonText } from "@calcom/ui";
+import { SkeletonText } from "@calcom/ui/components/skeleton";
+import { Button } from "@calcom/ui/components/button";
import classNames from "@calcom/ui/classNames";
export type DatePickerProps = {
diff --git a/packages/features/calendars/DestinationCalendarSelector.tsx b/packages/features/calendars/DestinationCalendarSelector.tsx
index a619dd3d47..31829004f7 100644
--- a/packages/features/calendars/DestinationCalendarSelector.tsx
+++ b/packages/features/calendars/DestinationCalendarSelector.tsx
@@ -6,7 +6,9 @@ import { components } from "react-select";
import type { SelectClassNames } from "@calcom/features/eventtypes/lib/types";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import type { RouterOutputs } from "@calcom/trpc/react";
-import { Badge, Icon, Select } from "@calcom/ui";
+import { Badge } from "@calcom/ui/components/badge";
+import { Select } from "@calcom/ui/components/form";
+import { Icon } from "@calcom/ui/components/icon";
interface Props {
onChange: (value: { externalId: string; integration: string }) => void;
diff --git a/packages/features/calendars/weeklyview/components/event/Event.tsx b/packages/features/calendars/weeklyview/components/event/Event.tsx
index 8213bc3ec7..9b71d28220 100644
--- a/packages/features/calendars/weeklyview/components/event/Event.tsx
+++ b/packages/features/calendars/weeklyview/components/event/Event.tsx
@@ -1,7 +1,7 @@
import { cva } from "class-variance-authority";
import dayjs from "@calcom/dayjs";
-import { Tooltip } from "@calcom/ui";
+import { Tooltip } from "@calcom/ui/components/tooltip";
import classNames from "@calcom/ui/classNames";
import type { CalendarEvent } from "../../types/events";
diff --git a/packages/features/calendars/weeklyview/components/heading/SchedulerHeading.tsx b/packages/features/calendars/weeklyview/components/heading/SchedulerHeading.tsx
index 17832275cc..6c78992c3f 100644
--- a/packages/features/calendars/weeklyview/components/heading/SchedulerHeading.tsx
+++ b/packages/features/calendars/weeklyview/components/heading/SchedulerHeading.tsx
@@ -1,5 +1,6 @@
import dayjs from "@calcom/dayjs";
-import { Button, ButtonGroup } from "@calcom/ui";
+import { Button } from "@calcom/ui/components/button";
+import { ButtonGroup } from "@calcom/ui/components/buttonGroup";
import { useCalendarStore } from "../../state/store";
diff --git a/packages/features/components/timezone-select/TimezoneSelect.tsx b/packages/features/components/timezone-select/TimezoneSelect.tsx
index d5276852da..0bd1d7f917 100644
--- a/packages/features/components/timezone-select/TimezoneSelect.tsx
+++ b/packages/features/components/timezone-select/TimezoneSelect.tsx
@@ -8,8 +8,8 @@ import { CALCOM_VERSION } from "@calcom/lib/constants";
import { filterBySearchText, addTimezonesToDropdown, handleOptionLabel } from "@calcom/lib/timezone";
import type { Timezones } from "@calcom/lib/timezone";
import { trpc } from "@calcom/trpc/react";
-import { getReactSelectProps, inputStyles } from "@calcom/ui";
import classNames from "@calcom/ui/classNames";
+import { getReactSelectProps, inputStyles } from "@calcom/ui/components/form";
const SELECT_SEARCH_DATA: Timezones = [
{ label: "San Francisco", timezone: "America/Los_Angeles" },
diff --git a/packages/features/data-table/components/DataTable.tsx b/packages/features/data-table/components/DataTable.tsx
index 5bc623431d..34361c589e 100644
--- a/packages/features/data-table/components/DataTable.tsx
+++ b/packages/features/data-table/components/DataTable.tsx
@@ -10,6 +10,10 @@ import { usePathname } from "next/navigation";
import { useEffect, useState, memo, useMemo } from "react";
import { useLocale } from "@calcom/lib/hooks/useLocale";
+import classNames from "@calcom/ui/classNames";
+import { Command, CommandList, CommandItem } from "@calcom/ui/components/command";
+import { Icon } from "@calcom/ui/components/icon";
+import { Popover, PopoverTrigger, PopoverContent } from "@calcom/ui/components/popover";
import {
TableNew,
TableBody,
@@ -17,15 +21,7 @@ import {
TableHead,
TableHeader,
TableRow,
- Popover,
- PopoverTrigger,
- PopoverContent,
- Command,
- CommandList,
- CommandItem,
- Icon,
-} from "@calcom/ui";
-import classNames from "@calcom/ui/classNames";
+} from "@calcom/ui/components/table";
import { useColumnSizingVars } from "../hooks";
import { usePersistentColumnResizing } from "../lib/resizing";
diff --git a/packages/features/data-table/components/DataTablePagination.tsx b/packages/features/data-table/components/DataTablePagination.tsx
index b3c7df9837..13d11f50aa 100644
--- a/packages/features/data-table/components/DataTablePagination.tsx
+++ b/packages/features/data-table/components/DataTablePagination.tsx
@@ -2,7 +2,7 @@
import { type Table } from "@tanstack/react-table";
-import { Pagination } from "@calcom/ui";
+import { Pagination } from "@calcom/ui/components/pagination";
import { useDataTable } from "../hooks";
diff --git a/packages/features/data-table/components/DataTableSelectionBar.tsx b/packages/features/data-table/components/DataTableSelectionBar.tsx
index abe557aa3a..54c4c93a20 100644
--- a/packages/features/data-table/components/DataTableSelectionBar.tsx
+++ b/packages/features/data-table/components/DataTableSelectionBar.tsx
@@ -4,9 +4,11 @@ import type { Table } from "@tanstack/react-table";
import { forwardRef } from "react";
import { createPortal } from "react-dom";
-import { Button, Icon } from "@calcom/ui";
-import type { IconName, ButtonProps } from "@calcom/ui";
+import type { ButtonProps } from "@calcom/ui/components/button";
+import { Button } from "@calcom/ui/components/button";
import classNames from "@calcom/ui/classNames";
+import { Icon } from "@calcom/ui/components/icon";
+import type { IconName } from "@calcom/ui/components/icon";
export type ActionItem
=
| {
diff --git a/packages/features/data-table/components/DataTableSkeleton.tsx b/packages/features/data-table/components/DataTableSkeleton.tsx
index 7a148d392b..a5a3eacb66 100644
--- a/packages/features/data-table/components/DataTableSkeleton.tsx
+++ b/packages/features/data-table/components/DataTableSkeleton.tsx
@@ -1,4 +1,11 @@
-import { TableNew, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@calcom/ui";
+import {
+ TableNew,
+ TableBody,
+ TableCell,
+ TableHead,
+ TableHeader,
+ TableRow,
+} from "@calcom/ui/components/table";
interface DataTableSkeletonProps {
columns: number;
diff --git a/packages/features/data-table/components/DataTableToolbar.tsx b/packages/features/data-table/components/DataTableToolbar.tsx
index 523df0ed57..8ccb6db72d 100644
--- a/packages/features/data-table/components/DataTableToolbar.tsx
+++ b/packages/features/data-table/components/DataTableToolbar.tsx
@@ -6,8 +6,9 @@ import type { ComponentPropsWithoutRef } from "react";
import { useDebounce } from "@calcom/lib/hooks/useDebounce";
import { useLocale } from "@calcom/lib/hooks/useLocale";
-import type { ButtonProps } from "@calcom/ui";
-import { Button, Input } from "@calcom/ui";
+import type { ButtonProps } from "@calcom/ui/components/button";
+import { Input } from "@calcom/ui/components/form";
+import { Button } from "@calcom/ui/components/button";
import classNames from "@calcom/ui/classNames";
import { useColumnFilters } from "../hooks";
diff --git a/packages/features/data-table/components/filters/AddFilterButton.tsx b/packages/features/data-table/components/filters/AddFilterButton.tsx
index 9c2dbf6bab..d45c34c2fb 100644
--- a/packages/features/data-table/components/filters/AddFilterButton.tsx
+++ b/packages/features/data-table/components/filters/AddFilterButton.tsx
@@ -6,19 +6,11 @@ import startCase from "lodash/startCase";
import { forwardRef } from "react";
import { useLocale } from "@calcom/lib/hooks/useLocale";
-import {
- Button,
- Popover,
- PopoverTrigger,
- PopoverContent,
- Command,
- CommandInput,
- CommandList,
- CommandEmpty,
- CommandItem,
- Icon,
- Tooltip,
-} from "@calcom/ui";
+import { Button } from "@calcom/ui/components/button";
+import { Command, CommandInput, CommandList, CommandEmpty, CommandItem } from "@calcom/ui/components/command";
+import { Icon } from "@calcom/ui/components/icon";
+import { Popover, PopoverTrigger, PopoverContent } from "@calcom/ui/components/popover";
+import { Tooltip } from "@calcom/ui/components/tooltip";
import { useDataTable, useFilterableColumns } from "../../hooks";
diff --git a/packages/features/data-table/components/filters/BaseSelectFilterOptions.tsx b/packages/features/data-table/components/filters/BaseSelectFilterOptions.tsx
index 212ea9fee2..fb9f80da6e 100644
--- a/packages/features/data-table/components/filters/BaseSelectFilterOptions.tsx
+++ b/packages/features/data-table/components/filters/BaseSelectFilterOptions.tsx
@@ -3,6 +3,8 @@
import { useMemo } from "react";
import { useLocale } from "@calcom/lib/hooks/useLocale";
+import classNames from "@calcom/ui/classNames";
+import { buttonClasses } from "@calcom/ui/components/button";
import {
Command,
CommandInput,
@@ -11,10 +13,8 @@ import {
CommandItem,
CommandSeparator,
CommandGroup,
- buttonClasses,
- Icon,
-} from "@calcom/ui";
-import classNames from "@calcom/ui/classNames";
+} from "@calcom/ui/components/command";
+import { Icon } from "@calcom/ui/components/icon";
import { useDataTable, useFilterValue } from "../../hooks";
import type {
diff --git a/packages/features/data-table/components/filters/ClearFiltersButton.tsx b/packages/features/data-table/components/filters/ClearFiltersButton.tsx
index 6f4f3f042b..288702a235 100644
--- a/packages/features/data-table/components/filters/ClearFiltersButton.tsx
+++ b/packages/features/data-table/components/filters/ClearFiltersButton.tsx
@@ -1,5 +1,6 @@
import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button, Tooltip } from "@calcom/ui";
+import { Tooltip } from "@calcom/ui/components/tooltip";
+import { Button } from "@calcom/ui/components/button";
import { useDataTable } from "../../hooks/useDataTable";
diff --git a/packages/features/data-table/components/filters/ColumnVisibilityButton.tsx b/packages/features/data-table/components/filters/ColumnVisibilityButton.tsx
index de5976a148..3361203c77 100644
--- a/packages/features/data-table/components/filters/ColumnVisibilityButton.tsx
+++ b/packages/features/data-table/components/filters/ColumnVisibilityButton.tsx
@@ -5,13 +5,10 @@ import { type Table } from "@tanstack/react-table";
import { forwardRef, useState } from "react";
import { useLocale } from "@calcom/lib/hooks/useLocale";
-import type { ButtonProps } from "@calcom/ui";
+import classNames from "@calcom/ui/classNames";
+import type { ButtonProps } from "@calcom/ui/components/button";
+import { Button, buttonClasses } from "@calcom/ui/components/button";
import {
- Button,
- buttonClasses,
- Popover,
- PopoverTrigger,
- PopoverContent,
Command,
CommandInput,
CommandList,
@@ -19,9 +16,9 @@ import {
CommandGroup,
CommandItem,
CommandSeparator,
- Icon,
-} from "@calcom/ui";
-import classNames from "@calcom/ui/classNames";
+} from "@calcom/ui/components/command";
+import { Icon } from "@calcom/ui/components/icon";
+import { Popover, PopoverTrigger, PopoverContent } from "@calcom/ui/components/popover";
export interface ColumnVisiblityProps {
table: Table;
diff --git a/packages/features/data-table/components/filters/DateRangeFilter.tsx b/packages/features/data-table/components/filters/DateRangeFilter.tsx
index edb3157965..230fc55f13 100644
--- a/packages/features/data-table/components/filters/DateRangeFilter.tsx
+++ b/packages/features/data-table/components/filters/DateRangeFilter.tsx
@@ -4,21 +4,18 @@ import { useState, useEffect, useCallback } from "react";
import dayjs from "@calcom/dayjs";
import { useLocale } from "@calcom/lib/hooks/useLocale";
+import classNames from "@calcom/ui/classNames";
+import { Button, buttonClasses } from "@calcom/ui/components/button";
import {
- DateRangePicker,
- Button,
- Icon,
- Popover,
- PopoverContent,
- PopoverTrigger,
Command,
CommandList,
CommandItem,
CommandGroup,
CommandSeparator,
- buttonClasses,
-} from "@calcom/ui";
-import classNames from "@calcom/ui/classNames";
+} from "@calcom/ui/components/command";
+import { DateRangePicker } from "@calcom/ui/components/form";
+import { Icon } from "@calcom/ui/components/icon";
+import { Popover, PopoverContent, PopoverTrigger } from "@calcom/ui/components/popover";
import { useDataTable, useFilterValue } from "../../hooks";
import {
diff --git a/packages/features/data-table/components/filters/FilterPopover.tsx b/packages/features/data-table/components/filters/FilterPopover.tsx
index b6cdaef714..fffdf6c6dc 100644
--- a/packages/features/data-table/components/filters/FilterPopover.tsx
+++ b/packages/features/data-table/components/filters/FilterPopover.tsx
@@ -1,8 +1,10 @@
// eslint-disable-next-line no-restricted-imports
import startCase from "lodash/startCase";
-import type { IconName } from "@calcom/ui";
-import { Button, Popover, PopoverContent, PopoverTrigger, Badge } from "@calcom/ui";
+import { Badge } from "@calcom/ui/components/badge";
+import { Button } from "@calcom/ui/components/button";
+import type { IconName } from "@calcom/ui/components/icon";
+import { Popover, PopoverContent, PopoverTrigger } from "@calcom/ui/components/popover";
import { useFilterValue } from "../../hooks";
import { type FilterableColumn, type FilterValue, ZFilterValue, ColumnFilterType } from "../../lib/types";
diff --git a/packages/features/data-table/components/filters/NumberFilterOptions.tsx b/packages/features/data-table/components/filters/NumberFilterOptions.tsx
index 32753e8890..3fd7c9c1aa 100644
--- a/packages/features/data-table/components/filters/NumberFilterOptions.tsx
+++ b/packages/features/data-table/components/filters/NumberFilterOptions.tsx
@@ -3,7 +3,8 @@
import { useForm, Controller } from "react-hook-form";
import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Form, NumberInput, Select, Button } from "@calcom/ui";
+import { Button } from "@calcom/ui/components/button";
+import { Select, Form, NumberInput } from "@calcom/ui/components/form";
import { useFilterValue, useDataTable } from "../../hooks";
import type { FilterableColumn } from "../../lib/types";
diff --git a/packages/features/data-table/components/filters/TextFilterOptions.tsx b/packages/features/data-table/components/filters/TextFilterOptions.tsx
index cfe25f9c22..9a0bc5140d 100644
--- a/packages/features/data-table/components/filters/TextFilterOptions.tsx
+++ b/packages/features/data-table/components/filters/TextFilterOptions.tsx
@@ -3,7 +3,10 @@
import { useForm, Controller } from "react-hook-form";
import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Form, Input, Select, Button } from "@calcom/ui";
+import { Select } from "@calcom/ui/components/form";
+import { Button } from "@calcom/ui/components/button";
+import { Form } from "@calcom/ui/components/form";
+import { Input } from "@calcom/ui/components/form";
import { useFilterValue, useDataTable } from "../../hooks";
import type { FilterableColumn } from "../../lib/types";
diff --git a/packages/features/ee/api-keys/components/ApiKeyDialogForm.tsx b/packages/features/ee/api-keys/components/ApiKeyDialogForm.tsx
index 7f6727ce3e..4340034b6e 100644
--- a/packages/features/ee/api-keys/components/ApiKeyDialogForm.tsx
+++ b/packages/features/ee/api-keys/components/ApiKeyDialogForm.tsx
@@ -6,7 +6,14 @@ import type { TApiKeys } from "@calcom/ee/api-keys/components/ApiKeyListItem";
import LicenseRequired from "@calcom/ee/common/components/LicenseRequired";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
-import { Button, DialogFooter, Form, SelectField, showToast, Switch, TextField, Tooltip } from "@calcom/ui";
+import { DialogFooter } from "@calcom/ui/components/dialog";
+import { Button } from "@calcom/ui/components/button";
+import { Form } from "@calcom/ui/components/form";
+import { TextField } from "@calcom/ui/components/form";
+import { SelectField } from "@calcom/ui/components/form";
+import { Switch } from "@calcom/ui/components/form";
+import { showToast } from "@calcom/ui/components/toast";
+import { Tooltip } from "@calcom/ui/components/tooltip";
export default function ApiKeyDialogForm({
defaultValues,
diff --git a/packages/features/ee/api-keys/components/ApiKeyListItem.tsx b/packages/features/ee/api-keys/components/ApiKeyListItem.tsx
index 3a0fd9cabf..6449ca946d 100644
--- a/packages/features/ee/api-keys/components/ApiKeyListItem.tsx
+++ b/packages/features/ee/api-keys/components/ApiKeyListItem.tsx
@@ -3,16 +3,16 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
import type { RouterOutputs } from "@calcom/trpc/react";
import { trpc } from "@calcom/trpc/react";
import {
- Badge,
- Button,
Dropdown,
DropdownItem,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
- showToast,
-} from "@calcom/ui";
+} from "@calcom/ui/components/dropdown";
+import { Badge } from "@calcom/ui/components/badge";
+import { Button } from "@calcom/ui/components/button";
import classNames from "@calcom/ui/classNames";
+import { showToast } from "@calcom/ui/components/toast";
export type TApiKeys = RouterOutputs["viewer"]["apiKeys"]["list"][number];
diff --git a/packages/features/ee/common/components/LicenseRequired.tsx b/packages/features/ee/common/components/LicenseRequired.tsx
index c19d4c321d..0219aea609 100644
--- a/packages/features/ee/common/components/LicenseRequired.tsx
+++ b/packages/features/ee/common/components/LicenseRequired.tsx
@@ -6,7 +6,9 @@ import React, { Fragment, useEffect } from "react";
import { WEBAPP_URL } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { EmptyScreen, Alert, Button } from "@calcom/ui";
+import { Alert } from "@calcom/ui/components/alert";
+import { Button } from "@calcom/ui/components/button";
+import { EmptyScreen } from "@calcom/ui/components/empty-screen";
type LicenseRequiredProps = {
as?: keyof JSX.IntrinsicElements | "";
diff --git a/packages/features/ee/components/BrandColorsForm.tsx b/packages/features/ee/components/BrandColorsForm.tsx
index 613ce31e3f..91e5dbfc9d 100644
--- a/packages/features/ee/components/BrandColorsForm.tsx
+++ b/packages/features/ee/components/BrandColorsForm.tsx
@@ -5,8 +5,11 @@ import SectionBottomActions from "@calcom/features/settings/SectionBottomActions
import { DEFAULT_LIGHT_BRAND_COLOR, DEFAULT_DARK_BRAND_COLOR } from "@calcom/lib/constants";
import { checkWCAGContrastColor } from "@calcom/lib/getBrandColours";
import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button, ColorPicker, SettingsToggle, Alert } from "@calcom/ui";
import classNames from "@calcom/ui/classNames";
+import { Alert } from "@calcom/ui/components/alert";
+import { Button } from "@calcom/ui/components/button";
+import { ColorPicker } from "@calcom/ui/components/form";
+import { SettingsToggle } from "@calcom/ui/components/form";
type BrandColorsFormValues = {
brandColor: string;
diff --git a/packages/features/ee/components/CommonSkeletonLoaders.tsx b/packages/features/ee/components/CommonSkeletonLoaders.tsx
index 1280a71f67..0899b7cdf5 100644
--- a/packages/features/ee/components/CommonSkeletonLoaders.tsx
+++ b/packages/features/ee/components/CommonSkeletonLoaders.tsx
@@ -1,5 +1,5 @@
import SectionBottomActions from "@calcom/features/settings/SectionBottomActions";
-import { SkeletonButton, SkeletonContainer, SkeletonText } from "@calcom/ui";
+import { SkeletonButton, SkeletonContainer, SkeletonText } from "@calcom/ui/components/skeleton";
export const AppearanceSkeletonLoader = () => {
return (
diff --git a/packages/features/ee/deployment/licensekey/CreateLicenseKeyForm.tsx b/packages/features/ee/deployment/licensekey/CreateLicenseKeyForm.tsx
index f0dd0ea77c..4d88123934 100644
--- a/packages/features/ee/deployment/licensekey/CreateLicenseKeyForm.tsx
+++ b/packages/features/ee/deployment/licensekey/CreateLicenseKeyForm.tsx
@@ -8,8 +8,10 @@ import { Controller, useForm } from "react-hook-form";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc";
import type { Ensure } from "@calcom/types/utils";
-import { showToast } from "@calcom/ui";
-import { Alert, Button, Form, Label, TextField, ToggleGroup } from "@calcom/ui";
+import { Alert } from "@calcom/ui/components/alert";
+import { Button } from "@calcom/ui/components/button";
+import { Label, TextField, ToggleGroup, Form } from "@calcom/ui/components/form";
+import { showToast } from "@calcom/ui/components/toast";
import { UserPermissionRole } from "../../../../prisma/enums";
diff --git a/packages/features/ee/dsync/components/ConfigureDirectorySync.tsx b/packages/features/ee/dsync/components/ConfigureDirectorySync.tsx
index cac90f4989..a7cbd42799 100644
--- a/packages/features/ee/dsync/components/ConfigureDirectorySync.tsx
+++ b/packages/features/ee/dsync/components/ConfigureDirectorySync.tsx
@@ -3,17 +3,17 @@ import { useState } from "react";
import { SkeletonLoader } from "@calcom/features/apps/components/SkeletonLoader";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
+import { Button } from "@calcom/ui/components/button";
import {
- Button,
Dialog,
- DialogClose,
DialogContent,
DialogFooter,
DialogTrigger,
- Label,
- showToast,
- EmptyScreen,
-} from "@calcom/ui";
+ DialogClose,
+} from "@calcom/ui/components/dialog";
+import { EmptyScreen } from "@calcom/ui/components/empty-screen";
+import { Label } from "@calcom/ui/components/form";
+import { showToast } from "@calcom/ui/components/toast";
import CreateDirectory from "./CreateDirectory";
import DirectoryInfo from "./DirectoryInfo";
diff --git a/packages/features/ee/dsync/components/CreateDirectory.tsx b/packages/features/ee/dsync/components/CreateDirectory.tsx
index 7ddce4218e..ccc6d2aaf1 100644
--- a/packages/features/ee/dsync/components/CreateDirectory.tsx
+++ b/packages/features/ee/dsync/components/CreateDirectory.tsx
@@ -3,16 +3,10 @@ import { Controller, useForm } from "react-hook-form";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
-import {
- Button,
- Dialog,
- DialogContent,
- SelectField,
- Form,
- TextField,
- DialogFooter,
- showToast,
-} from "@calcom/ui";
+import { Button } from "@calcom/ui/components/button";
+import { Dialog, DialogContent, DialogFooter } from "@calcom/ui/components/dialog";
+import { Form, TextField, SelectField } from "@calcom/ui/components/form";
+import { showToast } from "@calcom/ui/components/toast";
import { directoryProviders } from "../lib/directoryProviders";
diff --git a/packages/features/ee/dsync/components/CreateTeamDialog.tsx b/packages/features/ee/dsync/components/CreateTeamDialog.tsx
index d90d231886..70879d5390 100644
--- a/packages/features/ee/dsync/components/CreateTeamDialog.tsx
+++ b/packages/features/ee/dsync/components/CreateTeamDialog.tsx
@@ -1,7 +1,7 @@
import { CreateANewTeamForm } from "@calcom/features/ee/teams/components";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
-import { Dialog, DialogContent } from "@calcom/ui";
+import { Dialog, DialogContent } from "@calcom/ui/components/dialog";
interface CreateTeamDialogProps {
open: boolean;
diff --git a/packages/features/ee/dsync/components/DirectoryInfo.tsx b/packages/features/ee/dsync/components/DirectoryInfo.tsx
index 005cbc412b..a4b05b1a69 100644
--- a/packages/features/ee/dsync/components/DirectoryInfo.tsx
+++ b/packages/features/ee/dsync/components/DirectoryInfo.tsx
@@ -1,7 +1,10 @@
import type { Directory } from "@boxyhq/saml-jackson";
import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button, showToast, Label, Tooltip } from "@calcom/ui";
+import { showToast } from "@calcom/ui/components/toast";
+import { Label } from "@calcom/ui/components/form";
+import { Tooltip } from "@calcom/ui/components/tooltip";
+import { Button } from "@calcom/ui/components/button";
const DirectoryInfo = ({ directory }: { directory: Directory }) => {
const { t } = useLocale();
diff --git a/packages/features/ee/dsync/components/GroupNameCell.tsx b/packages/features/ee/dsync/components/GroupNameCell.tsx
index 6802a9b5d7..ada92fa03d 100644
--- a/packages/features/ee/dsync/components/GroupNameCell.tsx
+++ b/packages/features/ee/dsync/components/GroupNameCell.tsx
@@ -2,8 +2,11 @@ import { useState } from "react";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
-import { Badge, Icon, showToast, TextField } from "@calcom/ui";
+import { Badge } from "@calcom/ui/components/badge";
+import { Icon } from "@calcom/ui/components/icon";
+import { TextField } from "@calcom/ui/components/form";
import classNames from "@calcom/ui/classNames";
+import { showToast } from "@calcom/ui/components/toast";
interface GroupNameCellProps {
groupNames: string[];
diff --git a/packages/features/ee/impersonation/components/ImpersonatingBanner.tsx b/packages/features/ee/impersonation/components/ImpersonatingBanner.tsx
index 78a4124452..0cd39ddcf6 100644
--- a/packages/features/ee/impersonation/components/ImpersonatingBanner.tsx
+++ b/packages/features/ee/impersonation/components/ImpersonatingBanner.tsx
@@ -2,7 +2,7 @@ import type { SessionContextValue } from "next-auth/react";
import { signIn } from "next-auth/react";
import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { TopBanner } from "@calcom/ui";
+import { TopBanner } from "@calcom/ui/components/top-banner";
export type ImpersonatingBannerProps = { data: SessionContextValue["data"] };
diff --git a/packages/features/ee/managed-event-types/hooks/useLockedFieldsManager.tsx b/packages/features/ee/managed-event-types/hooks/useLockedFieldsManager.tsx
index f47bc84c8e..ba4eb344f3 100644
--- a/packages/features/ee/managed-event-types/hooks/useLockedFieldsManager.tsx
+++ b/packages/features/ee/managed-event-types/hooks/useLockedFieldsManager.tsx
@@ -10,8 +10,11 @@ import type { FormValues } from "@calcom/features/eventtypes/lib/types";
import type { Prisma } from "@calcom/prisma/client";
import { SchedulingType } from "@calcom/prisma/enums";
import type { _EventTypeModel } from "@calcom/prisma/zod/eventtype";
-import { Badge, Icon, Switch, Tooltip } from "@calcom/ui";
+import { Badge } from "@calcom/ui/components/badge";
+import { Icon } from "@calcom/ui/components/icon";
+import { Tooltip } from "@calcom/ui/components/tooltip";
import classNames from "@calcom/ui/classNames";
+import { Switch } from "@calcom/ui/components/form";
export const LockedSwitch = (
isManagedEventType: boolean,
diff --git a/packages/features/ee/organizations/components/AboutOrganizationForm.tsx b/packages/features/ee/organizations/components/AboutOrganizationForm.tsx
index d355189118..f3caa77a44 100644
--- a/packages/features/ee/organizations/components/AboutOrganizationForm.tsx
+++ b/packages/features/ee/organizations/components/AboutOrganizationForm.tsx
@@ -5,7 +5,13 @@ import { Controller, useForm } from "react-hook-form";
import { useOnboarding } from "@calcom/features/ee/organizations/lib/onboardingStore";
import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Avatar, Button, Form, Icon, ImageUploader, Label, TextAreaField } from "@calcom/ui";
+import { ImageUploader } from "@calcom/ui/components/image-uploader";
+import { TextAreaField } from "@calcom/ui/components/form";
+import { Avatar } from "@calcom/ui/components/avatar";
+import { Button } from "@calcom/ui/components/button";
+import { Form } from "@calcom/ui/components/form";
+import { Label } from "@calcom/ui/components/form";
+import { Icon } from "@calcom/ui/components/icon";
export const AboutOrganizationForm = () => {
const { t } = useLocale();
diff --git a/packages/features/ee/organizations/components/AdminOnboardingHandover.tsx b/packages/features/ee/organizations/components/AdminOnboardingHandover.tsx
index 77371a1459..964eeffbed 100644
--- a/packages/features/ee/organizations/components/AdminOnboardingHandover.tsx
+++ b/packages/features/ee/organizations/components/AdminOnboardingHandover.tsx
@@ -4,7 +4,8 @@ import { useSession } from "next-auth/react";
import { WEBAPP_URL } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button, showToast } from "@calcom/ui";
+import { showToast } from "@calcom/ui/components/toast";
+import { Button } from "@calcom/ui/components/button";
export const AdminOnboardingHandover = () => {
const { t } = useLocale();
diff --git a/packages/features/ee/organizations/components/CreateANewOrganizationForm.tsx b/packages/features/ee/organizations/components/CreateANewOrganizationForm.tsx
index 05bd69c380..2e4135b0a5 100644
--- a/packages/features/ee/organizations/components/CreateANewOrganizationForm.tsx
+++ b/packages/features/ee/organizations/components/CreateANewOrganizationForm.tsx
@@ -14,8 +14,14 @@ import { CreationSource } from "@calcom/prisma/enums";
import { UserPermissionRole } from "@calcom/prisma/enums";
import { trpc } from "@calcom/trpc/react";
import type { Ensure } from "@calcom/types/utils";
-import { Alert, Button, Form, Label, RadioGroup as RadioArea, TextField, ToggleGroup } from "@calcom/ui";
import classNames from "@calcom/ui/classNames";
+import { Alert } from "@calcom/ui/components/alert";
+import { Button } from "@calcom/ui/components/button";
+import { ToggleGroup } from "@calcom/ui/components/form";
+import { Form } from "@calcom/ui/components/form";
+import { Label } from "@calcom/ui/components/form";
+import { TextField } from "@calcom/ui/components/form";
+import { RadioAreaGroup as RadioArea } from "@calcom/ui/components/radio";
import { useOnboarding } from "../lib/onboardingStore";
diff --git a/packages/features/ee/organizations/components/OrgUpgradeBanner.tsx b/packages/features/ee/organizations/components/OrgUpgradeBanner.tsx
index f65cbba5a8..6e40a28f34 100644
--- a/packages/features/ee/organizations/components/OrgUpgradeBanner.tsx
+++ b/packages/features/ee/organizations/components/OrgUpgradeBanner.tsx
@@ -4,7 +4,8 @@ import { useIsPlatform } from "@calcom/atoms/hooks/useIsPlatform";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import type { RouterOutputs } from "@calcom/trpc/react";
import { trpc } from "@calcom/trpc/react";
-import { showToast, TopBanner } from "@calcom/ui";
+import { showToast } from "@calcom/ui/components/toast";
+import { TopBanner } from "@calcom/ui/components/top-banner";
export type OrgUpgradeBannerProps = {
data: RouterOutputs["viewer"]["me"]["getUserTopBanners"]["orgUpgradeBanner"];
diff --git a/packages/features/ee/organizations/components/TeamInviteFromOrg.tsx b/packages/features/ee/organizations/components/TeamInviteFromOrg.tsx
index a9274ca0e2..48ee050c49 100644
--- a/packages/features/ee/organizations/components/TeamInviteFromOrg.tsx
+++ b/packages/features/ee/organizations/components/TeamInviteFromOrg.tsx
@@ -2,7 +2,8 @@ import type { PropsWithChildren } from "react";
import { useState } from "react";
import type { RouterOutputs } from "@calcom/trpc";
-import { Avatar, TextField } from "@calcom/ui";
+import { TextField } from "@calcom/ui/components/form";
+import { Avatar } from "@calcom/ui/components/avatar";
import classNames from "@calcom/ui/classNames";
type TeamInviteFromOrgProps = PropsWithChildren<{
diff --git a/packages/features/ee/organizations/pages/components/LockEventTypeSwitch.tsx b/packages/features/ee/organizations/pages/components/LockEventTypeSwitch.tsx
index e2ff4df716..918fde50b1 100644
--- a/packages/features/ee/organizations/pages/components/LockEventTypeSwitch.tsx
+++ b/packages/features/ee/organizations/pages/components/LockEventTypeSwitch.tsx
@@ -4,19 +4,13 @@ import { useForm } from "react-hook-form";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import type { RouterOutputs } from "@calcom/trpc";
import { trpc } from "@calcom/trpc";
-import {
- showToast,
- Form,
- SettingsToggle,
- Dialog,
- DialogContent,
- DialogHeader,
- DialogFooter,
- DialogClose,
- Button,
- RadioGroup as RadioArea,
-} from "@calcom/ui";
import classNames from "@calcom/ui/classNames";
+import { Button } from "@calcom/ui/components/button";
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogClose } from "@calcom/ui/components/dialog";
+import { Form } from "@calcom/ui/components/form";
+import { SettingsToggle } from "@calcom/ui/components/form";
+import { RadioAreaGroup as RadioArea } from "@calcom/ui/components/radio";
+import { showToast } from "@calcom/ui/components/toast";
enum CurrentEventTypeOptions {
DELETE = "DELETE",
diff --git a/packages/features/ee/organizations/pages/components/MemberListItem.tsx b/packages/features/ee/organizations/pages/components/MemberListItem.tsx
index c41b3c9161..d2770d301e 100644
--- a/packages/features/ee/organizations/pages/components/MemberListItem.tsx
+++ b/packages/features/ee/organizations/pages/components/MemberListItem.tsx
@@ -3,17 +3,17 @@ import classNames from "classnames";
import TeamPill, { TeamRole } from "@calcom/ee/teams/components/TeamPill";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import type { RouterOutputs } from "@calcom/trpc/react";
+import { UserAvatar } from "@calcom/ui/components/avatar";
+import { Button } from "@calcom/ui/components/button";
+import { ButtonGroup } from "@calcom/ui/components/buttonGroup";
import {
- Button,
- ButtonGroup,
Dropdown,
DropdownItem,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
- Tooltip,
- UserAvatar,
-} from "@calcom/ui";
+} from "@calcom/ui/components/dropdown";
+import { Tooltip } from "@calcom/ui/components/tooltip";
interface Props {
member: RouterOutputs["viewer"]["organizations"]["listOtherTeamMembers"]["rows"][number];
diff --git a/packages/features/ee/organizations/pages/components/NoSlotsNotificationSwitch.tsx b/packages/features/ee/organizations/pages/components/NoSlotsNotificationSwitch.tsx
index 086367a3ff..4494251490 100644
--- a/packages/features/ee/organizations/pages/components/NoSlotsNotificationSwitch.tsx
+++ b/packages/features/ee/organizations/pages/components/NoSlotsNotificationSwitch.tsx
@@ -3,7 +3,8 @@ import { useState } from "react";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import type { RouterOutputs } from "@calcom/trpc";
import { trpc } from "@calcom/trpc";
-import { SettingsToggle, showToast } from "@calcom/ui";
+import { SettingsToggle } from "@calcom/ui/components/form";
+import { showToast } from "@calcom/ui/components/toast";
interface GeneralViewProps {
currentOrg: RouterOutputs["viewer"]["organizations"]["listCurrent"];
diff --git a/packages/features/ee/organizations/pages/components/OtherTeamList.tsx b/packages/features/ee/organizations/pages/components/OtherTeamList.tsx
index 5679554037..b8be1d884a 100644
--- a/packages/features/ee/organizations/pages/components/OtherTeamList.tsx
+++ b/packages/features/ee/organizations/pages/components/OtherTeamList.tsx
@@ -3,7 +3,7 @@ import { useState } from "react";
import { trackFormbricksAction } from "@calcom/lib/formbricks-client";
import type { RouterOutputs } from "@calcom/trpc/react";
import { trpc } from "@calcom/trpc/react";
-import { showToast } from "@calcom/ui";
+import { showToast } from "@calcom/ui/components/toast";
import OtherTeamListItem from "./OtherTeamListItem";
diff --git a/packages/features/ee/organizations/pages/components/OtherTeamListItem.tsx b/packages/features/ee/organizations/pages/components/OtherTeamListItem.tsx
index fadeec0b90..3bbba17835 100644
--- a/packages/features/ee/organizations/pages/components/OtherTeamListItem.tsx
+++ b/packages/features/ee/organizations/pages/components/OtherTeamListItem.tsx
@@ -1,21 +1,19 @@
import { getPlaceholderAvatar } from "@calcom/lib/defaultAvatarImage";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import type { RouterOutputs } from "@calcom/trpc/react";
+import { Avatar } from "@calcom/ui/components/avatar";
+import { Button } from "@calcom/ui/components/button";
+import { ButtonGroup } from "@calcom/ui/components/buttonGroup";
+import { Dialog, DialogTrigger, ConfirmationDialogContent } from "@calcom/ui/components/dialog";
import {
- Avatar,
- Button,
- ButtonGroup,
- ConfirmationDialogContent,
- Dialog,
- DialogTrigger,
Dropdown,
DropdownItem,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
- showToast,
- Tooltip,
-} from "@calcom/ui";
+} from "@calcom/ui/components/dropdown";
+import { showToast } from "@calcom/ui/components/toast";
+import { Tooltip } from "@calcom/ui/components/tooltip";
import { useOrgBranding } from "../../../organizations/context/provider";
diff --git a/packages/features/ee/organizations/pages/components/OtherTeamsListing.tsx b/packages/features/ee/organizations/pages/components/OtherTeamsListing.tsx
index aa19f40d51..476b9019b7 100644
--- a/packages/features/ee/organizations/pages/components/OtherTeamsListing.tsx
+++ b/packages/features/ee/organizations/pages/components/OtherTeamsListing.tsx
@@ -1,7 +1,8 @@
import SkeletonLoaderTeamList from "@calcom/ee/teams/components/SkeletonloaderTeamList";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
-import { Alert, EmptyScreen } from "@calcom/ui";
+import { EmptyScreen } from "@calcom/ui/components/empty-screen";
+import { Alert } from "@calcom/ui/components/alert";
import OtherTeamList from "./OtherTeamList";
diff --git a/packages/features/ee/organizations/pages/settings/admin-api.tsx b/packages/features/ee/organizations/pages/settings/admin-api.tsx
index 9c776bb06d..6da5ea437f 100644
--- a/packages/features/ee/organizations/pages/settings/admin-api.tsx
+++ b/packages/features/ee/organizations/pages/settings/admin-api.tsx
@@ -3,7 +3,9 @@
import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
import { UpgradeTip } from "@calcom/features/tips";
import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button, Icon, ButtonGroup } from "@calcom/ui";
+import { Button } from "@calcom/ui/components/button";
+import { ButtonGroup } from "@calcom/ui/components/buttonGroup";
+import { Icon } from "@calcom/ui/components/icon";
export const AdminAPIView = () => {
const { t } = useLocale();
diff --git a/packages/features/ee/organizations/pages/settings/admin/AdminOrgEditPage.tsx b/packages/features/ee/organizations/pages/settings/admin/AdminOrgEditPage.tsx
index 6ead4803ae..68f3b8a373 100644
--- a/packages/features/ee/organizations/pages/settings/admin/AdminOrgEditPage.tsx
+++ b/packages/features/ee/organizations/pages/settings/admin/AdminOrgEditPage.tsx
@@ -8,7 +8,10 @@ import type { z } from "zod";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import type { orgSettingsSchema } from "@calcom/prisma/zod-utils";
import { trpc } from "@calcom/trpc/react";
-import { Button, Form, TextField, showToast } from "@calcom/ui";
+import { Form } from "@calcom/ui/components/form";
+import { TextField } from "@calcom/ui/components/form";
+import { Button } from "@calcom/ui/components/button";
+import { showToast } from "@calcom/ui/components/toast";
type FormValues = {
name: Team["name"];
diff --git a/packages/features/ee/organizations/pages/settings/admin/AdminOrgPage.tsx b/packages/features/ee/organizations/pages/settings/admin/AdminOrgPage.tsx
index d931de362a..df14aa3e8a 100644
--- a/packages/features/ee/organizations/pages/settings/admin/AdminOrgPage.tsx
+++ b/packages/features/ee/organizations/pages/settings/admin/AdminOrgPage.tsx
@@ -5,7 +5,10 @@ import { useState } from "react";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
-import { Badge, ConfirmationDialogContent, Dialog, DropdownActions, showToast, Table } from "@calcom/ui";
+import { Badge } from "@calcom/ui/components/badge";
+import { Dialog, ConfirmationDialogContent } from "@calcom/ui/components/dialog";
+import { DropdownActions, Table } from "@calcom/ui/components/table";
+import { showToast } from "@calcom/ui/components/toast";
import { subdomainSuffix } from "../../../../organizations/lib/orgDomains";
diff --git a/packages/features/ee/organizations/pages/settings/admin/WorkspacePlatformPage.tsx b/packages/features/ee/organizations/pages/settings/admin/WorkspacePlatformPage.tsx
index b921123236..2bad2f9558 100644
--- a/packages/features/ee/organizations/pages/settings/admin/WorkspacePlatformPage.tsx
+++ b/packages/features/ee/organizations/pages/settings/admin/WorkspacePlatformPage.tsx
@@ -9,20 +9,14 @@ import { z } from "zod";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { serviceAccountKeySchema } from "@calcom/prisma/zod-utils";
import { trpc, type RouterOutputs } from "@calcom/trpc";
-import {
- Button,
- Form,
- Switch,
- showToast,
- Dialog,
- DialogContent,
- DialogFooter,
- DialogClose,
- TextField,
- TextAreaField,
- Table,
- DropdownActions,
-} from "@calcom/ui";
+import { Button } from "@calcom/ui/components/button";
+import { Dialog, DialogContent, DialogFooter, DialogClose } from "@calcom/ui/components/dialog";
+import { Form } from "@calcom/ui/components/form";
+import { TextAreaField } from "@calcom/ui/components/form";
+import { TextField } from "@calcom/ui/components/form";
+import { Switch } from "@calcom/ui/components/form";
+import { DropdownActions, Table } from "@calcom/ui/components/table";
+import { showToast } from "@calcom/ui/components/toast";
const { Body, Cell, ColumnTitle, Header, Row } = Table;
diff --git a/packages/features/ee/organizations/pages/settings/appearance.tsx b/packages/features/ee/organizations/pages/settings/appearance.tsx
index 142af7446f..cf14706e4a 100644
--- a/packages/features/ee/organizations/pages/settings/appearance.tsx
+++ b/packages/features/ee/organizations/pages/settings/appearance.tsx
@@ -15,7 +15,10 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
import { MembershipRole } from "@calcom/prisma/enums";
import { trpc } from "@calcom/trpc/react";
import type { RouterOutputs } from "@calcom/trpc/react";
-import { Button, Form, showToast, SettingsToggle } from "@calcom/ui";
+import { Form } from "@calcom/ui/components/form";
+import { SettingsToggle } from "@calcom/ui/components/form";
+import { Button } from "@calcom/ui/components/button";
+import { showToast } from "@calcom/ui/components/toast";
type BrandColorsFormValues = {
brandColor: string;
diff --git a/packages/features/ee/organizations/pages/settings/attributes/AttributesForm.tsx b/packages/features/ee/organizations/pages/settings/attributes/AttributesForm.tsx
index f4332c50c0..8399d351c6 100644
--- a/packages/features/ee/organizations/pages/settings/attributes/AttributesForm.tsx
+++ b/packages/features/ee/organizations/pages/settings/attributes/AttributesForm.tsx
@@ -5,17 +5,9 @@ import { Controller, useForm, useFieldArray } from "react-hook-form";
import { z } from "zod";
import { useLocale } from "@calcom/lib/hooks/useLocale";
-import {
- Button,
- Form,
- SelectField,
- InputField,
- Label,
- Input,
- Dialog,
- ConfirmationDialogContent,
- SettingsToggle,
-} from "@calcom/ui";
+import { Button } from "@calcom/ui/components/button";
+import { Dialog, ConfirmationDialogContent } from "@calcom/ui/components/dialog";
+import { SettingsToggle, SelectField, Input, InputField, Form, Label } from "@calcom/ui/components/form";
const attributeFormSchema = z.object({
attrName: z.string().min(1),
diff --git a/packages/features/ee/organizations/pages/settings/attributes/DeleteAttributeModal.tsx b/packages/features/ee/organizations/pages/settings/attributes/DeleteAttributeModal.tsx
index 086b2ce01a..ab3111381e 100644
--- a/packages/features/ee/organizations/pages/settings/attributes/DeleteAttributeModal.tsx
+++ b/packages/features/ee/organizations/pages/settings/attributes/DeleteAttributeModal.tsx
@@ -3,7 +3,8 @@ import type { Dispatch, SetStateAction } from "react";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import type { RouterOutputs } from "@calcom/trpc/react";
import { trpc } from "@calcom/trpc/react";
-import { Dialog, ConfirmationDialogContent, showToast } from "@calcom/ui";
+import { Dialog, ConfirmationDialogContent } from "@calcom/ui/components/dialog";
+import { showToast } from "@calcom/ui/components/toast";
type AttributeItemProps = RouterOutputs["viewer"]["attributes"]["list"][number];
diff --git a/packages/features/ee/organizations/pages/settings/attributes/ListSkeleton.tsx b/packages/features/ee/organizations/pages/settings/attributes/ListSkeleton.tsx
index 117c0bb43b..9b11a62850 100644
--- a/packages/features/ee/organizations/pages/settings/attributes/ListSkeleton.tsx
+++ b/packages/features/ee/organizations/pages/settings/attributes/ListSkeleton.tsx
@@ -1,4 +1,4 @@
-import { SkeletonText } from "@calcom/ui";
+import { SkeletonText } from "@calcom/ui/components/skeleton";
export function ListSkeleton() {
return (
diff --git a/packages/features/ee/organizations/pages/settings/attributes/__tests__/AttributeForm.test.tsx b/packages/features/ee/organizations/pages/settings/attributes/__tests__/AttributeForm.test.tsx
index 48d655641d..41da58b3dd 100644
--- a/packages/features/ee/organizations/pages/settings/attributes/__tests__/AttributeForm.test.tsx
+++ b/packages/features/ee/organizations/pages/settings/attributes/__tests__/AttributeForm.test.tsx
@@ -4,7 +4,7 @@ import React from "react";
import type { Mock } from "vitest";
import { vi } from "vitest";
-import { Button } from "@calcom/ui";
+import { Button } from "@calcom/ui/components/button";
import { AttributeForm } from "../AttributesForm";
diff --git a/packages/features/ee/organizations/pages/settings/attributes/attributes-create-view.tsx b/packages/features/ee/organizations/pages/settings/attributes/attributes-create-view.tsx
index b43649c020..9a233a5362 100644
--- a/packages/features/ee/organizations/pages/settings/attributes/attributes-create-view.tsx
+++ b/packages/features/ee/organizations/pages/settings/attributes/attributes-create-view.tsx
@@ -7,7 +7,8 @@ import { z } from "zod";
import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
-import { Button, showToast } from "@calcom/ui";
+import { showToast } from "@calcom/ui/components/toast";
+import { Button } from "@calcom/ui/components/button";
import { AttributeForm } from "./AttributesForm";
diff --git a/packages/features/ee/organizations/pages/settings/attributes/attributes-edit-view.tsx b/packages/features/ee/organizations/pages/settings/attributes/attributes-edit-view.tsx
index 12aa4cca0d..40caad1b0f 100644
--- a/packages/features/ee/organizations/pages/settings/attributes/attributes-edit-view.tsx
+++ b/packages/features/ee/organizations/pages/settings/attributes/attributes-edit-view.tsx
@@ -7,7 +7,8 @@ import { z } from "zod";
import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
-import { Button, showToast } from "@calcom/ui";
+import { showToast } from "@calcom/ui/components/toast";
+import { Button } from "@calcom/ui/components/button";
import { AttributeForm } from "./AttributesForm";
diff --git a/packages/features/ee/organizations/pages/settings/attributes/attributes-list-view.tsx b/packages/features/ee/organizations/pages/settings/attributes/attributes-list-view.tsx
index 6db2c34c67..80ebe2f92c 100644
--- a/packages/features/ee/organizations/pages/settings/attributes/attributes-list-view.tsx
+++ b/packages/features/ee/organizations/pages/settings/attributes/attributes-list-view.tsx
@@ -7,18 +7,18 @@ import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequir
import { useLocale } from "@calcom/lib/hooks/useLocale";
import type { RouterOutputs } from "@calcom/trpc/react";
import { trpc } from "@calcom/trpc/react";
+import { Badge } from "@calcom/ui/components/badge";
+import { Button } from "@calcom/ui/components/button";
import {
- Switch,
Dropdown,
- Button,
DropdownMenuTrigger,
DropdownMenuContent,
DropdownItem,
DropdownMenuItem,
- Icon,
- showToast,
- Badge,
-} from "@calcom/ui";
+} from "@calcom/ui/components/dropdown";
+import { Switch } from "@calcom/ui/components/form";
+import { Icon } from "@calcom/ui/components/icon";
+import { showToast } from "@calcom/ui/components/toast";
import { DeleteAttributeModal } from "./DeleteAttributeModal";
import { ListSkeleton } from "./ListSkeleton";
diff --git a/packages/features/ee/organizations/pages/settings/delegationCredential.tsx b/packages/features/ee/organizations/pages/settings/delegationCredential.tsx
index 62ac3b3fdb..b69a9528d3 100644
--- a/packages/features/ee/organizations/pages/settings/delegationCredential.tsx
+++ b/packages/features/ee/organizations/pages/settings/delegationCredential.tsx
@@ -7,24 +7,19 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
import type { ServiceAccountKey } from "@calcom/lib/server/serviceAccountKey";
import { serviceAccountKeySchema } from "@calcom/prisma/zod-utils";
import { trpc } from "@calcom/trpc/react";
-import {
- DropdownActions,
- Button,
- Dialog,
- DialogContent,
- DialogFooter,
- Form,
- TextField,
- TextAreaField,
- SelectField,
- showToast,
- Badge,
- Switch,
- InfoBadge,
- EmptyScreen,
- SkeletonContainer,
- SkeletonText,
-} from "@calcom/ui";
+import { Badge } from "@calcom/ui/components/badge";
+import { InfoBadge } from "@calcom/ui/components/badge";
+import { Button } from "@calcom/ui/components/button";
+import { Dialog, DialogContent, DialogFooter } from "@calcom/ui/components/dialog";
+import { EmptyScreen } from "@calcom/ui/components/empty-screen";
+import { Form } from "@calcom/ui/components/form";
+import { TextAreaField } from "@calcom/ui/components/form";
+import { TextField } from "@calcom/ui/components/form";
+import { SelectField } from "@calcom/ui/components/form";
+import { Switch } from "@calcom/ui/components/form";
+import { SkeletonContainer, SkeletonText } from "@calcom/ui/components/skeleton";
+import { DropdownActions } from "@calcom/ui/components/table";
+import { showToast } from "@calcom/ui/components/toast";
interface DelegationItemProps {
delegation: {
diff --git a/packages/features/ee/organizations/pages/settings/general.tsx b/packages/features/ee/organizations/pages/settings/general.tsx
index 2733032665..5f7ae53a5e 100644
--- a/packages/features/ee/organizations/pages/settings/general.tsx
+++ b/packages/features/ee/organizations/pages/settings/general.tsx
@@ -13,17 +13,18 @@ import { nameOfDay } from "@calcom/lib/weekday";
import { MembershipRole } from "@calcom/prisma/enums";
import type { RouterOutputs } from "@calcom/trpc/react";
import { trpc } from "@calcom/trpc/react";
+import { Form } from "@calcom/ui/components/form";
+import { Label } from "@calcom/ui/components/form";
+import { Select } from "@calcom/ui/components/form";
+import { Button } from "@calcom/ui/components/button";
+import classNames from "@calcom/ui/classNames";
import {
- Button,
- Form,
- Label,
- Select,
- showToast,
SkeletonButton,
SkeletonContainer,
SkeletonText,
-} from "@calcom/ui";
-import classNames from "@calcom/ui/classNames";
+ SkeletonAvatar,
+} from "@calcom/ui/components/skeleton";
+import { showToast } from "@calcom/ui/components/toast";
import { LockEventTypeSwitch } from "../components/LockEventTypeSwitch";
import { NoSlotsNotificationSwitch } from "../components/NoSlotsNotificationSwitch";
diff --git a/packages/features/ee/organizations/pages/settings/other-team-members-view.tsx b/packages/features/ee/organizations/pages/settings/other-team-members-view.tsx
index f8e027579d..47f1d1c10e 100644
--- a/packages/features/ee/organizations/pages/settings/other-team-members-view.tsx
+++ b/packages/features/ee/organizations/pages/settings/other-team-members-view.tsx
@@ -13,7 +13,8 @@ import { CreationSource } from "@calcom/prisma/enums";
import { MembershipRole } from "@calcom/prisma/enums";
import { trpc } from "@calcom/trpc/react";
import type { RouterOutputs } from "@calcom/trpc/react";
-import { showToast, Button } from "@calcom/ui";
+import { Button } from "@calcom/ui/components/button";
+import { showToast } from "@calcom/ui/components/toast";
import MakeTeamPrivateSwitch from "../../../teams/components/MakeTeamPrivateSwitch";
import MemberListItem from "../components/MemberListItem";
diff --git a/packages/features/ee/organizations/pages/settings/other-team-profile-view.tsx b/packages/features/ee/organizations/pages/settings/other-team-profile-view.tsx
index b516f4f731..b4b5c4f1c1 100644
--- a/packages/features/ee/organizations/pages/settings/other-team-profile-view.tsx
+++ b/packages/features/ee/organizations/pages/settings/other-team-profile-view.tsx
@@ -20,22 +20,16 @@ import objectKeys from "@calcom/lib/objectKeys";
import slugify from "@calcom/lib/slugify";
import turndown from "@calcom/lib/turndownService";
import { trpc } from "@calcom/trpc/react";
-import {
- Avatar,
- Button,
- ConfirmationDialogContent,
- Dialog,
- DialogTrigger,
- Editor,
- Form,
- ImageUploader,
- Label,
- LinkIconButton,
- showToast,
- SkeletonContainer,
- SkeletonText,
- TextField,
-} from "@calcom/ui";
+import { Avatar } from "@calcom/ui/components/avatar";
+import { Button, LinkIconButton } from "@calcom/ui/components/button";
+import { Dialog, DialogTrigger, ConfirmationDialogContent } from "@calcom/ui/components/dialog";
+import { Editor } from "@calcom/ui/components/editor";
+import { Form } from "@calcom/ui/components/form";
+import { Label } from "@calcom/ui/components/form";
+import { TextField } from "@calcom/ui/components/form";
+import { ImageUploader } from "@calcom/ui/components/image-uploader";
+import { SkeletonContainer, SkeletonText } from "@calcom/ui/components/skeleton";
+import { showToast } from "@calcom/ui/components/toast";
import { subdomainSuffix } from "../../../organizations/lib/orgDomains";
diff --git a/packages/features/ee/organizations/pages/settings/profile.tsx b/packages/features/ee/organizations/pages/settings/profile.tsx
index 440997d8a5..ce1abd0a30 100644
--- a/packages/features/ee/organizations/pages/settings/profile.tsx
+++ b/packages/features/ee/organizations/pages/settings/profile.tsx
@@ -18,25 +18,24 @@ import { markdownToSafeHTML } from "@calcom/lib/markdownToSafeHTML";
import turndown from "@calcom/lib/turndownService";
import { MembershipRole } from "@calcom/prisma/enums";
import { trpc } from "@calcom/trpc/react";
-import { Icon } from "@calcom/ui";
+import { Avatar } from "@calcom/ui/components/avatar";
+import { Button } from "@calcom/ui/components/button";
+import { LinkIconButton } from "@calcom/ui/components/button";
+import { Editor } from "@calcom/ui/components/editor";
+import { Form } from "@calcom/ui/components/form";
+import { Label } from "@calcom/ui/components/form";
+import { TextField } from "@calcom/ui/components/form";
+import { Icon } from "@calcom/ui/components/icon";
+import { BannerUploader, ImageUploader } from "@calcom/ui/components/image-uploader";
+// if I include this in the above barrel import, I get a runtime error that the component is not exported.
+import { OrgBanner } from "@calcom/ui/components/organization-banner";
import {
- Avatar,
- BannerUploader,
- Button,
- Editor,
- Form,
- ImageUploader,
- Label,
- LinkIconButton,
- showToast,
- SkeletonAvatar,
SkeletonButton,
SkeletonContainer,
SkeletonText,
- TextField,
-} from "@calcom/ui";
-// if I include this in the above barrel import, I get a runtime error that the component is not exported.
-import { OrgBanner } from "@calcom/ui";
+ SkeletonAvatar,
+} from "@calcom/ui/components/skeleton";
+import { showToast } from "@calcom/ui/components/toast";
import { useOrgBranding } from "../../../organizations/context/provider";
diff --git a/packages/features/ee/payments/components/Payment.tsx b/packages/features/ee/payments/components/Payment.tsx
index cae28b4554..92c4b30694 100644
--- a/packages/features/ee/payments/components/Payment.tsx
+++ b/packages/features/ee/payments/components/Payment.tsx
@@ -11,7 +11,8 @@ import { WEBAPP_URL } from "@calcom/lib/constants";
import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import type { PaymentOption } from "@calcom/prisma/enums";
-import { Button, CheckboxField } from "@calcom/ui";
+import { Button } from "@calcom/ui/components/button";
+import { CheckboxField } from "@calcom/ui/components/form";
import type { PaymentPageProps } from "../pages/payment";
diff --git a/packages/features/ee/platform/components/CreateANewPlatformForm.tsx b/packages/features/ee/platform/components/CreateANewPlatformForm.tsx
index 6f4b4365b6..b25b868c04 100644
--- a/packages/features/ee/platform/components/CreateANewPlatformForm.tsx
+++ b/packages/features/ee/platform/components/CreateANewPlatformForm.tsx
@@ -16,7 +16,10 @@ import { UserPermissionRole } from "@calcom/prisma/enums";
import { CreationSource } from "@calcom/prisma/enums";
import { trpc } from "@calcom/trpc/react";
import type { Ensure } from "@calcom/types/utils";
-import { Alert, Form, TextField, Button } from "@calcom/ui";
+import { TextField } from "@calcom/ui/components/form";
+import { Alert } from "@calcom/ui/components/alert";
+import { Button } from "@calcom/ui/components/button";
+import { Form } from "@calcom/ui/components/form";
export const CreateANewPlatformForm = () => {
const session = useSession();
diff --git a/packages/features/ee/platform/pages/settings/members.tsx b/packages/features/ee/platform/pages/settings/members.tsx
index e9fa67fda1..a70c57ebd4 100644
--- a/packages/features/ee/platform/pages/settings/members.tsx
+++ b/packages/features/ee/platform/pages/settings/members.tsx
@@ -5,7 +5,7 @@ import { UserListTable } from "@calcom/features/users/components/UserTable/UserL
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { MembershipRole } from "@calcom/prisma/enums";
import { trpc } from "@calcom/trpc/react";
-import { Button } from "@calcom/ui";
+import { Button } from "@calcom/ui/components/button";
import NoPlatformPlan from "@calcom/web/components/settings/platform/dashboard/NoPlatformPlan";
import { useGetUserAttributes } from "@calcom/web/components/settings/platform/hooks/useGetUserAttributes";
import { PlatformPricing } from "@calcom/web/components/settings/platform/pricing/platform-pricing/index";
diff --git a/packages/features/ee/sso/components/ConnectionInfo.tsx b/packages/features/ee/sso/components/ConnectionInfo.tsx
index 7b250546e9..c736771792 100644
--- a/packages/features/ee/sso/components/ConnectionInfo.tsx
+++ b/packages/features/ee/sso/components/ConnectionInfo.tsx
@@ -2,16 +2,12 @@ import type { SSOConnection } from "@calcom/ee/sso/lib/saml";
import { APP_NAME } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
-import {
- Button,
- ConfirmationDialogContent,
- Dialog,
- DialogTrigger,
- Icon,
- Label,
- showToast,
- Tooltip,
-} from "@calcom/ui";
+import { Button } from "@calcom/ui/components/button";
+import { Dialog, DialogTrigger, ConfirmationDialogContent } from "@calcom/ui/components/dialog";
+import { Label } from "@calcom/ui/components/form";
+import { Icon } from "@calcom/ui/components/icon";
+import { showToast } from "@calcom/ui/components/toast";
+import { Tooltip } from "@calcom/ui/components/tooltip";
export default function ConnectionInfo({
teamId,
diff --git a/packages/features/ee/sso/components/OIDCConnection.tsx b/packages/features/ee/sso/components/OIDCConnection.tsx
index 98b03b8c54..f670b3ab47 100644
--- a/packages/features/ee/sso/components/OIDCConnection.tsx
+++ b/packages/features/ee/sso/components/OIDCConnection.tsx
@@ -4,7 +4,11 @@ import { Controller, useForm } from "react-hook-form";
import type { SSOConnection } from "@calcom/ee/sso/lib/saml";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
-import { Button, DialogFooter, Form, showToast, TextField, Dialog, DialogContent } from "@calcom/ui";
+import { Form } from "@calcom/ui/components/form";
+import { TextField } from "@calcom/ui/components/form";
+import { showToast } from "@calcom/ui/components/toast";
+import { Button } from "@calcom/ui/components/button";
+import { Dialog, DialogContent, DialogFooter } from "@calcom/ui/components/dialog";
type FormValues = {
clientId: string;
diff --git a/packages/features/ee/sso/components/SAMLConnection.tsx b/packages/features/ee/sso/components/SAMLConnection.tsx
index 946f3a862a..54e17af01b 100644
--- a/packages/features/ee/sso/components/SAMLConnection.tsx
+++ b/packages/features/ee/sso/components/SAMLConnection.tsx
@@ -4,7 +4,11 @@ import { Controller, useForm } from "react-hook-form";
import type { SSOConnection } from "@calcom/ee/sso/lib/saml";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
-import { Button, DialogFooter, Form, showToast, TextArea, Dialog, DialogContent } from "@calcom/ui";
+import { Form } from "@calcom/ui/components/form";
+import { TextArea } from "@calcom/ui/components/form";
+import { Button } from "@calcom/ui/components/button";
+import { Dialog, DialogContent, DialogFooter } from "@calcom/ui/components/dialog";
+import { showToast } from "@calcom/ui/components/toast";
interface FormValues {
metadata: string;
diff --git a/packages/features/ee/sso/components/SSOConfiguration.tsx b/packages/features/ee/sso/components/SSOConfiguration.tsx
index 5b12d01880..0835b54cec 100644
--- a/packages/features/ee/sso/components/SSOConfiguration.tsx
+++ b/packages/features/ee/sso/components/SSOConfiguration.tsx
@@ -4,7 +4,8 @@ import OIDCConnection from "@calcom/features/ee/sso/components/OIDCConnection";
import SAMLConnection from "@calcom/features/ee/sso/components/SAMLConnection";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
-import { Alert, SkeletonContainer, SkeletonText } from "@calcom/ui";
+import { Alert } from "@calcom/ui/components/alert";
+import { SkeletonText, SkeletonContainer } from "@calcom/ui/components/skeleton";
const SkeletonLoader = () => {
return (
diff --git a/packages/features/ee/support/components/ContactMenuItem.tsx b/packages/features/ee/support/components/ContactMenuItem.tsx
index b70cff1df4..8da7105823 100644
--- a/packages/features/ee/support/components/ContactMenuItem.tsx
+++ b/packages/features/ee/support/components/ContactMenuItem.tsx
@@ -1,7 +1,8 @@
import { JOIN_COMMUNITY } from "@calcom/lib/constants";
import { useHasPaidPlan } from "@calcom/lib/hooks/useHasPaidPlan";
import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Icon, UpgradeTeamsBadge } from "@calcom/ui";
+import { UpgradeTeamsBadge } from "@calcom/ui/components/badge";
+import { Icon } from "@calcom/ui/components/icon";
import FreshChatMenuItem from "../lib/freshchat/FreshChatMenuItem";
import HelpscoutMenuItem from "../lib/helpscout/HelpscoutMenuItem";
diff --git a/packages/features/ee/teams/components/AddNewTeamMembers.tsx b/packages/features/ee/teams/components/AddNewTeamMembers.tsx
index 24a92af350..07103e0c02 100644
--- a/packages/features/ee/teams/components/AddNewTeamMembers.tsx
+++ b/packages/features/ee/teams/components/AddNewTeamMembers.tsx
@@ -13,16 +13,12 @@ import { telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
import { MembershipRole } from "@calcom/prisma/enums";
import type { RouterOutputs } from "@calcom/trpc/react";
import { trpc } from "@calcom/trpc/react";
-import {
- Badge,
- Button,
- showToast,
- SkeletonButton,
- SkeletonContainer,
- SkeletonText,
- UserAvatar,
-} from "@calcom/ui";
+import { Badge } from "@calcom/ui/components/badge";
+import { UserAvatar } from "@calcom/ui/components/avatar";
+import { Button } from "@calcom/ui/components/button";
import classNames from "@calcom/ui/classNames";
+import { SkeletonButton, SkeletonContainer, SkeletonText } from "@calcom/ui/components/skeleton";
+import { showToast } from "@calcom/ui/components/toast";
type TeamMember = RouterOutputs["viewer"]["teams"]["listMembers"]["members"][number];
diff --git a/packages/features/ee/teams/components/CreateANewTeamForm.tsx b/packages/features/ee/teams/components/CreateANewTeamForm.tsx
index 0f02a8aa54..73f7593838 100644
--- a/packages/features/ee/teams/components/CreateANewTeamForm.tsx
+++ b/packages/features/ee/teams/components/CreateANewTeamForm.tsx
@@ -5,7 +5,11 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
import slugify from "@calcom/lib/slugify";
import type { RouterOutputs } from "@calcom/trpc/react";
import { trpc } from "@calcom/trpc/react";
-import { Alert, Button, DialogFooter, Form, TextField } from "@calcom/ui";
+import { Alert } from "@calcom/ui/components/alert";
+import { Button } from "@calcom/ui/components/button";
+import { DialogFooter } from "@calcom/ui/components/dialog";
+import { Form } from "@calcom/ui/components/form";
+import { TextField } from "@calcom/ui/components/form";
import { useOrgBranding } from "../../organizations/context/provider";
import { subdomainSuffix } from "../../organizations/lib/orgDomains";
diff --git a/packages/features/ee/teams/components/DeleteBulkTeamMembers.tsx b/packages/features/ee/teams/components/DeleteBulkTeamMembers.tsx
index fdd5f9aadd..ae284448b9 100644
--- a/packages/features/ee/teams/components/DeleteBulkTeamMembers.tsx
+++ b/packages/features/ee/teams/components/DeleteBulkTeamMembers.tsx
@@ -1,7 +1,8 @@
import { DataTableSelectionBar } from "@calcom/features/data-table";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
-import { ConfirmationDialogContent, Dialog, DialogTrigger, showToast } from "@calcom/ui";
+import { Dialog, DialogTrigger, ConfirmationDialogContent } from "@calcom/ui/components/dialog";
+import { showToast } from "@calcom/ui/components/toast";
import type { User } from "./MemberList";
diff --git a/packages/features/ee/teams/components/DisableTeamImpersonation.tsx b/packages/features/ee/teams/components/DisableTeamImpersonation.tsx
index d87c84aebe..c93873f883 100644
--- a/packages/features/ee/teams/components/DisableTeamImpersonation.tsx
+++ b/packages/features/ee/teams/components/DisableTeamImpersonation.tsx
@@ -2,7 +2,8 @@ import { useState } from "react";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
-import { showToast, SettingsToggle } from "@calcom/ui";
+import { showToast } from "@calcom/ui/components/toast";
+import { SettingsToggle } from "@calcom/ui/components/form";
const DisableTeamImpersonation = ({
teamId,
diff --git a/packages/features/ee/teams/components/EditMemberSheet.tsx b/packages/features/ee/teams/components/EditMemberSheet.tsx
index 0e3afcd992..7cdddecf57 100644
--- a/packages/features/ee/teams/components/EditMemberSheet.tsx
+++ b/packages/features/ee/teams/components/EditMemberSheet.tsx
@@ -11,21 +11,14 @@ import { useEditMode } from "@calcom/features/users/components/UserTable/EditShe
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { MembershipRole } from "@calcom/prisma/enums";
import { trpc } from "@calcom/trpc/react";
-import {
- Avatar,
- Icon,
- Sheet,
- SheetContent,
- SheetFooter,
- SheetHeader,
- SheetBody,
- Skeleton,
- Tooltip,
- ToggleGroup,
- Form,
- showToast,
- Loader,
-} from "@calcom/ui";
+import { Avatar } from "@calcom/ui/components/avatar";
+import { Form } from "@calcom/ui/components/form";
+import { ToggleGroup } from "@calcom/ui/components/form";
+import { Icon } from "@calcom/ui/components/icon";
+import { Sheet, SheetContent, SheetFooter, SheetHeader, SheetBody } from "@calcom/ui/components/sheet";
+import { Skeleton, Loader } from "@calcom/ui/components/skeleton";
+import { showToast } from "@calcom/ui/components/toast";
+import { Tooltip } from "@calcom/ui/components/tooltip";
import { updateRoleInCache } from "./MemberChangeRoleModal";
import type { Action, State, User } from "./MemberList";
diff --git a/packages/features/ee/teams/components/EventTypesList.tsx b/packages/features/ee/teams/components/EventTypesList.tsx
index 2aa63b3b31..0218094d16 100644
--- a/packages/features/ee/teams/components/EventTypesList.tsx
+++ b/packages/features/ee/teams/components/EventTypesList.tsx
@@ -6,21 +6,19 @@ import { DataTableSelectionBar } from "@calcom/features/data-table";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { SchedulingType } from "@calcom/prisma/enums";
import { trpc } from "@calcom/trpc";
+import classNames from "@calcom/ui/classNames";
+import { Button } from "@calcom/ui/components/button";
import {
- Button,
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
- Popover,
- showToast,
- PopoverContent,
- PopoverTrigger,
- Icon,
-} from "@calcom/ui";
-import classNames from "@calcom/ui/classNames";
+} from "@calcom/ui/components/command";
+import { Icon } from "@calcom/ui/components/icon";
+import { Popover, PopoverContent, PopoverTrigger } from "@calcom/ui/components/popover";
+import { showToast } from "@calcom/ui/components/toast";
import type { User } from "./MemberList";
diff --git a/packages/features/ee/teams/components/GoogleWorkspaceInviteButton.tsx b/packages/features/ee/teams/components/GoogleWorkspaceInviteButton.tsx
index 68894770c0..3d9131886f 100644
--- a/packages/features/ee/teams/components/GoogleWorkspaceInviteButton.tsx
+++ b/packages/features/ee/teams/components/GoogleWorkspaceInviteButton.tsx
@@ -5,7 +5,9 @@ import { useFlagMap } from "@calcom/features/flags/context/provider";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { useParamsWithFallback } from "@calcom/lib/hooks/useParamsWithFallback";
import { trpc } from "@calcom/trpc";
-import { Button, showToast, Tooltip } from "@calcom/ui";
+import { showToast } from "@calcom/ui/components/toast";
+import { Tooltip } from "@calcom/ui/components/tooltip";
+import { Button } from "@calcom/ui/components/button";
const GoogleIcon = () => (