chore: sync with master

* chore: migrate antd ProgressBar to signoz ui component

* fix: homepage progress bar leaking section, resolve comments

* fix: remove stripe animation from progress bars in api monitoring section

* revert: accidental unrelated files

.github/CODEOWNERS

@@ -118,6 +118,9 @@ go.mod @therealpandey
 
 /tests/integration/ @therealpandey
 
+# e2e tests
+/tests/e2e/ @AshwinBhatkal
+
 # Flagger Owners
 
 /pkg/flagger/ @therealpandey
@@ -162,3 +165,7 @@ go.mod @therealpandey
 /frontend/src/lib/dashboard/ @SigNoz/pulse-frontend
 /frontend/src/lib/dashboardVariables/ @SigNoz/pulse-frontend
 /frontend/src/components/NewSelect/ @SigNoz/pulse-frontend
+
+## Dashboard V2
+/frontend/src/pages/DashboardPageV2/ @SigNoz/pulse-frontend
+/frontend/src/pages/DashboardsListPageV2/ @SigNoz/pulse-frontend

frontend/plugins/rules/no-antd-components.mjs

@@ -17,9 +17,8 @@ const BANNED_COMPONENTS = {
 	Typography:
 		'Use @signozhq/ui/typography Typography instead of antd Typography.',
 	Switch: 'Use @signozhq/ui/switch Switch instead of antd Switch.',
-	Dropdown:
-		'Use @signozhq/ui DropdownMenuSimple (or the composable DropdownMenu primitives) from @signozhq/ui/dropdown-menu instead of antd Dropdown.',
 	Badge: 'Use @signozhq/ui/badge instead of antd Badge.',
+	Progress: 'Use @signozhq/ui/progress instead of antd Progress.',
 };
 
 export default {

frontend/src/components/CeleryOverview/CeleryOverviewTable/CeleryOverviewTable.styles.scss

@@ -51,13 +51,6 @@
 				background: var(--l1-background);
 			}
 
-			.progress-container {
-				.ant-progress-bg {
-					height: 8px !important;
-					border-radius: 4px;
-				}
-			}
-
 			.ant-table-tbody > tr:hover > td {
 				background: color-mix(in srgb, var(--l1-foreground) 4%, transparent);
 			}

frontend/src/components/CeleryOverview/CeleryOverviewTable/CeleryOverviewTable.tsx

@@ -9,13 +9,13 @@ import {
 	Flex,
 	Input,
 	InputRef,
-	Progress,
 	Space,
 	Spin,
 	TableColumnsType,
 	TableColumnType,
 	Tooltip,
 } from 'antd';
+import { Progress } from '@signozhq/ui/progress';
 import { Typography } from '@signozhq/ui/typography';
 import type { FilterDropdownProps } from 'antd/lib/table/interface';
 import logEvent from 'api/common/logEvent';
@@ -59,7 +59,7 @@ function ProgressRender(item: string | number): JSX.Element {
 			<Progress
 				percent={percent}
 				strokeLinecap="butt"
-				size="small"
+				showInfo
 				strokeColor={((): string => {
 					const cpuPercent = percent;
 					if (cpuPercent >= 90) {

frontend/src/components/CustomTimePicker/TimezonePicker.tsx

@@ -6,7 +6,7 @@ import {
 	useState,
 } from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { Input } from 'antd';
+import { Input } from '@signozhq/ui/input';
 import logEvent from 'api/common/logEvent';
 import cx from 'classnames';
 import { TimezonePickerShortcuts } from 'constants/shortcuts/TimezonePickerShortcuts';

frontend/src/components/DropDown/DropDown.styles.scss

@@ -0,0 +1,7 @@
+.dropdown-button {
+	color: var(--l1-foreground);
+}
+
+.dropdown-icon {
+	font-size: 1.2rem;
+}

frontend/src/components/DropDown/DropDown.tsx

@@ -0,0 +1,51 @@
+import { useState } from 'react';
+import { Ellipsis } from '@signozhq/icons';
+import { Button, Dropdown, MenuProps } from 'antd';
+
+import './DropDown.styles.scss';
+
+function DropDown({
+	element,
+	onDropDownItemClick,
+}: {
+	element: JSX.Element[];
+	onDropDownItemClick?: MenuProps['onClick'];
+}): JSX.Element {
+	const items: MenuProps['items'] = element.map(
+		(e: JSX.Element, index: number) => ({
+			label: e,
+			key: index,
+		}),
+	);
+
+	const [isDdOpen, setDdOpen] = useState<boolean>(false);
+
+	return (
+		<Dropdown
+			menu={{
+				items,
+				onMouseEnter: (): void => setDdOpen(true),
+				onMouseLeave: (): void => setDdOpen(false),
+				onClick: (item): void => onDropDownItemClick?.(item),
+			}}
+			open={isDdOpen}
+		>
+			<Button
+				type="link"
+				className={`dropdown-button`}
+				onClick={(e): void => {
+					e.preventDefault();
+					setDdOpen(true);
+				}}
+			>
+				<Ellipsis className="dropdown-icon" size={16} />
+			</Button>
+		</Dropdown>
+	);
+}
+
+DropDown.defaultProps = {
+	onDropDownItemClick: (): void => {},
+};
+
+export default DropDown;

frontend/src/components/ExplorerCard/ExplorerCard.tsx

@@ -1,7 +1,15 @@
 import { useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
-import { Button, Col, Popover, Row, Select, Space } from 'antd';
-import { DropdownMenuSimple, type MenuProps } from '@signozhq/ui/dropdown-menu';
+import {
+	Button,
+	Col,
+	Dropdown,
+	MenuProps,
+	Popover,
+	Row,
+	Select,
+	Space,
+} from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import axios from 'axios';
 import TextToolTip from 'components/TextToolTip';
@@ -233,9 +241,9 @@ function ExplorerCard({
 								</Popover>
 								<Share2 onClick={onCopyUrlHandler} size="md" />
 								{viewKey && (
-									<DropdownMenuSimple menu={moreOptionMenu}>
-										<Button type="text" size="small" icon={<Ellipsis size="md" />} />
-									</DropdownMenuSimple>
+									<Dropdown trigger={['click']} menu={moreOptionMenu}>
+										<Ellipsis size="md" />
+									</Dropdown>
 								)}
 							</Space>
 						</OffSetCol>

frontend/src/components/ExplorerCard/SaveViewWithName.tsx

@@ -1,5 +1,6 @@
 import { useTranslation } from 'react-i18next';
-import { Card, Form, Input } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Card, Form } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';

frontend/src/components/InputWithLabel/InputWithLabel.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
-import { Button, Input } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
 import { X } from '@signozhq/icons';

frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { Button, Input, InputNumber, Popover, Tooltip } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button, InputNumber, Popover, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import type { DefaultOptionType } from 'antd/es/select';
 import cx from 'classnames';

frontend/src/components/QueryBuilderV2/QueryV2/QueryV2.tsx

@@ -6,7 +6,7 @@ import {
 	useMemo,
 	useState,
 } from 'react';
-import { DropdownMenuSimple } from '@signozhq/ui/dropdown-menu';
+import { Dropdown } from 'antd';
 import cx from 'classnames';
 import { ENTITY_VERSION_V4, ENTITY_VERSION_V5 } from 'constants/app';
 import { PANEL_TYPES } from 'constants/queryBuilder';
@@ -195,7 +195,7 @@ export const QueryV2 = forwardRef(function QueryV2(
 							)}
 
 							{isMultiQueryAllowed && (
-								<DropdownMenuSimple
+								<Dropdown
 									className="query-actions-dropdown"
 									menu={{
 										items: [
@@ -217,10 +217,10 @@ export const QueryV2 = forwardRef(function QueryV2(
 												: []),
 										],
 									}}
-									align="end"
+									placement="bottomRight"
 								>
 									<Ellipsis size={16} />
-								</DropdownMenuSimple>
+								</Dropdown>
 							)}
 						</div>
 					</div>

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable sonarjs/no-identical-functions */
 import { Fragment, useMemo, useState } from 'react';
-import { Button, Checkbox, Input, Skeleton } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button, Checkbox, Skeleton } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
 import { removeKeysFromExpression } from 'components/QueryBuilderV2/utils';

frontend/src/components/QuickFilters/QuickFiltersSettings/QuickFiltersSettings.tsx

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
-import { Button, Input } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button } from 'antd';
 import { Check, TableColumnsSplit, X } from '@signozhq/icons';
 import { Filter as FilterType } from 'types/api/quickFilters/getCustomFilters';
 

frontend/src/components/ResizeTable/DynamicColumnTable.tsx

@@ -4,14 +4,14 @@ import type {
 	TableColumnsType as ColumnsType,
 	TableColumnType as ColumnType,
 } from 'antd';
-import { Button, Flex } from 'antd';
-import { DropdownMenuSimple, type MenuItem } from '@signozhq/ui/dropdown-menu';
+import { Button, Dropdown, Flex, MenuProps } from 'antd';
 import { Switch } from '@signozhq/ui/switch';
 import logEvent from 'api/common/logEvent';
 import LaunchChatSupport from 'components/LaunchChatSupport/LaunchChatSupport';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { SlidersHorizontal } from '@signozhq/icons';
+import { popupContainer } from 'utils/selectPopupContainer';
 
 import ResizeTable from './ResizeTable';
 import { DynamicColumnTableProps } from './types';
@@ -84,9 +84,8 @@ function DynamicColumnTable({
 			);
 		};
 
-	const items: MenuItem[] =
+	const items: MenuProps['items'] =
 		dynamicColumns?.map((column, index) => ({
-			key: String(index),
 			label: (
 				<div
 					className="dynamicColumnsTable-items"
@@ -100,6 +99,8 @@ function DynamicColumnTable({
 					/>
 				</div>
 			),
+			key: index,
+			type: 'checkbox',
 		})) || [];
 
 	// Get current page from URL or default to 1
@@ -128,14 +129,18 @@ function DynamicColumnTable({
 			<Flex justify="flex-end" align="center" gap={8}>
 				{facingIssueBtn && <LaunchChatSupport {...facingIssueBtn} />}
 				{dynamicColumns && (
-					<DropdownMenuSimple menu={{ items }}>
+					<Dropdown
+						getPopupContainer={popupContainer}
+						menu={{ items }}
+						trigger={['click']}
+					>
 						<Button
 							className="dynamicColumnTable-button filter-btn"
 							size="middle"
 							icon={<SlidersHorizontal size={14} />}
 							data-testid="additional-filters-button"
 						/>
-					</DropdownMenuSimple>
+					</Dropdown>
 				)}
 			</Flex>
 

frontend/src/components/TimePreferenceDropDown/index.tsx

@@ -1,7 +1,6 @@
 import { Dispatch, SetStateAction, useCallback, useMemo } from 'react';
 import { ChevronDown, Globe } from '@signozhq/icons';
-import { DropdownMenuSimple } from '@signozhq/ui/dropdown-menu';
-import { Button } from 'antd';
+import { Button, Dropdown } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import TimeItems, {
 	timePreferance,
@@ -28,17 +27,20 @@ function TimePreference({
 
 	const menu = useMemo(
 		() => ({
-			items: menuItems.map((item) => ({
-				...item,
-				onClick: timeMenuItemOnChangeHandler,
-			})),
+			items: menuItems,
+			onClick: timeMenuItemOnChangeHandler,
 		}),
 		[timeMenuItemOnChangeHandler],
 	);
 
 	return (
-		<DropdownMenuSimple menu={menu} className="time-selection-menu">
-			<Button className="time-selection-target">
+		<Dropdown
+			menu={menu}
+			rootClassName="time-selection-menu"
+			className="time-selection-target"
+			trigger={['click']}
+		>
+			<Button>
 				<div className="button-selected-text">
 					<Globe size={14} />
 					<Typography.Text className="selected-value">
@@ -47,7 +49,7 @@ function TimePreference({
 				</div>
 				<ChevronDown size="md" />
 			</Button>
-		</DropdownMenuSimple>
+		</Dropdown>
 	);
 }
 

frontend/src/container/AlertHistory/Statistics/TopContributorsCard/TopContributorsCard.styles.scss

@@ -45,6 +45,10 @@
 	.contributors-row {
 		height: 80px;
 	}
+	.top-contributors-progress {
+		--progress-background: transparent;
+	}
+
 	&__content {
 		.ant-table {
 			&-cell {

frontend/src/container/AlertHistory/Statistics/TopContributorsCard/TopContributorsRows.tsx

@@ -1,6 +1,7 @@
 import { HTMLAttributes } from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { Progress, Table, TableColumnsType as ColumnsType } from 'antd';
+import { Table, TableColumnsType as ColumnsType } from 'antd';
+import { Progress } from '@signozhq/ui/progress';
 import logEvent from 'api/common/logEvent';
 import { ConditionalAlertPopover } from 'container/AlertHistory/AlertPopover/AlertPopover';
 import AlertLabels from 'pages/AlertDetails/AlertHeader/AlertLabels/AlertLabels';
@@ -51,8 +52,8 @@ function TopContributorsRows({
 					<Progress
 						percent={(count / totalCurrentTriggers) * 100}
 						showInfo={false}
-						trailColor="rgba(255, 255, 255, 0)"
 						strokeColor={Color.BG_ROBIN_500}
+						className="top-contributors-progress"
 					/>
 				</ConditionalAlertPopover>
 			),

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/DomainDetails.styles.scss

@@ -141,12 +141,9 @@
 
 			.progress-container {
 				width: 158px;
-				.ant-progress {
-					margin: 0;
 
-					.ant-progress-text {
-						font-weight: 600;
-					}
+				span {
+					font-weight: 600;
 				}
 			}
 

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/DomainMetrics.tsx

@@ -1,7 +1,8 @@
 import { useMemo } from 'react';
 import { useQueries } from 'react-query';
 import { Color } from '@signozhq/design-tokens';
-import { Progress, Skeleton, Tooltip } from 'antd';
+import { Skeleton, Tooltip } from 'antd';
+import { Progress } from '@signozhq/ui/progress';
 import { Typography } from '@signozhq/ui/typography';
 import { ENTITY_VERSION_V5 } from 'constants/app';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
@@ -136,12 +137,11 @@ function DomainMetrics({
 							<Tooltip title={formattedDomainMetricsData.errorRate}>
 								{formattedDomainMetricsData.errorRate !== '-' ? (
 									<Progress
-										status="active"
 										percent={Number(
 											Number(formattedDomainMetricsData.errorRate).toFixed(2),
 										)}
 										strokeLinecap="butt"
-										size="small"
+										showInfo
 										strokeColor={((): string => {
 											const errorRatePercent = Number(
 												Number(formattedDomainMetricsData.errorRate).toFixed(2),

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/EndPointMetrics.tsx

@@ -1,7 +1,8 @@
 import { useMemo } from 'react';
 import { UseQueryResult } from 'react-query';
 import { Color } from '@signozhq/design-tokens';
-import { Progress, Skeleton, Tooltip } from 'antd';
+import { Skeleton, Tooltip } from 'antd';
+import { Progress } from '@signozhq/ui/progress';
 import { Typography } from '@signozhq/ui/typography';
 import {
 	getDisplayValue,
@@ -80,10 +81,9 @@ function EndPointMetrics({
 							<Tooltip title={metricsData?.errorRate}>
 								{metricsData?.errorRate !== '-' ? (
 									<Progress
-										status="active"
 										percent={Number(Number(metricsData?.errorRate ?? 0).toFixed(2))}
 										strokeLinecap="butt"
-										size="small"
+										showInfo
 										strokeColor={((): string => {
 											const errorRatePercent = Number(
 												Number(metricsData?.errorRate ?? 0).toFixed(2),

frontend/src/container/ApiMonitoring/utils.tsx

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { Progress, TableColumnType as ColumnType, Tag, Tooltip } from 'antd';
+import { TableColumnType as ColumnType, Tag, Tooltip } from 'antd';
+import { Progress } from '@signozhq/ui/progress';
 import { convertFiltersToExpressionWithExistingQuery } from 'components/QueryBuilderV2/utils';
 import {
 	FiltersType,
@@ -257,10 +258,9 @@ export const columnsConfig: ColumnType<APIDomainsRowData>[] = [
 				errorRate === 'n/a' || errorRate === '-' ? 0 : errorRate;
 			return (
 				<Progress
-					status="active"
 					percent={Number((errorRateValue as number).toFixed(2))}
 					strokeLinecap="butt"
-					size="small"
+					showInfo
 					strokeColor={((): string => {
 						const errorRatePercent = Number((errorRateValue as number).toFixed(2));
 						if (errorRatePercent >= 90) {
@@ -1022,14 +1022,13 @@ export const getEndPointsColumnsConfig = (
 		className: `column`,
 		render: (errorRate: number | string): React.ReactNode => (
 			<Progress
-				status="active"
 				percent={Number(
 					(
 						(errorRate === 'n/a' || errorRate === '-' ? 0 : errorRate) as number
 					).toFixed(1),
 				)}
 				strokeLinecap="butt"
-				size="small"
+				showInfo
 				strokeColor={((): string => {
 					const errorRatePercent = Number((errorRate as number).toFixed(1));
 					if (errorRatePercent >= 90) {
@@ -2514,10 +2513,9 @@ export const dependentServicesColumns: ColumnType<DependentServicesData>[] = [
 		render: (errorPercentage: number | string): React.ReactNode =>
 			errorPercentage !== '-' ? (
 				<Progress
-					status="active"
 					percent={Number((errorPercentage as number).toFixed(2))}
 					strokeLinecap="butt"
-					size="small"
+					showInfo
 					strokeColor={((): string => {
 						const errorPercentagePercent = Number(
 							(errorPercentage as number).toFixed(2),
@@ -3022,14 +3020,13 @@ export const getAllEndpointsWidgetData = (
 		),
 		F1: (errorRate: any): ReactNode => (
 			<Progress
-				status="active"
 				percent={Number(
 					(
 						(errorRate === 'n/a' || errorRate === '-' ? 0 : errorRate) as number
 					).toFixed(2),
 				)}
 				strokeLinecap="butt"
-				size="small"
+				showInfo
 				strokeColor={((): string => {
 					const errorRatePercent = Number(
 						(

frontend/src/container/CreateAlertV2/AlertCondition/ThresholdItem.tsx

@@ -1,5 +1,6 @@
 import { useMemo, useState } from 'react';
-import { Button, Input, Select, Tooltip } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button, Select, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { CircleX, Trash } from '@signozhq/icons';
 import { useAppContext } from 'providers/App/App';

frontend/src/container/CreateAlertV2/EvaluationSettings/AdvancedOptions.tsx

@@ -1,4 +1,5 @@
-import { Collapse, Input } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Collapse } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 
 import { useCreateAlertState } from '../context';

frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationWindowPopover/EvaluationWindowDetails.tsx

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
-import { Input, Select } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Select } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 
 import { ADVANCED_OPTIONS_TIME_UNIT_OPTIONS } from '../../context/constants';

frontend/src/container/CreateAlertV2/EvaluationSettings/TimeInput/TimeInput.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Input } from 'antd';
-
+import { Input } from '@signozhq/ui/input';
 import './TimeInput.scss';
 
 export interface TimeInputProps {

frontend/src/container/CreateAlertV2/NotificationSettings/NotificationSettings.tsx

@@ -1,4 +1,5 @@
-import { Input, Select } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Select } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 
 import { useCreateAlertState } from '../context';

frontend/src/container/CustomDomainSettings/CustomDomainSettings.tsx

@@ -11,13 +11,8 @@ import {
 } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { Callout } from '@signozhq/ui/callout';
-import {
-	DropdownMenu,
-	DropdownMenuContent,
-	DropdownMenuTrigger,
-} from '@signozhq/ui/dropdown-menu';
 import { toast } from '@signozhq/ui/sonner';
-import { Skeleton } from 'antd';
+import { Dropdown, Skeleton } from 'antd';
 import {
 	RenderErrorResponseDTO,
 	ZeustypesHostDTO,
@@ -205,15 +200,10 @@ export default function CustomDomainSettings(): JSX.Element {
 							!workspaceName ? 'workspace-name-hidden' : ''
 						}`}
 					>
-						<DropdownMenu>
-							<DropdownMenuTrigger asChild>
-								<Button variant="link" color="none" disabled={isFetchingHosts}>
-									<Link2 size={12} />
-									<span>{stripProtocol(activeHost?.url ?? '')}</span>
-									<ChevronDown size={12} />
-								</Button>
-							</DropdownMenuTrigger>
-							<DropdownMenuContent align="start">
+						<Dropdown
+							trigger={['click']}
+							disabled={isFetchingHosts}
+							dropdownRender={(): JSX.Element => (
 								<div className="workspace-url-dropdown">
 									<span className="workspace-url-dropdown-header">
 										All Workspace URLs
@@ -246,8 +236,14 @@ export default function CustomDomainSettings(): JSX.Element {
 										);
 									})}
 								</div>
-							</DropdownMenuContent>
-						</DropdownMenu>
+							)}
+						>
+							<Button variant="link" color="none">
+								<Link2 size={12} />
+								<span>{stripProtocol(activeHost?.url ?? '')}</span>
+								<ChevronDown size={12} />
+							</Button>
+						</Dropdown>
 						<span className="custom-domain-card-meta-timezone">
 							<Clock size={11} />
 							{timezone.offset}

frontend/src/container/CustomDomainSettings/__tests__/CustomDomainSettings.test.tsx

@@ -1,5 +1,4 @@
 import { GetHosts200 } from 'api/generated/services/sigNoz.schemas';
-import userEvent from '@testing-library/user-event';
 import { rest, server } from 'mocks-server/server';
 import { fireEvent, render, screen, waitFor } from 'tests/test-utils';
 
@@ -143,13 +142,12 @@ describe('CustomDomainSettings', () => {
 	});
 
 	it('shows all workspace URLs as links in the dropdown', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		render(<CustomDomainSettings />);
 
 		await screen.findByText(/custom-host\.test\.cloud/i);
 
 		// Open the URL dropdown
-		await user.click(
+		fireEvent.click(
 			screen.getByRole('button', { name: /custom-host\.test\.cloud/i }),
 		);
 

frontend/src/container/DashboardContainer/DashboardDescription/index.tsx

@@ -16,7 +16,8 @@ import {
 	Plus,
 	X,
 } from '@signozhq/icons';
-import { Button, Card, Input, Modal, Popover, Tag, Tooltip } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button, Card, Modal, Popover, Tag, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import ConfigureIcon from 'assets/Integrations/ConfigureIcon';

frontend/src/container/DashboardContainer/visualization/components/ChartManager/ChartManager.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { Button, Input } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button } from 'antd';
 import { PrecisionOption, PrecisionOptionsEnum } from 'components/Graph/types';
 import { ResizeTable } from 'components/ResizeTable';
 import { useNotifications } from 'hooks/useNotifications';

frontend/src/container/Download/Download.tsx

@@ -1,7 +1,6 @@
 import { useState } from 'react';
 import { CloudDownload } from '@signozhq/icons';
-import { DropdownMenuSimple, type MenuProps } from '@signozhq/ui/dropdown-menu';
-import { Button, Flex } from 'antd';
+import { Button, Dropdown, MenuProps, Flex } from 'antd';
 import { unparse } from 'papaparse';
 
 import { DownloadProps } from './Download.types';
@@ -68,7 +67,7 @@ function Download({ data, isLoading, fileName }: DownloadProps): JSX.Element {
 	};
 
 	return (
-		<DropdownMenuSimple menu={menu}>
+		<Dropdown menu={menu} trigger={['click']}>
 			<Button
 				className="download-button"
 				loading={isLoading || isDownloading}
@@ -80,7 +79,7 @@ function Download({ data, isLoading, fileName }: DownloadProps): JSX.Element {
 					Download
 				</Flex>
 			</Button>
-		</DropdownMenuSimple>
+		</Dropdown>
 	);
 }
 

frontend/src/container/ExplorerOptions/ExplorerOptions.tsx

@@ -19,11 +19,11 @@ import {
 	Info,
 } from '@signozhq/icons';
 import { Color } from '@signozhq/design-tokens';
+import { Input } from '@signozhq/ui/input';
 import {
 	Button,
 	ColorPicker,
 	Divider,
-	Input,
 	Modal,
 	RefSelectProps,
 	Select,

frontend/src/container/FormAlertChannels/Settings/Email.tsx

@@ -1,7 +1,7 @@
 import { Dispatch, SetStateAction } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Form, Input } from 'antd';
-
+import { Input } from '@signozhq/ui/input';
+import { Form } from 'antd';
 import { EmailChannel } from '../../CreateAlertChannels/config';
 
 function EmailForm({ setSelectedConfig }: EmailFormProps): JSX.Element {

frontend/src/container/FormAlertChannels/Settings/Webhook.tsx

@@ -1,6 +1,7 @@
 import { Dispatch, SetStateAction } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Form, Input } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Form } from 'antd';
 import { MarkdownRenderer } from 'components/MarkdownRenderer/MarkdownRenderer';
 
 import { WebhookChannel } from '../../CreateAlertChannels/config';

frontend/src/container/FormAlertChannels/index.tsx

@@ -1,7 +1,8 @@
 import { Dispatch, ReactElement, SetStateAction } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Form, FormInstance, Input, Select } from 'antd';
+import { Input } from '@signozhq/ui/input';
 import { Switch } from '@signozhq/ui/switch';
+import { Form, FormInstance, Select } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import type { Store } from 'antd/lib/form/interface';
 import ROUTES from 'constants/routes';

frontend/src/container/GeneralSettings/styles.ts

@@ -1,4 +1,8 @@
-import { Col, Input as InputComponent } from 'antd';
+import {
+	Col,
+	Dropdown as DropDownComponent,
+	Input as InputComponent,
+} from 'antd';
 import { Typography as TypographyComponent } from '@signozhq/ui/typography';
 import styled from 'styled-components';
 
@@ -30,6 +34,16 @@ export const ButtonContainer = styled.div`
 	}
 `;
 
+export const Dropdown = styled(DropDownComponent)`
+	&&& {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		max-width: 150px;
+		min-width: 150px;
+	}
+`;
+
 export const TextContainer = styled.div`
 	&&& {
 		min-width: 100px;

frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.test.tsx

@@ -1,7 +1,6 @@
 // eslint-disable-next-line no-restricted-imports
 import { Provider } from 'react-redux';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import { fireEvent, render, screen } from '@testing-library/react';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import ROUTES from 'constants/routes';
 import { AppProvider } from 'providers/App/App';
@@ -177,7 +176,6 @@ jest.mock('providers/Dashboard/store/useDashboardStore', () => ({
 
 describe('WidgetGraphComponent', () => {
 	it('should show correct menu items when hovering over more options while loading', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		const { getByTestId, findByRole, getByText, container } = render(
 			<MockQueryClientProvider>
 				<ErrorModalProvider>
@@ -210,7 +208,7 @@ describe('WidgetGraphComponent', () => {
 		expect(skeleton).toBeInTheDocument();
 
 		const moreOptionsButton = getByTestId('widget-header-options');
-		await user.click(moreOptionsButton);
+		fireEvent.mouseEnter(moreOptionsButton);
 
 		const menu = await findByRole('menu');
 		expect(menu).toBeInTheDocument();

frontend/src/container/GridCardLayout/GridCardLayout.tsx

@@ -6,7 +6,8 @@ import { useIsFetching } from 'react-query';
 import { useDispatch } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Form, Input, Modal } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button, Form, Modal } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import cx from 'classnames';

frontend/src/container/GridCardLayout/WidgetHeader/WidgetHeader.styles.scss

@@ -54,17 +54,6 @@
 	visibility: visible;
 }
 
-// currently the width of the dropdown menu is set to 100% of the parent container,
-// which is not desired. This is a workaround to unset that width and allow the dropdown menu to size based on its content.
-// This is necessary because the dropdown menu can contain items with varying widths, and setting it to 100% can cause layout issues and make the menu look unbalanced.
-// we should idealy fix this in the dropdown menu component itself, but for now this is a quick fix to ensure the dropdown menu looks correct in the widget header.
-
-[data-radix-popper-content-wrapper]
-	[data-slot='dropdown-menu-content'].widget-header-dropdown
-	[data-slot='dropdown-menu-item'] {
-	width: unset !important;
-}
-
 .widget-api-actions {
 	padding-right: 0.25rem;
 }

frontend/src/container/GridCardLayout/WidgetHeader/__tests__/WidgetHeader.test.tsx

@@ -467,7 +467,6 @@ describe('WidgetHeader', () => {
 
 	describe('Create Alerts Menu Item', () => {
 		it('renders Create Alerts menu item with external link icon when included in headerMenuList', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
 			render(
 				<WidgetHeader
 					title={TEST_WIDGET_TITLE}
@@ -484,7 +483,7 @@ describe('WidgetHeader', () => {
 
 			const moreOptionsIcon = await screen.findByTestId(WIDGET_HEADER_OPTIONS_ID);
 			expect(moreOptionsIcon).toBeInTheDocument();
-			await user.click(moreOptionsIcon);
+			await userEvent.hover(moreOptionsIcon);
 
 			await screen.findByText(CREATE_ALERTS_TEXT);
 
@@ -495,7 +494,6 @@ describe('WidgetHeader', () => {
 		});
 
 		it('Create Alerts menu item is enabled and clickable', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
 			const mockCreateAlertsHandler = jest.fn();
 			const useCreateAlerts = jest.requireMock(
 				'hooks/queryBuilder/useCreateAlerts',
@@ -519,12 +517,12 @@ describe('WidgetHeader', () => {
 			expect(useCreateAlerts).toHaveBeenCalledWith(mockWidget, 'dashboardView');
 
 			const moreOptionsIcon = await screen.findByTestId(WIDGET_HEADER_OPTIONS_ID);
-			await user.click(moreOptionsIcon);
+			await userEvent.hover(moreOptionsIcon);
 
 			const createAlertsMenuItem = await screen.findByText(CREATE_ALERTS_TEXT);
 
 			// Verify the menu item is clickable by actually clicking it
-			await user.click(createAlertsMenuItem);
+			await userEvent.click(createAlertsMenuItem);
 			expect(mockCreateAlertsHandler).toHaveBeenCalledTimes(1);
 		});
 	});

frontend/src/container/GridCardLayout/WidgetHeader/index.tsx

@@ -15,8 +15,7 @@ import {
 	X,
 } from '@signozhq/icons';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Input, Tooltip } from 'antd';
-import { DropdownMenuSimple } from '@signozhq/ui/dropdown-menu';
+import { Button, Dropdown, Input, MenuProps, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import ErrorContent from 'components/ErrorModal/components/ErrorContent';
 import ErrorPopover from 'components/ErrorPopover/ErrorPopover';
@@ -129,7 +128,7 @@ function WidgetHeader({
 		],
 	);
 
-	const onMenuItemSelectHandler = useCallback(
+	const onMenuItemSelectHandler: MenuProps['onClick'] = useCallback(
 		({ key }: { key: string }): void => {
 			if (isTWidgetOptions(key)) {
 				const functionToCall = keyMethodMapping[key];
@@ -189,8 +188,18 @@ function WidgetHeader({
 			{
 				key: MenuItemKeys.CreateAlerts,
 				icon: <Bell size="md" />,
-				label: MENUITEM_KEYS_VS_LABELS[MenuItemKeys.CreateAlerts],
-				rightIcon: <SquareArrowOutUpRight size="lg" />,
+				label: (
+					<span
+						style={{
+							display: 'flex',
+							alignItems: 'baseline',
+							justifyContent: 'space-between',
+						}}
+					>
+						{MENUITEM_KEYS_VS_LABELS[MenuItemKeys.CreateAlerts]}
+						<SquareArrowOutUpRight size={10} />
+					</span>
+				),
 				isVisible: headerMenuList?.includes(MenuItemKeys.CreateAlerts) || false,
 				disabled: false,
 			},
@@ -212,10 +221,8 @@ function WidgetHeader({
 
 	const menu = useMemo(
 		() => ({
-			items: updatedMenuList.map((item) => ({
-				...item,
-				onClick: onMenuItemSelectHandler,
-			})),
+			items: updatedMenuList,
+			onClick: onMenuItemSelectHandler,
 		}),
 		[updatedMenuList, onMenuItemSelectHandler],
 	);
@@ -314,12 +321,7 @@ function WidgetHeader({
 							/>
 						)}
 						{menu && Array.isArray(menu.items) && menu.items.length > 0 && (
-							<DropdownMenuSimple
-								menu={menu}
-								side="bottom"
-								align="end"
-								className="widget-header-dropdown"
-							>
+							<Dropdown menu={menu} trigger={['hover']} placement="bottomRight">
 								<Button
 									data-testid="widget-header-options"
 									className={`widget-header-more-options ${
@@ -327,7 +329,7 @@ function WidgetHeader({
 									}`}
 									icon={<EllipsisVertical size="md" />}
 								/>
-							</DropdownMenuSimple>
+							</Dropdown>
 						)}
 					</div>
 				</>

frontend/src/container/GridCardLayout/WidgetHeader/types.ts

@@ -6,7 +6,6 @@ export interface MenuItem {
 	key: MenuItemKeys;
 	icon: ReactNode;
 	label: ReactNode;
-	rightIcon?: ReactNode;
 	isVisible: boolean;
 	disabled: boolean;
 	danger?: boolean;

frontend/src/container/GridCardLayout/WidgetHeader/utils.ts

@@ -1,9 +1,9 @@
-import type { MenuItem as DropdownMenuItem } from '@signozhq/ui/dropdown-menu';
+import type { MenuItemType } from 'antd/es/menu/hooks/useItems';
 
 import { MenuItemKeys } from './contants';
 import { MenuItem } from './types';
 
-export const generateMenuList = (actions: MenuItem[]): DropdownMenuItem[] =>
+export const generateMenuList = (actions: MenuItem[]): MenuItemType[] =>
 	actions
 		.filter((action: MenuItem) => action.isVisible)
 		.map(({ key, icon: Icon, label, disabled, ...rest }) => ({

frontend/src/container/Home/StepsProgress/StepsProgress.styles.scss

@@ -39,7 +39,5 @@
 
 	width: 100% !important;
 
-	.ant-progress-steps-outer {
-		width: 100% !important;
-	}
+	--progress-width: 100%;
 }

frontend/src/container/Home/StepsProgress/StepsProgress.tsx

@@ -1,4 +1,4 @@
-import { Progress } from 'antd';
+import { Progress } from '@signozhq/ui/progress';
 
 import { ChecklistItem } from '../HomeChecklist/HomeChecklist';
 
@@ -15,9 +15,7 @@ function StepsProgress({
 
 	const totalChecklistItems = checklistItems.length;
 
-	const progress = Math.round(
-		(completedChecklistItems.length / totalChecklistItems) * 100,
-	);
+	const progress = (completedChecklistItems.length / totalChecklistItems) * 100;
 
 	return (
 		<div className="steps-progress-container">

frontend/src/container/InfraMonitoringHosts/constants.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { Progress, Tag } from 'antd';
+import { Tag } from 'antd';
+import { Progress } from '@signozhq/ui/progress';
 import { Typography } from '@signozhq/ui/typography';
 import {
 	getHostLists,
@@ -79,8 +80,8 @@ export const hostDetailsMetadataConfig: K8sDetailsMetadataConfig<HostData>[] = [
 		render: (value): React.ReactNode => (
 			<Progress
 				percent={Number(Number(value).toFixed(1))}
-				size="small"
 				strokeColor={getProgressColor(Number(value))}
+				showInfo
 			/>
 		),
 	},
@@ -90,8 +91,8 @@ export const hostDetailsMetadataConfig: K8sDetailsMetadataConfig<HostData>[] = [
 		render: (value): React.ReactNode => (
 			<Progress
 				percent={Number(Number(value).toFixed(1))}
-				size="small"
 				strokeColor={getMemoryProgressColor(Number(value))}
+				showInfo
 			/>
 		),
 	},

frontend/src/container/InfraMonitoringHosts/table.module.scss

@@ -60,11 +60,6 @@
 	& > div {
 		width: 100%;
 	}
-
-	:global(.ant-progress-bg) {
-		height: 8px !important;
-		border-radius: 4px;
-	}
 }
 
 .progressBar {

frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/entityDetails.styles.scss

@@ -103,12 +103,8 @@
 			.progress-container {
 				width: 158px;
 
-				.ant-progress {
-					margin: 0;
-
-					.ant-progress-text {
-						font-weight: 600;
-					}
+				span {
+					font-weight: 600;
 				}
 			}
 
@@ -292,10 +288,6 @@
 			}
 
 			.progress-container {
-				.ant-progress-bg {
-					height: 8px !important;
-					border-radius: 4px;
-				}
 			}
 
 			.ant-table-tbody > tr:hover > td {

frontend/src/container/InfraMonitoringK8s/components/EntityProgressBar.tsx

@@ -1,4 +1,4 @@
-import { Progress } from 'antd';
+import { Progress } from '@signozhq/ui/progress';
 import TanStackTable from 'components/TanStackTableView';
 import {
 	getMemoryProgressColor,
@@ -53,7 +53,6 @@ export function EntityProgressBar({
 			<Progress
 				percent={percentage}
 				strokeLinecap="butt"
-				size="small"
 				status="normal"
 				strokeColor={getStrokeColor(type, value)}
 				className={styles.progressBar}

frontend/src/container/IngestionSettings/MultiIngestionSettings.tsx

@@ -5,12 +5,12 @@ import { useCopyToClipboard } from 'react-use';
 import { Color } from '@signozhq/design-tokens';
 import { Badge } from '@signozhq/ui/badge';
 import { Button } from '@signozhq/ui/button';
+import { Input } from '@signozhq/ui/input';
 import {
 	Col,
 	Collapse,
 	DatePicker,
 	Form,
-	Input,
 	InputNumber,
 	Modal,
 	Row,

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/RegionForm/RenderConnectionParams.tsx

@@ -1,4 +1,5 @@
-import { Form, Input } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Form } from 'antd';
 import { CloudintegrationtypesCredentialsDTO } from 'api/generated/services/sigNoz.schemas';
 
 function RenderConnectionFields({

frontend/src/container/Licenses/ApplyLicenseForm.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Button, Form, Input } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button, Form } from 'antd';
 import apply from 'api/v3/licenses/post';
 import { useNotifications } from 'hooks/useNotifications';
 import APIError from 'types/api/error';

frontend/src/container/ListAlertRules/ListAlert.tsx

@@ -3,8 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { UseQueryResult } from 'react-query';
 import { Button, Flex, Input } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
-import { Ellipsis, Plus } from '@signozhq/icons';
-import { DropdownMenuSimple } from '@signozhq/ui/dropdown-menu';
+import { Plus } from '@signozhq/icons';
 import type { ColumnsType } from 'antd/es/table/interface';
 import logEvent from 'api/common/logEvent';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
@@ -16,6 +15,7 @@ import type {
 } from 'api/generated/services/sigNoz.schemas';
 import type { ErrorType } from 'api/generatedAPIInstance';
 import { AxiosError } from 'axios';
+import DropDown from 'components/DropDown/DropDown';
 import {
 	DynamicColumnsKey,
 	TableDataSource,
@@ -323,67 +323,55 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 			dataIndex: 'id',
 			key: 'action',
 			width: 10,
-			render: (id: RuletypesRuleDTO['id'], record): JSX.Element => {
-				const actionItems = [
-					<ToggleAlertState
-						key="1"
-						disabled={record.disabled ?? false}
-						setData={setData}
-						id={id ?? ''}
-					/>,
-					<ColumnButton
-						key="2"
-						onClick={(e: React.MouseEvent): void =>
-							onEditHandler(record, { newTab: isModifierKeyPressed(e) })
+			render: (id: RuletypesRuleDTO['id'], record): JSX.Element => (
+				<div data-testid="alert-actions">
+					<DropDown
+						onDropDownItemClick={(item): void =>
+							alertActionLogEvent(item.key, record)
 						}
-						type="link"
-						loading={editLoader}
-					>
-						Edit
-					</ColumnButton>,
-					<ColumnButton
-						key="3-new-tab"
-						onClick={(): void => onEditHandler(record, { newTab: true })}
-						type="link"
-						loading={editLoader}
-					>
-						Edit in New Tab
-					</ColumnButton>,
-					<ColumnButton
-						key="3-clone"
-						onClick={onCloneHandler(record)}
-						type="link"
-						loading={cloneLoader}
-					>
-						Clone
-					</ColumnButton>,
-					<DeleteAlert
-						key="4"
-						notifications={notificationsApi}
-						setData={setData}
-						id={id ?? ''}
-					/>,
-				];
-				return (
-					<div data-testid="alert-actions">
-						<DropdownMenuSimple
-							menu={{
-								items: actionItems.map((element, index) => ({
-									key: String(index),
-									label: element,
-									onClick: ({ key }): void => alertActionLogEvent(key, record),
-								})),
-							}}
-						>
-							<Button
+						element={[
+							<ToggleAlertState
+								key="1"
+								disabled={record.disabled ?? false}
+								setData={setData}
+								id={id ?? ''}
+							/>,
+							<ColumnButton
+								key="2"
+								onClick={(e: React.MouseEvent): void =>
+									onEditHandler(record, { newTab: isModifierKeyPressed(e) })
+								}
 								type="link"
-								style={{ color: 'var(--l1-foreground)' }}
-								icon={<Ellipsis size={16} />}
-							/>
-						</DropdownMenuSimple>
-					</div>
-				);
-			},
+								loading={editLoader}
+							>
+								Edit
+							</ColumnButton>,
+							<ColumnButton
+								key="3"
+								onClick={(): void => onEditHandler(record, { newTab: true })}
+								type="link"
+								loading={editLoader}
+							>
+								Edit in New Tab
+							</ColumnButton>,
+							<ColumnButton
+								key="3"
+								onClick={onCloneHandler(record)}
+								type="link"
+								loading={cloneLoader}
+							>
+								Clone
+							</ColumnButton>,
+							<DeleteAlert
+								key="4"
+								notifications={notificationsApi}
+								setData={setData}
+								id={id ?? ''}
+							/>,
+						]}
+					/>
+				</div>
+			),
 		});
 	}
 

frontend/src/container/ListOfDashboard/DashboardTemplates/DashboardTemplatesModal.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
 import { ChangeEvent, useState } from 'react';
-import { Button, Input, Modal } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button, Modal } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import ApacheIcon from 'assets/CustomIcons/ApacheIcon';
 import DockerIcon from 'assets/CustomIcons/DockerIcon';

frontend/src/container/ListOfDashboard/DashboardsList.tsx

@@ -12,11 +12,12 @@ import { useTranslation } from 'react-i18next';
 import { generatePath } from 'react-router-dom';
 import { useCopyToClipboard } from 'react-use';
 import { Color } from '@signozhq/design-tokens';
-import { DropdownMenuSimple, type MenuItem } from '@signozhq/ui/dropdown-menu';
+import { Input } from '@signozhq/ui/input';
 import {
 	Button,
+	Dropdown,
 	Flex,
-	Input,
+	MenuProps,
 	Modal,
 	Popover,
 	Skeleton,
@@ -552,7 +553,7 @@ function DashboardsList(): JSX.Element {
 	];
 
 	const getCreateDashboardItems = useMemo(() => {
-		const menuItems: MenuItem[] = [
+		const menuItems: MenuProps['items'] = [
 			{
 				label: (
 					<div
@@ -710,11 +711,11 @@ function DashboardsList(): JSX.Element {
 
 						{createNewDashboard && (
 							<section className="actions">
-								<DropdownMenuSimple
-									className="new-dashboard-menu"
+								<Dropdown
+									overlayClassName="new-dashboard-menu"
 									menu={{ items: getCreateDashboardItems }}
-									side="bottom"
-									align="end"
+									placement="bottomRight"
+									trigger={['click']}
 								>
 									<Button
 										type="text"
@@ -726,7 +727,7 @@ function DashboardsList(): JSX.Element {
 									>
 										New Dashboard
 									</Button>
-								</DropdownMenuSimple>
+								</Dropdown>
 								<Button
 									type="text"
 									className="learn-more"
@@ -755,11 +756,11 @@ function DashboardsList(): JSX.Element {
 								onChange={handleSearch}
 							/>
 							{createNewDashboard && (
-								<DropdownMenuSimple
-									className="new-dashboard-menu"
+								<Dropdown
+									overlayClassName="new-dashboard-menu"
 									menu={{ items: getCreateDashboardItems }}
-									side="bottom"
-									align="end"
+									placement="bottomRight"
+									trigger={['click']}
 								>
 									<Button
 										type="primary"
@@ -772,7 +773,7 @@ function DashboardsList(): JSX.Element {
 									>
 										New dashboard
 									</Button>
-								</DropdownMenuSimple>
+								</Dropdown>
 							)}
 						</div>
 

frontend/src/container/ListOfDashboard/RequestDashboardBtn.tsx

@@ -1,7 +1,8 @@
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { LoaderCircle, Check } from '@signozhq/icons';
-import { Button, Input, Space } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button, Space } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import { useNotifications } from 'hooks/useNotifications';

frontend/src/container/LogDetailedView/BodyTitleRenderer.tsx

@@ -2,13 +2,7 @@ import { useCallback } from 'react';
 import { useCopyToClipboard } from 'react-use';
 import { orange } from '@ant-design/colors';
 import { Settings } from '@signozhq/icons';
-import {
-	type BaseMenuItem,
-	DropdownMenu,
-	DropdownMenuContent,
-	DropdownMenuItem,
-	DropdownMenuTrigger,
-} from '@signozhq/ui/dropdown-menu';
+import { Dropdown, MenuProps } from 'antd';
 import {
 	negateOperator,
 	OPERATORS,
@@ -141,38 +135,41 @@ function BodyTitleRenderer({
 		viewName,
 	]);
 
-	const onClickHandler = (key: string): void => {
+	const onClickHandler: MenuProps['onClick'] = (props): void => {
 		const mapper = {
 			[DROPDOWN_KEY.FILTER_IN]: filterHandler(true),
 			[DROPDOWN_KEY.FILTER_OUT]: filterHandler(false),
 			[DROPDOWN_KEY.GROUP_BY]: groupByHandler,
 		};
 
-		const handler = mapper[key];
+		const handler = mapper[props.key];
 
 		if (handler) {
 			handler();
 		}
 	};
 
-	const menuItems: BaseMenuItem[] = [
-		{
-			key: DROPDOWN_KEY.FILTER_IN,
-			label: `Filter for ${value}`,
-		},
-		{
-			key: DROPDOWN_KEY.FILTER_OUT,
-			label: `Filter out ${value}`,
-		},
-		...(isGroupBySupported
-			? [
-					{
-						key: DROPDOWN_KEY.GROUP_BY,
-						label: `Group by ${nodeKey}`,
-					},
-				]
-			: []),
-	];
+	const menu: MenuProps = {
+		items: [
+			{
+				key: DROPDOWN_KEY.FILTER_IN,
+				label: `Filter for ${value}`,
+			},
+			{
+				key: DROPDOWN_KEY.FILTER_OUT,
+				label: `Filter out ${value}`,
+			},
+			...(isGroupBySupported
+				? [
+						{
+							key: DROPDOWN_KEY.GROUP_BY,
+							label: `Group by ${nodeKey}`,
+						},
+					]
+				: []),
+		],
+		onClick: onClickHandler,
+	};
 
 	const handleNodeClick = useCallback(
 		(e: React.MouseEvent): void => {
@@ -221,23 +218,15 @@ function BodyTitleRenderer({
 					}}
 					onMouseDown={(e): void => e.preventDefault()}
 				>
-					<DropdownMenu>
-						<DropdownMenuTrigger asChild>
-							<Settings style={{ marginRight: 8 }} className="hover-reveal" />
-						</DropdownMenuTrigger>
-						<DropdownMenuContent>
-							<div data-log-detail-ignore="true">
-								{menuItems.map((item) => (
-									<DropdownMenuItem
-										key={item.key}
-										onSelect={(): void => onClickHandler(item.key as string)}
-									>
-										{item.label}
-									</DropdownMenuItem>
-								))}
-							</div>
-						</DropdownMenuContent>
-					</DropdownMenu>
+					<Dropdown
+						menu={menu}
+						trigger={['click']}
+						dropdownRender={(originNode): React.ReactNode => (
+							<div data-log-detail-ignore="true">{originNode}</div>
+						)}
+					>
+						<Settings style={{ marginRight: 8 }} className="hover-reveal" />
+					</Dropdown>
 				</span>
 			)}
 			{title.toString()}{' '}

frontend/src/container/LogDetailedView/Overview.tsx

@@ -2,8 +2,9 @@ import { ReactNode, useState } from 'react';
 import MEditor, { EditorProps, Monaco } from '@monaco-editor/react';
 import { Color } from '@signozhq/design-tokens';
 import { Button } from '@signozhq/ui/button';
+import { Input } from '@signozhq/ui/input';
 import { Switch } from '@signozhq/ui/switch';
-import { Collapse, Divider, Input, Tag } from 'antd';
+import { Collapse, Divider, Tag } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { AddToQueryHOCProps } from 'components/Logs/AddToQueryHOC';
 import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';

frontend/src/container/LogsFilters/index.tsx

@@ -2,7 +2,8 @@ import { ChangeEvent, useCallback, useState } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
 import { CirclePlus, X } from '@signozhq/icons';
-import { Col, Input } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Col } from 'antd';
 import CategoryHeading from 'components/Logs/CategoryHeading';
 import { fieldSearchFilter } from 'lib/logs/fieldSearch';
 import { AppState } from 'store/reducers';

frontend/src/container/LogsSearchFilter/SearchFields/QueryBuilder/QueryBuilder.tsx

@@ -2,7 +2,8 @@ import { useCallback, useMemo, useState } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
 import { SquareX, X } from '@signozhq/icons';
-import { Button, Input, Select } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button, Select } from 'antd';
 import CategoryHeading from 'components/Logs/CategoryHeading';
 import {
 	ConditionalOperators,

frontend/src/container/MembersSettings/MembersSettings.tsx

@@ -2,8 +2,9 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import { Check, ChevronDown, Plus } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
-import { DropdownMenuSimple, type MenuItem } from '@signozhq/ui/dropdown-menu';
 import { Input } from '@signozhq/ui/input';
+import type { MenuProps } from 'antd';
+import { Dropdown } from 'antd';
 import { useListUsers } from 'api/generated/services/users';
 import EditMemberDrawer from 'components/EditMemberDrawer/EditMemberDrawer';
 import InviteMembersModal from 'components/InviteMembersModal/InviteMembersModal';
@@ -94,7 +95,7 @@ function MembersSettings(): JSX.Element {
 	).length;
 	const totalCount = allMembers.length;
 
-	const filterMenuItems: MenuItem[] = [
+	const filterMenuItems: MenuProps['items'] = [
 		{
 			key: FilterMode.All,
 			label: (
@@ -170,9 +171,10 @@ function MembersSettings(): JSX.Element {
 				</div>
 
 				<div className="members-settings__controls">
-					<DropdownMenuSimple
+					<Dropdown
 						menu={{ items: filterMenuItems }}
-						className="members-filter-dropdown"
+						trigger={['click']}
+						overlayClassName="members-filter-dropdown"
 					>
 						<Button
 							variant="solid"
@@ -182,7 +184,7 @@ function MembersSettings(): JSX.Element {
 							<span>{filterLabel}</span>
 							<ChevronDown size={12} className="members-filter-trigger__chevron" />
 						</Button>
-					</DropdownMenuSimple>
+					</Dropdown>
 
 					<div className="members-settings__search">
 						<Input

frontend/src/container/MembersSettings/__tests__/MembersSettings.integration.test.tsx

@@ -1,5 +1,4 @@
 import type { TypesUserDTO } from 'api/generated/services/sigNoz.schemas';
-import userEvent from '@testing-library/user-event';
 import { rest, server } from 'mocks-server/server';
 import { fireEvent, render, screen } from 'tests/test-utils';
 
@@ -77,15 +76,14 @@ describe('MembersSettings (integration)', () => {
 	});
 
 	it('filters to pending invites via the filter dropdown', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		render(<MembersSettings />);
 
 		await screen.findByText('Alice Smith');
 
-		await user.click(screen.getByRole('button', { name: /all members/i }));
+		fireEvent.click(screen.getByRole('button', { name: /all members/i }));
 
 		const pendingOption = await screen.findByText(/pending invites/i);
-		await user.click(pendingOption);
+		fireEvent.click(pendingOption);
 
 		await screen.findByText('charlie@signoz.io');
 		expect(screen.queryByText('Alice Smith')).not.toBeInTheDocument();

frontend/src/container/MetricsExplorer/Inspect/MetricTimeAggregation.tsx

@@ -1,6 +1,7 @@
-import { Input } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
-import { Select } from 'antd';
+// TODO(@signozhq/ui-input): migrate this <Input> once @signozhq/ui Input
+// supports the `onWheel` handler (used to blur on scroll for number inputs).
+import { Input, Select } from 'antd';
 import classNames from 'classnames';
 
 import { TIME_AGGREGATION_OPTIONS } from './constants';

frontend/src/container/MetricsExplorer/MetricDetails/DashboardsAndAlertsPopover.tsx

@@ -1,8 +1,7 @@
 import { useMemo } from 'react';
 import { generatePath } from 'react-router-dom';
 import { Color } from '@signozhq/design-tokens';
-import { DropdownMenuSimple } from '@signozhq/ui/dropdown-menu';
-import { Skeleton } from 'antd';
+import { Dropdown, Skeleton } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import {
 	useGetMetricAlerts,
@@ -127,11 +126,12 @@ function DashboardsAndAlertsPopover({
 	return (
 		<div className="dashboards-and-alerts-popover-container">
 			{dashboardsPopoverContent && (
-				<DropdownMenuSimple
+				<Dropdown
 					menu={{
 						items: dashboardsPopoverContent,
 					}}
-					align="start"
+					placement="bottomLeft"
+					trigger={['click']}
 				>
 					<div
 						className="dashboards-and-alerts-popover dashboards-popover"
@@ -142,14 +142,15 @@ function DashboardsAndAlertsPopover({
 							{pluralize(dashboards.length, 'dashboard')}
 						</Typography.Text>
 					</div>
-				</DropdownMenuSimple>
+				</Dropdown>
 			)}
 			{alertsPopoverContent && (
-				<DropdownMenuSimple
+				<Dropdown
 					menu={{
 						items: alertsPopoverContent,
 					}}
-					align="start"
+					placement="bottomLeft"
+					trigger={['click']}
 				>
 					<div
 						className="dashboards-and-alerts-popover alerts-popover"
@@ -160,7 +161,7 @@ function DashboardsAndAlertsPopover({
 							{pluralize(alerts.length, 'alert rule')}
 						</Typography.Text>
 					</div>
-				</DropdownMenuSimple>
+				</Dropdown>
 			)}
 		</div>
 	);

frontend/src/container/MetricsExplorer/MetricDetails/Metadata.tsx

@@ -1,7 +1,8 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useQueryClient } from 'react-query';
 import type { TableColumnsType as ColumnsType } from 'antd';
-import { Button, Collapse, Input, Select, Spin } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button, Collapse, Select, Spin } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import {

frontend/src/container/MetricsExplorer/Summary/Summary.styles.scss

@@ -142,13 +142,6 @@
 				}
 			}
 
-			.progress-container {
-				.ant-progress-bg {
-					height: 8px !important;
-					border-radius: 4px;
-				}
-			}
-
 			.ant-table-tbody > tr:hover > td {
 				background: color-mix(in srgb, var(--l1-foreground) 4%, transparent);
 			}

frontend/src/container/NewWidget/LeftContainer/ExplorerColumnsRenderer.tsx

@@ -7,12 +7,8 @@ import {
 	DropResult,
 } from 'react-beautiful-dnd';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Divider, Input, Tooltip } from 'antd';
-import {
-	DropdownMenu,
-	DropdownMenuContent,
-	DropdownMenuTrigger,
-} from '@signozhq/ui/dropdown-menu';
+import { Input } from '@signozhq/ui/input';
+import { Button, Divider, Dropdown, MenuProps, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { FieldDataType } from 'api/v5/v5';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
@@ -164,12 +160,34 @@ function ExplorerColumnsRenderer({
 		debouncedSetQuerySearchText(e.target.value);
 	};
 
-	const handleOpenChange = (nextOpen: boolean): void => {
-		setOpen(nextOpen);
-		if (nextOpen) {
-			setSearchText('');
-		}
-	};
+	const items: MenuProps['items'] = [
+		{
+			key: 'search',
+			label: (
+				<Input
+					type="text"
+					placeholder="Search"
+					className="explorer-columns-search"
+					value={searchText}
+					onChange={handleSearchChange}
+					prefix={<Search size={16} style={{ padding: '6px' }} />}
+				/>
+			),
+		},
+		{
+			key: 'columns',
+			label: (
+				<ExplorerAttributeColumns
+					isLoading={isLoading}
+					data={data}
+					searchText={searchText}
+					isAttributeKeySelected={isAttributeKeySelected}
+					handleCheckboxChange={handleCheckboxChange}
+					dataSource={initialDataSource}
+				/>
+			),
+		},
+	];
 
 	const removeSelectedLogField = (name: string): void => {
 		if (
@@ -221,6 +239,13 @@ function ExplorerColumnsRenderer({
 		}
 	};
 
+	const toggleDropdown = (): void => {
+		setOpen(!open);
+		if (!open) {
+			setSearchText('');
+		}
+	};
+
 	const isDarkMode = useIsDarkMode();
 
 	return (
@@ -303,38 +328,25 @@ function ExplorerColumnsRenderer({
 						</Droppable>
 					</DragDropContext>
 					<div>
-						<DropdownMenu open={open} onOpenChange={handleOpenChange}>
-							<DropdownMenuTrigger asChild>
-								<Button
-									className="action-btn"
-									data-testid="add-columns-button"
-									icon={
-										<CirclePlus
-											size={16}
-											color={isDarkMode ? Color.BG_INK_400 : Color.BG_VANILLA_100}
-										/>
-									}
-								/>
-							</DropdownMenuTrigger>
-							<DropdownMenuContent side="top" className="explorer-columns-dropdown">
-								<Input
-									type="text"
-									placeholder="Search"
-									className="explorer-columns-search"
-									value={searchText}
-									onChange={handleSearchChange}
-									prefix={<Search size={16} style={{ padding: '6px' }} />}
-								/>
-								<ExplorerAttributeColumns
-									isLoading={isLoading}
-									data={data}
-									searchText={searchText}
-									isAttributeKeySelected={isAttributeKeySelected}
-									handleCheckboxChange={handleCheckboxChange}
-									dataSource={initialDataSource}
-								/>
-							</DropdownMenuContent>
-						</DropdownMenu>
+						<Dropdown
+							menu={{ items }}
+							arrow
+							placement="top"
+							open={open}
+							overlayClassName="explorer-columns-dropdown"
+						>
+							<Button
+								className="action-btn"
+								data-testid="add-columns-button"
+								icon={
+									<CirclePlus
+										size={16}
+										color={isDarkMode ? Color.BG_INK_400 : Color.BG_VANILLA_100}
+									/>
+								}
+								onClick={toggleDropdown}
+							/>
+						</Dropdown>
 					</div>
 				</div>
 			)}

frontend/src/container/NewWidget/LeftContainer/__test__/ExplorerColumnsRenderer.test.tsx

@@ -146,7 +146,6 @@ describe('ExplorerColumnsRenderer', () => {
 	});
 
 	it('opens and closes the dropdown', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		render(
 			<Wrapper>
 				<ExplorerColumnsRenderer
@@ -159,12 +158,12 @@ describe('ExplorerColumnsRenderer', () => {
 		);
 
 		const addButton = screen.getByTestId('add-columns-button');
-		await user.click(addButton);
+		await userEvent.click(addButton);
 
 		expect(screen.getByPlaceholderText('Search')).toBeInTheDocument();
 		expect(screen.getByText('attribute1')).toBeInTheDocument();
 
-		await user.click(addButton);
+		await userEvent.click(addButton);
 		await waitFor(() => {
 			expect(screen.queryByRole('menu')).not.toBeInTheDocument();
 		});

frontend/src/container/NewWidget/RightContainer/ContextLinks/UpdateContextLinks.tsx

@@ -1,5 +1,7 @@
 import { useEffect, useMemo, useState } from 'react';
-import { Button, Col, Form, Input as AntInput, Input, Row } from 'antd';
+// TODO(@signozhq/ui-input): migrate <Input> once @signozhq/ui Input
+// supports the `spellCheck` prop on the URL input below.
+import { Button, Col, Form, Input, Input as AntInput, Row } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { CONTEXT_LINK_FIELDS } from 'container/NewWidget/RightContainer/ContextLinks/constants';
 import {
@@ -13,7 +15,7 @@ import { Plus, Trash2 } from '@signozhq/icons';
 import { ContextLinkProps, Widgets } from 'types/api/dashboard/getAll';
 import { getBaseUrl } from 'utils/basePath';
 
-import VariablesPopover from './VariablesPopover';
+import VariablesDropdown from './VariablesDropdown';
 
 import './UpdateContextLinks.styles.scss';
 
@@ -71,7 +73,7 @@ function UpdateContextLinks({
 		customVariables: fieldVariables,
 	});
 
-	// Transform variables into the format expected by VariablesPopover
+	// Transform variables into the format expected by VariablesDropdown
 	const transformedVariables = useMemo(
 		() => transformContextVariables(variables),
 		[variables],
@@ -224,9 +226,7 @@ function UpdateContextLinks({
 							},
 						]}
 					>
-						{/* TODO: replace with AutoComplete with options for variables and
-						previously used URLs for better UX */}
-						<VariablesPopover
+						<VariablesDropdown
 							onVariableSelect={handleVariableSelect}
 							variables={transformedVariables}
 						>
@@ -254,7 +254,7 @@ function UpdateContextLinks({
 									/>
 								</div>
 							)}
-						</VariablesPopover>
+						</VariablesDropdown>
 					</Form.Item>
 
 					{/* Remove the separate variables section */}
@@ -284,7 +284,7 @@ function UpdateContextLinks({
 										/>
 									</Col>
 									<Col span={16}>
-										<VariablesPopover
+										<VariablesDropdown
 											onVariableSelect={(variableName, cursorPosition): void =>
 												handleParamVariableSelect(index, variableName, cursorPosition)
 											}
@@ -313,7 +313,7 @@ function UpdateContextLinks({
 													}
 												/>
 											)}
-										</VariablesPopover>
+										</VariablesDropdown>
 									</Col>
 									<Col span={2}>
 										<Button

frontend/src/container/NewWidget/RightContainer/ContextLinks/VariablesDropdown.styles.scss

@@ -0,0 +1,26 @@
+.variables-dropdown-container {
+	.url-input-trigger {
+		width: 100%;
+
+		.url-input-field {
+			width: 100%;
+		}
+	}
+
+	// Override Ant Design dropdown styles
+	.ant-dropdown-menu {
+		max-height: 300px;
+		overflow-y: auto;
+		padding: 8px 0;
+	}
+}
+
+.variable-row {
+	display: flex;
+	justify-content: space-between;
+
+	.variable-source {
+		color: #666;
+		font-size: 12px;
+	}
+}

frontend/src/container/NewWidget/RightContainer/ContextLinks/VariablesDropdown.tsx

@@ -0,0 +1,93 @@
+import { ReactNode, useEffect, useMemo, useRef, useState } from 'react';
+import { Dropdown } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
+
+import './VariablesDropdown.styles.scss';
+
+interface VariablesDropdownProps {
+	onVariableSelect: (variableName: string, cursorPosition?: number) => void;
+	variables: VariableItem[];
+	children: (props: {
+		onVariableSelect: (variableName: string, cursorPosition?: number) => void;
+		isOpen: boolean;
+		setIsOpen: (open: boolean) => void;
+		cursorPosition: number | null;
+		setCursorPosition: (position: number | null) => void;
+	}) => ReactNode;
+}
+
+interface VariableItem {
+	name: string;
+	source: string;
+}
+
+function VariablesDropdown({
+	onVariableSelect,
+	variables,
+	children,
+}: VariablesDropdownProps): JSX.Element {
+	const [isOpen, setIsOpen] = useState(false);
+	const [cursorPosition, setCursorPosition] = useState<number | null>(null);
+	const wrapperRef = useRef<HTMLDivElement>(null);
+
+	// Click outside handler
+	useEffect(() => {
+		function handleClickOutside(event: MouseEvent): void {
+			if (
+				wrapperRef.current &&
+				!wrapperRef.current.contains(event.target as Node)
+			) {
+				setIsOpen(false);
+			}
+		}
+		if (isOpen) {
+			document.addEventListener('mousedown', handleClickOutside);
+		}
+		return (): void => {
+			document.removeEventListener('mousedown', handleClickOutside);
+		};
+	}, [isOpen]);
+
+	const dropdownItems = useMemo(
+		() =>
+			variables.map((v) => ({
+				key: v.name,
+				label: (
+					<div className="variable-row">
+						<Typography.Text className="variable-name">{`{{${v.name}}}`}</Typography.Text>
+						<Typography.Text className="variable-source">{v.source}</Typography.Text>
+					</div>
+				),
+			})),
+		[variables],
+	);
+
+	return (
+		<div className="variables-dropdown-container" ref={wrapperRef}>
+			<Dropdown
+				menu={{
+					items: dropdownItems,
+					onClick: ({ key }): void => {
+						const variableName = key as string;
+						onVariableSelect(`{{${variableName}}}`, cursorPosition || undefined);
+						setIsOpen(false);
+					},
+				}}
+				open={isOpen}
+				placement="bottomLeft"
+				trigger={['click']}
+				getPopupContainer={(): HTMLElement => wrapperRef.current || document.body}
+			>
+				{children({
+					onVariableSelect,
+					isOpen,
+					setIsOpen,
+					cursorPosition,
+					setCursorPosition,
+				})}
+			</Dropdown>
+		</div>
+	);
+}
+
+export default VariablesDropdown;

frontend/src/container/NewWidget/RightContainer/ContextLinks/VariablesPopover.styles.scss

@@ -1,74 +0,0 @@
-.variables-popover-container {
-	.url-input-trigger {
-		width: 100%;
-
-		.url-input-field {
-			width: 100%;
-		}
-	}
-
-	.variables-popover-anchor-wrap {
-		width: 100%;
-	}
-}
-
-.variables-popover-content {
-	// antd Modal uses z-index ~1000; popover must sit above it.
-	z-index: 1100;
-	padding: 4px 0;
-	max-height: 300px;
-	overflow-y: auto;
-	overflow-x: hidden;
-	min-width: var(--radix-popover-trigger-width);
-}
-
-.variables-popover-empty {
-	padding: 8px 12px;
-	color: var(--l3-foreground, #999);
-	font-size: 12px;
-	font-style: italic;
-}
-
-.variables-popover-item {
-	all: unset;
-	display: block;
-	box-sizing: border-box;
-	width: 100%;
-	padding: 8px 12px;
-	cursor: pointer;
-	color: var(--l1-foreground);
-	font-size: 13px;
-	line-height: 1.4;
-	overflow: hidden;
-
-	&:hover,
-	&:focus {
-		background-color: var(--l1-background-hover);
-	}
-}
-
-.variable-row {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: 8px;
-	min-width: 0;
-
-	.variable-name,
-	.variable-source {
-		min-width: 0;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-	}
-
-	.variable-name {
-		flex: 1 1 auto;
-	}
-
-	.variable-source {
-		color: #666;
-		font-size: 12px;
-		flex: 0 1 auto;
-	}
-}

frontend/src/container/NewWidget/RightContainer/ContextLinks/VariablesPopover.tsx

@@ -1,111 +0,0 @@
-// Uses Popover (not DropdownMenu like the rest of the antd-dropdown migration):
-// DropdownMenuTrigger preventDefaults pointerdown, breaking input focus and
-// dismissing on every keystroke. PopoverAnchor is a passive positioning element.
-import { ReactNode, useRef, useState } from 'react';
-import { Popover, PopoverAnchor, PopoverContent } from '@signozhq/ui/popover';
-import { Typography } from '@signozhq/ui/typography';
-
-import './VariablesPopover.styles.scss';
-
-interface VariablesPopoverProps {
-	onVariableSelect: (variableName: string, cursorPosition?: number) => void;
-	variables: VariableItem[];
-	children: (props: {
-		onVariableSelect: (variableName: string, cursorPosition?: number) => void;
-		isOpen: boolean;
-		setIsOpen: (open: boolean) => void;
-		cursorPosition: number | null;
-		setCursorPosition: (position: number | null) => void;
-	}) => ReactNode;
-}
-
-interface VariableItem {
-	name: string;
-	source: string;
-}
-
-function VariablesPopover({
-	onVariableSelect,
-	variables,
-	children,
-}: VariablesPopoverProps): JSX.Element {
-	const [isOpen, setIsOpen] = useState(false);
-	const [cursorPosition, setCursorPosition] = useState<number | null>(null);
-	const anchorRef = useRef<HTMLDivElement>(null);
-
-	const handleOpenChange = (open: boolean): void => {
-		// Accept "close" events from the popover (outside-click, Esc) but ignore
-		// opens — opening is driven by the input's onFocus in the consumer.
-		if (!open) {
-			setIsOpen(false);
-		}
-	};
-
-	return (
-		<div className="variables-popover-container">
-			<Popover open={isOpen} onOpenChange={handleOpenChange} modal={false}>
-				<PopoverAnchor asChild>
-					<div className="variables-popover-anchor-wrap" ref={anchorRef}>
-						{children({
-							onVariableSelect,
-							isOpen,
-							setIsOpen,
-							cursorPosition,
-							setCursorPosition,
-						})}
-					</div>
-				</PopoverAnchor>
-				<PopoverContent
-					align="start"
-					sideOffset={4}
-					className="variables-popover-content"
-					onOpenAutoFocus={(e): void => e.preventDefault()}
-					onCloseAutoFocus={(e): void => e.preventDefault()}
-					onInteractOutside={(e): void => {
-						// Keep the popover open while interacting with the anchor (the input),
-						// otherwise typing/clicking the input would close it immediately.
-						const target = e.target as Node | null;
-						if (target && anchorRef.current?.contains(target)) {
-							e.preventDefault();
-						}
-					}}
-					onFocusOutside={(e): void => {
-						const target = e.target as Node | null;
-						if (target && anchorRef.current?.contains(target)) {
-							e.preventDefault();
-						}
-					}}
-				>
-					{variables.length === 0 ? (
-						<div className="variables-popover-empty">No variables available</div>
-					) : (
-						variables.map((v) => (
-							<button
-								key={v.name}
-								type="button"
-								className="variables-popover-item"
-								onMouseDown={(e): void => {
-									// Prevent the input from losing focus when clicking an item.
-									e.preventDefault();
-								}}
-								onClick={(): void => {
-									onVariableSelect(`{{${v.name}}}`, cursorPosition || undefined);
-									setIsOpen(false);
-								}}
-							>
-								<div className="variable-row">
-									<Typography.Text className="variable-name">{`{{${v.name}}}`}</Typography.Text>
-									<Typography.Text className="variable-source">
-										{v.source}
-									</Typography.Text>
-								</div>
-							</button>
-						))
-					)}
-				</PopoverContent>
-			</Popover>
-		</div>
-	);
-}
-
-export default VariablesPopover;

frontend/src/container/NewWidget/RightContainer/ContextLinks/utils.tsx

@@ -204,7 +204,7 @@ const processContextLinks = (
 };
 
 /**
- * Transforms context variables into the format expected by VariablesPopover
+ * Transforms context variables into the format expected by VariablesDropdown
  * @param variables - Array of context variables from useContextVariables
  * @returns Array of transformed variables with proper source descriptions
  */

frontend/src/container/NewWidget/RightContainer/Threshold/ColorSelector.tsx

@@ -1,7 +1,6 @@
 import { Dispatch, SetStateAction, useEffect, useState } from 'react';
 import { ChevronDown } from '@signozhq/icons';
-import { DropdownMenuSimple, type MenuItem } from '@signozhq/ui/dropdown-menu';
-import { Button, ColorPicker, Space } from 'antd';
+import { Button, ColorPicker, Dropdown, MenuProps, Space } from 'antd';
 import type { Color } from 'antd/es/color-picker';
 import useDebounce from 'hooks/useDebounce';
 
@@ -27,7 +26,7 @@ function ColorSelector({
 		setColorFromPicker(hex);
 	};
 
-	const items: MenuItem[] = [
+	const items: MenuProps['items'] = [
 		{
 			key: 'Red',
 			label: <CustomColor color="Red" />,
@@ -63,7 +62,7 @@ function ColorSelector({
 	];
 
 	return (
-		<DropdownMenuSimple menu={{ items }}>
+		<Dropdown menu={{ items }} trigger={['click']}>
 			<Button
 				onClick={(e): void => e.preventDefault()}
 				className="color-selector-button"
@@ -73,7 +72,7 @@ function ColorSelector({
 					<ChevronDown size="md" />
 				</Space>
 			</Button>
-		</DropdownMenuSimple>
+		</Dropdown>
 	);
 }
 

frontend/src/container/OnboardingContainer/Steps/DataSource/DataSource.tsx

@@ -1,7 +1,8 @@
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Blocks, Check, LoaderCircle } from '@signozhq/icons';
-import { Button, Card, Form, Input, Select, Space } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button, Card, Form, Select, Space } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import cx from 'classnames';

frontend/src/container/OnboardingContainer/Steps/EnvironmentDetails/EnvironmentDetails.tsx

@@ -1,7 +1,8 @@
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Check, Server, LoaderCircle } from '@signozhq/icons';
-import { Button, Card, Form, Input, Space } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button, Card, Form, Space } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import cx from 'classnames';

frontend/src/container/OrganizationSettings/InviteTeamMembers/index.tsx

@@ -1,6 +1,7 @@
 import { useTranslation } from 'react-i18next';
 import { Plus, Trash2 } from '@signozhq/icons';
-import { Button, Form, FormInstance, Input, Select, Space } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button, Form, FormInstance, Select, Space } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { requireErrorMessage } from 'utils/form/requireErrorMessage';
 

frontend/src/container/PaginatedTraceFlamegraph/PaginatedTraceFlamegraph.styles.scss

@@ -87,12 +87,7 @@
 
 					.service-progress-indicator {
 						width: fit-content;
-						margin-inline-end: 0px !important;
-						margin-bottom: 0px !important;
-
-						.ant-progress-inner {
-							width: 30px;
-						}
+						--progress-width: 30px;
 					}
 
 					.percent-value {

frontend/src/container/PaginatedTraceFlamegraph/PaginatedTraceFlamegraph.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useMemo, useState } from 'react';
 import { useParams } from 'react-router-dom';
-import { Progress, Skeleton, Tooltip } from 'antd';
+import { Skeleton, Tooltip } from 'antd';
+import { Progress } from '@signozhq/ui/progress';
 import { Typography } from '@signozhq/ui/typography';
 import { AxiosError } from 'axios';
 import Spinner from 'components/Spinner';

frontend/src/container/PipelinePage/PipelineListsView/AddNewPipeline/FormFields/NameInput.tsx

@@ -1,6 +1,6 @@
 import { useTranslation } from 'react-i18next';
-import { Form, Input } from 'antd';
-
+import { Input } from '@signozhq/ui/input';
+import { Form } from 'antd';
 import { ProcessorFormField } from '../../AddNewProcessor/config';
 import { formValidationRules } from '../../config';
 

frontend/src/container/PipelinePage/PipelineListsView/AddNewProcessor/FormFields/CSVInput.tsx

@@ -1,4 +1,6 @@
 import { ChangeEventHandler, useState } from 'react';
+// TODO(@signozhq/ui-input): migrate to @signozhq/ui Input once the antd
+// `InputProps` spread (`size`, etc.) is no longer needed on this wrapper.
 import { Input, InputProps } from 'antd';
 
 function CSVInput({ value, onChange, ...otherProps }: InputProps): JSX.Element {

frontend/src/container/PipelinePage/PipelineListsView/AddNewProcessor/FormFields/JsonFlattening.tsx

@@ -1,7 +1,8 @@
 import { useEffect, useState } from 'react';
 import { Info } from '@signozhq/icons';
+import { Input } from '@signozhq/ui/input';
 import { Switch } from '@signozhq/ui/switch';
-import { Flex, Form, Input, Space, Tooltip } from 'antd';
+import { Flex, Form, Space, Tooltip } from 'antd';
 import { ProcessorData } from 'types/api/pipeline/def';
 
 import { PREDEFINED_MAPPING } from '../config';

frontend/src/container/PipelinePage/PipelineListsView/AddNewProcessor/ProcessorForm.tsx

@@ -1,6 +1,7 @@
 import { useTranslation } from 'react-i18next';
-import { Form, Input, Select, Space } from 'antd';
+import { Input } from '@signozhq/ui/input';
 import { Switch } from '@signozhq/ui/switch';
+import { Form, Select, Space } from 'antd';
 import { ModalFooterTitle } from 'container/PipelinePage/styles';
 import { ProcessorData } from 'types/api/pipeline/def';
 

frontend/src/container/PlannedDowntime/PlannedDowntime.tsx

@@ -2,7 +2,8 @@ import React, { ChangeEvent, useEffect, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import { Plus, Search } from '@signozhq/icons';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Flex, Form, Input, Tooltip } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button, Flex, Form, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import {
 	useDeleteDowntimeScheduleByID,

frontend/src/container/QueryTable/Drilldown/BreakoutOptions.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useMemo, useState } from 'react';
 import { useQuery } from 'react-query';
-import { Input, Skeleton } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Skeleton } from 'antd';
 import { getKeySuggestions } from 'api/querySuggestions/getKeySuggestions';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { QUERY_BUILDER_KEY_TYPES } from 'constants/antlrQueryConstants';

frontend/src/container/RoutingPolicies/RoutingPolicies.tsx

@@ -1,7 +1,8 @@
 import { ChangeEvent, useMemo } from 'react';
 import { Plus, Search } from '@signozhq/icons';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Flex, Input, Tooltip } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button, Flex, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { useAppContext } from 'providers/App/App';
 import { USER_ROLES } from 'types/roles';

frontend/src/container/ServiceAccountsSettings/ServiceAccountsSettings.tsx

@@ -1,8 +1,9 @@
 import { useCallback, useEffect, useMemo } from 'react';
 import { Check, ChevronDown, Plus } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
-import { DropdownMenuSimple, type MenuItem } from '@signozhq/ui/dropdown-menu';
 import { Input } from '@signozhq/ui/input';
+import type { MenuProps } from 'antd';
+import { Dropdown } from 'antd';
 import { useListServiceAccounts } from 'api/generated/services/serviceaccount';
 import AuthZTooltip from 'components/AuthZTooltip/AuthZTooltip';
 import CreateServiceAccountModal from 'components/CreateServiceAccountModal/CreateServiceAccountModal';
@@ -133,7 +134,7 @@ function ServiceAccountsSettings(): JSX.Element {
 
 	const totalCount = allAccounts.length;
 
-	const filterMenuItems: MenuItem[] = [
+	const filterMenuItems: MenuProps['items'] = [
 		{
 			key: FilterMode.All,
 			label: (
@@ -230,9 +231,10 @@ function ServiceAccountsSettings(): JSX.Element {
 			) : (
 				<div className="sa-settings__list-section">
 					<div className="sa-settings__controls">
-						<DropdownMenuSimple
+						<Dropdown
 							menu={{ items: filterMenuItems }}
-							className="sa-settings-filter-dropdown"
+							trigger={['click']}
+							overlayClassName="sa-settings-filter-dropdown"
 						>
 							<Button
 								variant="solid"
@@ -245,7 +247,7 @@ function ServiceAccountsSettings(): JSX.Element {
 									className="sa-settings-filter-trigger__chevron"
 								/>
 							</Button>
-						</DropdownMenuSimple>
+						</Dropdown>
 
 						<div className="sa-settings__search">
 							<Input

frontend/src/container/ServiceAccountsSettings/__tests__/ServiceAccountsSettings.authz.integration.test.tsx

@@ -1,5 +1,4 @@
 import type { ReactNode } from 'react';
-import userEvent from '@testing-library/user-event';
 import { listRolesSuccessResponse } from 'mocks-server/__mockdata__/roles';
 import { rest, server } from 'mocks-server/server';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
@@ -130,7 +129,6 @@ describe('ServiceAccountsSettings (integration)', () => {
 	});
 
 	it('filter dropdown to "Active" hides DISABLED accounts', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		render(
 			<NuqsTestingAdapter>
 				<ServiceAccountsSettings />
@@ -139,10 +137,10 @@ describe('ServiceAccountsSettings (integration)', () => {
 
 		await screen.findByText('CI Bot');
 
-		await user.click(screen.getByRole('button', { name: /All accounts/i }));
+		fireEvent.click(screen.getByRole('button', { name: /All accounts/i }));
 
 		const activeOption = await screen.findByText(/Active ⎯/i);
-		await user.click(activeOption);
+		fireEvent.click(activeOption);
 
 		await screen.findByText('CI Bot');
 		expect(screen.queryByText('Legacy Bot')).not.toBeInTheDocument();

frontend/src/container/SideNav/SideNav.styles.scss

@@ -662,7 +662,7 @@
 		}
 	}
 
-	&:not(.pinned).is-hovered,
+	&:not(.pinned):hover,
 	&.dropdown-open {
 		flex: 0 0 240px;
 		max-width: 240px;

frontend/src/container/SideNav/SideNav.tsx

@@ -1,6 +1,5 @@
 import {
 	MouseEvent,
-	ReactNode,
 	useCallback,
 	useEffect,
 	useMemo,
@@ -26,14 +25,7 @@ import {
 	verticalListSortingStrategy,
 } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
-import {
-	DropdownMenu,
-	DropdownMenuContent,
-	DropdownMenuItem,
-	DropdownMenuSeparator,
-	DropdownMenuTrigger,
-} from '@signozhq/ui/dropdown-menu';
-import { Button, MenuProps, Modal, Tooltip } from 'antd';
+import { Button, Dropdown, MenuProps, Modal, Tooltip } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { Logout } from 'api/utils';
 import updateUserPreference from 'api/v1/user/preferences/name/update';
@@ -170,9 +162,7 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 
 	const [hasScroll, setHasScroll] = useState(false);
 	const navTopSectionRef = useRef<HTMLDivElement>(null);
-	const sidenavRef = useRef<HTMLDivElement>(null);
 	const [isDropdownOpen, setIsDropdownOpen] = useState(false);
-	const isDropdownOpenRef = useRef(false);
 
 	const [isHovered, setIsHovered] = useState(false);
 	const [pinnedMenuItems, setPinnedMenuItems] = useState<SidebarItem[]>([]);
@@ -185,27 +175,9 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 	}, []);
 
 	const handleMouseLeave = useCallback(() => {
-		// When the dropdown is open its content renders in a portal outside
-		// the sidenav, which causes the browser to fire mouseleave on the
-		// sidenav. Keep the sidenav expanded in that case.
-		if (isDropdownOpenRef.current) {
-			return;
-		}
 		setIsHovered(false);
 	}, []);
 
-	const handleDropdownOpenChange = useCallback((open: boolean): void => {
-		isDropdownOpenRef.current = open;
-		setIsDropdownOpen(open);
-		if (!open) {
-			// Re-sync hover state on close: the cursor may have moved to the
-			// portal content (outside .sideNav), so mouseleave never fired.
-			requestAnimationFrame(() => {
-				setIsHovered(sidenavRef.current?.matches(':hover') ?? false);
-			});
-		}
-	}, []);
-
 	const checkScroll = useCallback((): void => {
 		if (navTopSectionRef.current) {
 			const { scrollHeight, clientHeight, scrollTop } = navTopSectionRef.current;
@@ -987,11 +959,9 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 	return (
 		<div className={cx('sidenav-container', isPinned && 'pinned')}>
 			<div
-				ref={sidenavRef}
 				className={cx(
 					'sideNav',
 					isPinned && 'pinned',
-					isHovered && 'is-hovered',
 					isDropdownOpen && 'dropdown-open',
 				)}
 				onMouseEnter={handleMouseEnter}
@@ -1212,95 +1182,46 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 							{isAIAssistantEnabled && renderNavItems([aiAssistantMenuItem], false)}
 
 							<div className="nav-dropdown-item">
-								<DropdownMenu onOpenChange={handleDropdownOpenChange}>
-									<DropdownMenuTrigger asChild>
-										<div className="nav-item">
-											<div className="nav-item-data" data-testid="help-support-nav-item">
-												<div className="nav-item-icon">{helpSupportMenuItem.icon}</div>
+								<Dropdown
+									menu={{
+										items: helpSupportDropdownMenuItems,
+										onClick: handleHelpSupportMenuItemClick,
+									}}
+									placement="topLeft"
+									overlayClassName="nav-dropdown-overlay help-support-dropdown"
+									trigger={['click']}
+									onOpenChange={(open): void => setIsDropdownOpen(open)}
+								>
+									<div className="nav-item">
+										<div className="nav-item-data" data-testid="help-support-nav-item">
+											<div className="nav-item-icon">{helpSupportMenuItem.icon}</div>
 
-												<div className="nav-item-label">{helpSupportMenuItem.label}</div>
-											</div>
+											<div className="nav-item-label">{helpSupportMenuItem.label}</div>
 										</div>
-									</DropdownMenuTrigger>
-									<DropdownMenuContent
-										side="top"
-										align="start"
-										className="nav-dropdown-overlay help-support-dropdown"
-									>
-										{helpSupportDropdownMenuItems.map((item, idx) => {
-											if ('type' in item) {
-												// eslint-disable-next-line react/no-array-index-key
-												return <DropdownMenuSeparator key={`help-sep-${idx}`} />;
-											}
-											return (
-												<DropdownMenuItem
-													key={String(item.key)}
-													leftIcon={item.icon}
-													onClick={(e): void =>
-														handleHelpSupportMenuItemClick({
-															...item,
-															key: String(item.key),
-															domEvent: e.nativeEvent,
-														} as unknown as SidebarItem)
-													}
-												>
-													{item.label}
-												</DropdownMenuItem>
-											);
-										})}
-									</DropdownMenuContent>
-								</DropdownMenu>
+									</div>
+								</Dropdown>
 							</div>
 
 							<div className="nav-dropdown-item">
-								<DropdownMenu onOpenChange={handleDropdownOpenChange}>
-									<DropdownMenuTrigger asChild>
-										<div className={cx('nav-item', isSettingsPage && 'active')}>
-											<div className="nav-item-active-marker" />
-											<div className="nav-item-data" data-testid="settings-nav-item">
-												<div className="nav-item-icon">{userSettingsMenuItem.icon}</div>
+								<Dropdown
+									menu={{
+										items: userSettingsDropdownMenuItems,
+										onClick: handleSettingsMenuItemClick,
+									}}
+									placement="topLeft"
+									overlayClassName="nav-dropdown-overlay settings-dropdown"
+									trigger={['click']}
+									onOpenChange={(open): void => setIsDropdownOpen(open)}
+								>
+									<div className={cx('nav-item', isSettingsPage && 'active')}>
+										<div className="nav-item-active-marker" />
+										<div className="nav-item-data" data-testid="settings-nav-item">
+											<div className="nav-item-icon">{userSettingsMenuItem.icon}</div>
 
-												<div className="nav-item-label">{userSettingsMenuItem.label}</div>
-											</div>
+											<div className="nav-item-label">{userSettingsMenuItem.label}</div>
 										</div>
-									</DropdownMenuTrigger>
-									<DropdownMenuContent
-										side="top"
-										align="start"
-										className="nav-dropdown-overlay settings-dropdown"
-									>
-										{(userSettingsDropdownMenuItems ?? []).map((item, idx) => {
-											if (!item) {
-												return null;
-											}
-											if ('type' in item && item.type === 'divider') {
-												// eslint-disable-next-line react/no-array-index-key
-												return <DropdownMenuSeparator key={`settings-sep-${idx}`} />;
-											}
-											const settingsItem = item as {
-												key?: string | number;
-												label?: ReactNode;
-												icon?: ReactNode;
-												disabled?: boolean;
-											};
-											return (
-												<DropdownMenuItem
-													key={String(settingsItem.key)}
-													leftIcon={settingsItem.icon}
-													disabled={settingsItem.disabled}
-													onClick={(e): void =>
-														handleSettingsMenuItemClick({
-															key: String(settingsItem.key),
-															domEvent: e.nativeEvent,
-														} as unknown as SidebarItem)
-													}
-												>
-													{settingsItem.label}
-												</DropdownMenuItem>
-											);
-										})}
-									</DropdownMenuContent>
-								</DropdownMenu>
+									</div>
+								</Dropdown>
 							</div>
 						</div>
 					</div>

frontend/src/container/SpanDetailsDrawer/Attributes/Attributes.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useMemo, useState } from 'react';
-import { Input } from 'antd';
+import { Input } from '@signozhq/ui/input';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
 import CopyClipboardHOC from 'components/Logs/CopyClipboardHOC';

frontend/src/container/SpanDetailsDrawer/Events/Events.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
-import { Collapse, Input, Modal } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Collapse, Modal } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
 import { Diamond } from '@signozhq/icons';

frontend/src/container/SpanDetailsDrawer/SpanDetailsDrawer.tsx

@@ -9,10 +9,10 @@ import {
 	useState,
 } from 'react';
 import { useMutation, useQuery } from 'react-query';
+import { Input } from '@signozhq/ui/input';
 import {
 	Button,
 	Checkbox,
-	Input,
 	Modal,
 	Select,
 	Skeleton,

frontend/src/container/Trace/Filters/Panel/PanelBody/Duration/styles.ts

@@ -1,5 +1,7 @@
-import { Input } from 'antd';
+// TODO(@signozhq/ui-input): migrate this styled(Input) once @signozhq/ui
+// Input supports `addonAfter` (the consumer renders `<InputComponent addonAfter="ms">`).
 import { Typography } from '@signozhq/ui/typography';
+import { Input } from 'antd';
 import styled from 'styled-components';
 
 export const DurationText = styled.div`

frontend/src/container/Trace/Search/AllTags/Tag/TagKey.tsx

@@ -8,7 +8,8 @@ import {
 import { useQuery } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
-import { AutoComplete, Input } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { AutoComplete } from 'antd';
 import getTagFilters from 'api/trace/getTagFilter';
 import { AppState } from 'store/reducers';
 import { GlobalReducer } from 'types/reducer/globalTime';

frontend/src/container/Trace/TraceGraphFilter/index.tsx

@@ -2,7 +2,8 @@ import { useMemo, useState } from 'react';
 import { useQuery } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
-import { AutoComplete, Input, Space } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { AutoComplete, Space } from 'antd';
 import getTagFilters from 'api/trace/getTagFilter';
 import { AppState } from 'store/reducers';
 import { GlobalReducer } from 'types/reducer/globalTime';

frontend/src/container/TraceWaterfall/AddSpanToFunnelModal/AddSpanToFunnelModal.tsx

@@ -1,6 +1,7 @@
 import { ChangeEvent, useEffect, useMemo, useState } from 'react';
 import { ArrowLeft, Check, Loader, Plus, Search } from '@signozhq/icons';
-import { Button, Input, Spin } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button, Spin } from 'antd';
 import cx from 'classnames';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import SignozModal from 'components/SignozModal/SignozModal';

frontend/src/container/Version/styles.ts

@@ -1,4 +1,4 @@
-import { Input } from 'antd';
+import { Input } from '@signozhq/ui/input';
 import styled from 'styled-components';
 
 export const InputComponent = styled(Input)`