diff --git a/src/checkout/components/CheckoutButton.test.tsx b/src/checkout/components/CheckoutButton.test.tsx
index 1901b28c77..02999996c6 100644
--- a/src/checkout/components/CheckoutButton.test.tsx
+++ b/src/checkout/components/CheckoutButton.test.tsx
@@ -8,7 +8,7 @@ vi.mock('./CheckoutProvider', () => ({
useCheckoutContext: vi.fn(),
}));
-vi.mock('../../internal/components/Spinner', () => ({
+vi.mock('@/ui-react/internal/Spinner', () => ({
Spinner: () =>
Loading...
,
}));
diff --git a/src/checkout/components/CheckoutButton.tsx b/src/checkout/components/CheckoutButton.tsx
index 0d8b45e545..97ba47e5eb 100644
--- a/src/checkout/components/CheckoutButton.tsx
+++ b/src/checkout/components/CheckoutButton.tsx
@@ -1,6 +1,5 @@
+import { Spinner } from '@/ui-react/internal/Spinner';
import { useMemo } from 'react';
-import { Spinner } from '../../internal/components/Spinner';
-
import { useIcon } from '../../core-react/internal/hooks/useIcon';
import {
border,
diff --git a/src/core-react/internal/hooks/useIcon.test.tsx b/src/core-react/internal/hooks/useIcon.test.tsx
index 6c7f7a7595..28fac2c8f6 100644
--- a/src/core-react/internal/hooks/useIcon.test.tsx
+++ b/src/core-react/internal/hooks/useIcon.test.tsx
@@ -1,9 +1,9 @@
+import { coinbasePaySvg } from '@/core/svg/coinbasePaySvg';
+import { fundWalletSvg } from '@/core/svg/fundWallet';
+import { swapSettingsSvg } from '@/core/svg/swapSettings';
+import { walletSvg } from '@/core/svg/walletSvg';
import { renderHook } from '@testing-library/react';
import { describe, expect, it } from 'vitest';
-import { coinbasePaySvg } from '../../../internal/svg/coinbasePaySvg';
-import { fundWalletSvg } from '../../../internal/svg/fundWallet';
-import { swapSettingsSvg } from '../../../internal/svg/swapSettings';
-import { walletSvg } from '../../../internal/svg/walletSvg';
import { useIcon } from './useIcon';
describe('useIcon', () => {
diff --git a/src/core-react/internal/hooks/useIcon.tsx b/src/core-react/internal/hooks/useIcon.tsx
index d7214f12dd..756238282f 100644
--- a/src/core-react/internal/hooks/useIcon.tsx
+++ b/src/core-react/internal/hooks/useIcon.tsx
@@ -1,8 +1,8 @@
+import { coinbasePaySvg } from '@/core/svg/coinbasePaySvg';
+import { fundWalletSvg } from '@/core/svg/fundWallet';
+import { swapSettingsSvg } from '@/core/svg/swapSettings';
+import { walletSvg } from '@/core/svg/walletSvg';
import { isValidElement, useMemo } from 'react';
-import { coinbasePaySvg } from '../../../internal/svg/coinbasePaySvg';
-import { fundWalletSvg } from '../../../internal/svg/fundWallet';
-import { swapSettingsSvg } from '../../../internal/svg/swapSettings';
-import { walletSvg } from '../../../internal/svg/walletSvg';
export const useIcon = ({ icon }: { icon?: React.ReactNode }) => {
return useMemo(() => {
diff --git a/src/internal/svg/addSvg.tsx b/src/core/svg/addSvg.tsx
similarity index 100%
rename from src/internal/svg/addSvg.tsx
rename to src/core/svg/addSvg.tsx
diff --git a/src/internal/svg/badgeSvg.tsx b/src/core/svg/badgeSvg.tsx
similarity index 100%
rename from src/internal/svg/badgeSvg.tsx
rename to src/core/svg/badgeSvg.tsx
diff --git a/src/internal/svg/baseSvg.tsx b/src/core/svg/baseSvg.tsx
similarity index 100%
rename from src/internal/svg/baseSvg.tsx
rename to src/core/svg/baseSvg.tsx
diff --git a/src/internal/svg/basenameSvg.tsx b/src/core/svg/basenameSvg.tsx
similarity index 100%
rename from src/internal/svg/basenameSvg.tsx
rename to src/core/svg/basenameSvg.tsx
diff --git a/src/internal/svg/caretDownSvg.tsx b/src/core/svg/caretDownSvg.tsx
similarity index 100%
rename from src/internal/svg/caretDownSvg.tsx
rename to src/core/svg/caretDownSvg.tsx
diff --git a/src/internal/svg/caretUpSvg.tsx b/src/core/svg/caretUpSvg.tsx
similarity index 100%
rename from src/internal/svg/caretUpSvg.tsx
rename to src/core/svg/caretUpSvg.tsx
diff --git a/src/internal/svg/cbwSvg.tsx b/src/core/svg/cbwSvg.tsx
similarity index 100%
rename from src/internal/svg/cbwSvg.tsx
rename to src/core/svg/cbwSvg.tsx
diff --git a/src/internal/svg/checkmarkSvg.tsx b/src/core/svg/checkmarkSvg.tsx
similarity index 100%
rename from src/internal/svg/checkmarkSvg.tsx
rename to src/core/svg/checkmarkSvg.tsx
diff --git a/src/internal/svg/closeSvg.tsx b/src/core/svg/closeSvg.tsx
similarity index 100%
rename from src/internal/svg/closeSvg.tsx
rename to src/core/svg/closeSvg.tsx
diff --git a/src/internal/svg/coinbasePaySvg.tsx b/src/core/svg/coinbasePaySvg.tsx
similarity index 100%
rename from src/internal/svg/coinbasePaySvg.tsx
rename to src/core/svg/coinbasePaySvg.tsx
diff --git a/src/internal/svg/coinbaseWalletSvg.tsx b/src/core/svg/coinbaseWalletSvg.tsx
similarity index 100%
rename from src/internal/svg/coinbaseWalletSvg.tsx
rename to src/core/svg/coinbaseWalletSvg.tsx
diff --git a/src/internal/svg/defaultAvatarSVG.tsx b/src/core/svg/defaultAvatarSVG.tsx
similarity index 100%
rename from src/internal/svg/defaultAvatarSVG.tsx
rename to src/core/svg/defaultAvatarSVG.tsx
diff --git a/src/internal/svg/defaultLoadingSVG.tsx b/src/core/svg/defaultLoadingSVG.tsx
similarity index 100%
rename from src/internal/svg/defaultLoadingSVG.tsx
rename to src/core/svg/defaultLoadingSVG.tsx
diff --git a/src/internal/svg/defaultNFTSvg.tsx b/src/core/svg/defaultNFTSvg.tsx
similarity index 100%
rename from src/internal/svg/defaultNFTSvg.tsx
rename to src/core/svg/defaultNFTSvg.tsx
diff --git a/src/internal/svg/disconnectSvg.tsx b/src/core/svg/disconnectSvg.tsx
similarity index 100%
rename from src/internal/svg/disconnectSvg.tsx
rename to src/core/svg/disconnectSvg.tsx
diff --git a/src/internal/svg/errorSvg.tsx b/src/core/svg/errorSvg.tsx
similarity index 100%
rename from src/internal/svg/errorSvg.tsx
rename to src/core/svg/errorSvg.tsx
diff --git a/src/internal/svg/fundWallet.tsx b/src/core/svg/fundWallet.tsx
similarity index 100%
rename from src/internal/svg/fundWallet.tsx
rename to src/core/svg/fundWallet.tsx
diff --git a/src/internal/svg/githubSvg.tsx b/src/core/svg/githubSvg.tsx
similarity index 100%
rename from src/internal/svg/githubSvg.tsx
rename to src/core/svg/githubSvg.tsx
diff --git a/src/internal/svg/infoSvg.tsx b/src/core/svg/infoSvg.tsx
similarity index 100%
rename from src/internal/svg/infoSvg.tsx
rename to src/core/svg/infoSvg.tsx
diff --git a/src/internal/svg/metamaskSvg.tsx b/src/core/svg/metamaskSvg.tsx
similarity index 100%
rename from src/internal/svg/metamaskSvg.tsx
rename to src/core/svg/metamaskSvg.tsx
diff --git a/src/internal/svg/searchIconSvg.tsx b/src/core/svg/searchIconSvg.tsx
similarity index 100%
rename from src/internal/svg/searchIconSvg.tsx
rename to src/core/svg/searchIconSvg.tsx
diff --git a/src/internal/svg/successSvg.tsx b/src/core/svg/successSvg.tsx
similarity index 100%
rename from src/internal/svg/successSvg.tsx
rename to src/core/svg/successSvg.tsx
diff --git a/src/internal/svg/swapSettings.tsx b/src/core/svg/swapSettings.tsx
similarity index 100%
rename from src/internal/svg/swapSettings.tsx
rename to src/core/svg/swapSettings.tsx
diff --git a/src/internal/svg/toggleSvg.tsx b/src/core/svg/toggleSvg.tsx
similarity index 100%
rename from src/internal/svg/toggleSvg.tsx
rename to src/core/svg/toggleSvg.tsx
diff --git a/src/internal/svg/twitterSvg.tsx b/src/core/svg/twitterSvg.tsx
similarity index 100%
rename from src/internal/svg/twitterSvg.tsx
rename to src/core/svg/twitterSvg.tsx
diff --git a/src/internal/svg/walletSvg.tsx b/src/core/svg/walletSvg.tsx
similarity index 100%
rename from src/internal/svg/walletSvg.tsx
rename to src/core/svg/walletSvg.tsx
diff --git a/src/internal/svg/warpcastSvg.tsx b/src/core/svg/warpcastSvg.tsx
similarity index 100%
rename from src/internal/svg/warpcastSvg.tsx
rename to src/core/svg/warpcastSvg.tsx
diff --git a/src/internal/svg/websiteSvg.tsx b/src/core/svg/websiteSvg.tsx
similarity index 100%
rename from src/internal/svg/websiteSvg.tsx
rename to src/core/svg/websiteSvg.tsx
diff --git a/src/fund/components/FundButton.tsx b/src/fund/components/FundButton.tsx
index dc5307eea2..2b7c9aa975 100644
--- a/src/fund/components/FundButton.tsx
+++ b/src/fund/components/FundButton.tsx
@@ -1,6 +1,6 @@
+import { addSvg } from '@/core/svg/addSvg';
import { useCallback } from 'react';
import { useTheme } from '../../core-react/internal/hooks/useTheme';
-import { addSvg } from '../../internal/svg/addSvg';
import { border, cn, color, pressable, text } from '../../styles/theme';
import { openPopup } from '@/ui-react/internal/utils/openPopup';
diff --git a/src/identity/components/Avatar.tsx b/src/identity/components/Avatar.tsx
index d8e6255cc6..9c4f40bf6a 100644
--- a/src/identity/components/Avatar.tsx
+++ b/src/identity/components/Avatar.tsx
@@ -1,7 +1,7 @@
+import { defaultAvatarSVG } from '@/core/svg/defaultAvatarSVG';
+import { defaultLoadingSVG } from '@/core/svg/defaultLoadingSVG';
import { Children, useMemo } from 'react';
import { findComponent } from '../../core-react/internal/utils/findComponent';
-import { defaultAvatarSVG } from '../../internal/svg/defaultAvatarSVG';
-import { defaultLoadingSVG } from '../../internal/svg/defaultLoadingSVG';
import { cn } from '../../styles/theme';
import { useAvatar } from '../hooks/useAvatar';
import { useName } from '../hooks/useName';
diff --git a/src/identity/components/Badge.tsx b/src/identity/components/Badge.tsx
index 7f7c9cf36b..561b410e90 100644
--- a/src/identity/components/Badge.tsx
+++ b/src/identity/components/Badge.tsx
@@ -1,4 +1,4 @@
-import { badgeSvg } from '../../internal/svg/badgeSvg';
+import { badgeSvg } from '@/core/svg/badgeSvg';
import { background, cn } from '../../styles/theme';
import type { BadgeReact } from '../types';
diff --git a/src/identity/utils/getSocialPlatformDetails.tsx b/src/identity/utils/getSocialPlatformDetails.tsx
index 66138bf3f2..7b2fa02275 100644
--- a/src/identity/utils/getSocialPlatformDetails.tsx
+++ b/src/identity/utils/getSocialPlatformDetails.tsx
@@ -1,8 +1,8 @@
-import { githubSvg } from '../../internal/svg/githubSvg';
-import { twitterSvg } from '../../internal/svg/twitterSvg';
-import { warpcastSvg } from '../../internal/svg/warpcastSvg';
-import { websiteSvg } from '../../internal/svg/websiteSvg';
-import { border, cn, pressable } from '../../styles/theme';
+import { githubSvg } from '@/core/svg/githubSvg';
+import { twitterSvg } from '@/core/svg/twitterSvg';
+import { warpcastSvg } from '@/core/svg/warpcastSvg';
+import { websiteSvg } from '@/core/svg/websiteSvg';
+import { border, cn, pressable } from '@/styles/theme';
export type SocialPlatform = 'twitter' | 'github' | 'farcaster' | 'website';
diff --git a/src/internal/svg/disconnectSvg.stories.ts b/src/internal/svg/disconnectSvg.stories.ts
deleted file mode 100644
index 6250cc373a..0000000000
--- a/src/internal/svg/disconnectSvg.stories.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import React from 'react';
-import { disconnectSvg } from './disconnectSvg';
-
-const SvgWrapper: React.FC = () =>
- React.createElement(
- 'div',
- {
- style: { width: '100%', height: '100%', viewBox: '0 0 16 20' },
- },
- disconnectSvg,
- );
-
-const meta = {
- title: 'Wallet/DisconnectSvg',
- component: SvgWrapper,
- tags: ['autodocs'],
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj;
-
-export const Basic: Story = {};
diff --git a/src/swap/components/Swap.test.tsx b/src/swap/components/Swap.test.tsx
index 55367e106a..5001efa9a6 100644
--- a/src/swap/components/Swap.test.tsx
+++ b/src/swap/components/Swap.test.tsx
@@ -9,7 +9,7 @@ vi.mock('./SwapProvider', () => ({
useSwapContext: vi.fn(),
}));
-vi.mock('../../internal/svg/closeSvg', () => ({
+vi.mock('@/core/svg/closeSvg', () => ({
CloseSvg: () => ,
}));
diff --git a/src/swap/components/SwapAmountInput.tsx b/src/swap/components/SwapAmountInput.tsx
index 4e7082d7e3..b736f259c5 100644
--- a/src/swap/components/SwapAmountInput.tsx
+++ b/src/swap/components/SwapAmountInput.tsx
@@ -2,7 +2,6 @@ import { useCallback, useEffect, useMemo } from 'react';
import { useValue } from '../../core-react/internal/hooks/useValue';
import { getRoundedAmount } from '../../core/utils/getRoundedAmount';
import { isValidAmount } from '../../core/utils/isValidAmount';
-import { TextInput } from '../../internal/components/TextInput';
import {
background,
border,
@@ -13,6 +12,7 @@ import {
} from '../../styles/theme';
import { TokenChip, TokenSelectDropdown } from '../../token';
import type { Token } from '../../token';
+import { TextInput } from '../../ui/react/internal/TextInput';
import type { SwapAmountInputReact } from '../types';
import { formatAmount } from '../utils/formatAmount';
import { useSwapContext } from './SwapProvider';
diff --git a/src/swap/components/SwapButton.test.tsx b/src/swap/components/SwapButton.test.tsx
index 528dc6f9c3..928e6e7b39 100644
--- a/src/swap/components/SwapButton.test.tsx
+++ b/src/swap/components/SwapButton.test.tsx
@@ -19,7 +19,7 @@ vi.mock('./SwapProvider', () => ({
useSwapContext: vi.fn(),
}));
-vi.mock('../../internal/components/Spinner', () => ({
+vi.mock('@/ui-react/internal/Spinner', () => ({
Spinner: () => Loading...
,
}));
diff --git a/src/swap/components/SwapButton.tsx b/src/swap/components/SwapButton.tsx
index 975c2eb95c..32ce825125 100644
--- a/src/swap/components/SwapButton.tsx
+++ b/src/swap/components/SwapButton.tsx
@@ -1,4 +1,4 @@
-import { Spinner } from '../../internal/components/Spinner';
+import { Spinner } from '@/ui-react/internal/Spinner';
import {
background,
border,
diff --git a/src/swap/components/SwapToast.tsx b/src/swap/components/SwapToast.tsx
index 5bffc2974a..53992b05d1 100644
--- a/src/swap/components/SwapToast.tsx
+++ b/src/swap/components/SwapToast.tsx
@@ -1,10 +1,10 @@
import { useCallback } from 'react';
import { cn, color, text } from '../../styles/theme';
+import { successSvg } from '@/core/svg/successSvg';
import { useAccount } from 'wagmi';
import { getChainExplorer } from '../../core/network/getChainExplorer';
-import { Toast } from '../../internal/components/Toast';
-import { successSvg } from '../../internal/svg/successSvg';
+import { Toast } from '../../ui/react/internal/Toast';
import type { SwapToastReact } from '../types';
import { useSwapContext } from './SwapProvider';
diff --git a/src/swap/components/SwapToggleButton.tsx b/src/swap/components/SwapToggleButton.tsx
index 11fcefbfed..5bd06aa98d 100644
--- a/src/swap/components/SwapToggleButton.tsx
+++ b/src/swap/components/SwapToggleButton.tsx
@@ -1,4 +1,4 @@
-import { toggleSvg } from '../../internal/svg/toggleSvg';
+import { toggleSvg } from '@/core/svg/toggleSvg';
import { border, cn, pressable } from '../../styles/theme';
import type { SwapToggleButtonReact } from '../types';
import { useSwapContext } from './SwapProvider';
diff --git a/src/token/components/TokenSearch.tsx b/src/token/components/TokenSearch.tsx
index 50fc4a1485..09e949990a 100644
--- a/src/token/components/TokenSearch.tsx
+++ b/src/token/components/TokenSearch.tsx
@@ -1,9 +1,9 @@
+import { closeSvg } from '@/core/svg/closeSvg';
+import { searchIconSvg } from '@/core/svg/searchIconSvg';
import { useCallback, useState } from 'react';
import { useTheme } from '../../core-react/internal/hooks/useTheme';
-import { TextInput } from '../../internal/components/TextInput';
-import { closeSvg } from '../../internal/svg/closeSvg';
-import { searchIconSvg } from '../../internal/svg/searchIconSvg';
import { cn, color, placeholder, pressable } from '../../styles/theme';
+import { TextInput } from '../../ui/react/internal/TextInput';
import type { TokenSearchReact } from '../types';
export function TokenSearch({
diff --git a/src/token/components/TokenSelectButton.tsx b/src/token/components/TokenSelectButton.tsx
index c3a7e1a2dc..af6a2f7656 100644
--- a/src/token/components/TokenSelectButton.tsx
+++ b/src/token/components/TokenSelectButton.tsx
@@ -1,6 +1,6 @@
+import { caretDownSvg } from '@/core/svg/caretDownSvg';
+import { caretUpSvg } from '@/core/svg/caretUpSvg';
import { type ForwardedRef, forwardRef } from 'react';
-import { caretDownSvg } from '../../internal/svg/caretDownSvg';
-import { caretUpSvg } from '../../internal/svg/caretUpSvg';
import { border, cn, color, pressable, text } from '../../styles/theme';
import type { TokenSelectButtonReact } from '../types';
import { TokenImage } from './TokenImage';
diff --git a/src/transaction/components/TransactionButton.tsx b/src/transaction/components/TransactionButton.tsx
index b00536f93e..1c1d90877f 100644
--- a/src/transaction/components/TransactionButton.tsx
+++ b/src/transaction/components/TransactionButton.tsx
@@ -1,8 +1,8 @@
import { useCallback, useMemo } from 'react';
import { useAccount, useChainId } from 'wagmi';
import { getChainExplorer } from '../../core/network/getChainExplorer';
-import { Spinner } from '../../internal/components/Spinner';
import { border, cn, color, pressable, text } from '../../styles/theme';
+import { Spinner } from '../../ui/react/internal/Spinner';
import type { TransactionButtonReact } from '../types';
import { isSpinnerDisplayed } from '../utils/isSpinnerDisplayed';
import { useTransactionContext } from './TransactionProvider';
diff --git a/src/transaction/components/TransactionToast.tsx b/src/transaction/components/TransactionToast.tsx
index ba85b098bc..8df2b3db3c 100644
--- a/src/transaction/components/TransactionToast.tsx
+++ b/src/transaction/components/TransactionToast.tsx
@@ -1,5 +1,5 @@
import { useCallback } from 'react';
-import { Toast } from '../../internal/components/Toast';
+import { Toast } from '../../ui/react/internal/Toast';
import type { TransactionToastReact } from '../types';
import { useTransactionContext } from './TransactionProvider';
diff --git a/src/transaction/components/TransactionToastIcon.tsx b/src/transaction/components/TransactionToastIcon.tsx
index 19915e01e8..f0eb600287 100644
--- a/src/transaction/components/TransactionToastIcon.tsx
+++ b/src/transaction/components/TransactionToastIcon.tsx
@@ -1,8 +1,8 @@
+import { errorSvg } from '@/core/svg/errorSvg';
+import { successSvg } from '@/core/svg/successSvg';
import { useMemo } from 'react';
-import { Spinner } from '../../internal/components/Spinner';
-import { errorSvg } from '../../internal/svg/errorSvg';
-import { successSvg } from '../../internal/svg/successSvg';
import { cn, text } from '../../styles/theme';
+import { Spinner } from '../../ui/react/internal/Spinner';
import type { TransactionToastIconReact } from '../types';
import { useTransactionContext } from './TransactionProvider';
diff --git a/src/internal/components/Draggable.test.tsx b/src/ui/react/internal/Draggable.test.tsx
similarity index 100%
rename from src/internal/components/Draggable.test.tsx
rename to src/ui/react/internal/Draggable.test.tsx
diff --git a/src/internal/components/Draggable.tsx b/src/ui/react/internal/Draggable.tsx
similarity index 95%
rename from src/internal/components/Draggable.tsx
rename to src/ui/react/internal/Draggable.tsx
index 5f6c61711a..64bfe18783 100644
--- a/src/internal/components/Draggable.tsx
+++ b/src/ui/react/internal/Draggable.tsx
@@ -1,6 +1,6 @@
+import { zIndex } from '@/styles/constants';
+import { cn } from '@/styles/theme';
import { useCallback, useEffect, useState } from 'react';
-import { zIndex } from '../../styles/constants';
-import { cn } from '../../styles/theme';
type DraggableProps = {
children: React.ReactNode;
diff --git a/src/internal/components/QrCode/QrCodeSvg.test.tsx b/src/ui/react/internal/QrCode/QrCodeSvg.test.tsx
similarity index 91%
rename from src/internal/components/QrCode/QrCodeSvg.test.tsx
rename to src/ui/react/internal/QrCode/QrCodeSvg.test.tsx
index 3edcdc9bf8..1f50ba845c 100644
--- a/src/internal/components/QrCode/QrCodeSvg.test.tsx
+++ b/src/ui/react/internal/QrCode/QrCodeSvg.test.tsx
@@ -1,9 +1,9 @@
+import { cbwSvg } from '@/core/svg/cbwSvg';
import { render, screen } from '@testing-library/react';
import { describe, expect, it, vi } from 'vitest';
-import { cbwSvg } from '../../svg/cbwSvg';
import { QrCodeSvg } from './QrCodeSvg';
-vi.mock('../../../core-react/internal/hooks/useTheme', () => ({
+vi.mock('../../../../core-react/internal/hooks/useTheme', () => ({
useTheme: vi.fn(() => 'default'),
}));
diff --git a/src/internal/components/QrCode/QrCodeSvg.tsx b/src/ui/react/internal/QrCode/QrCodeSvg.tsx
similarity index 98%
rename from src/internal/components/QrCode/QrCodeSvg.tsx
rename to src/ui/react/internal/QrCode/QrCodeSvg.tsx
index e525ab72fa..62a23c70af 100644
--- a/src/internal/components/QrCode/QrCodeSvg.tsx
+++ b/src/ui/react/internal/QrCode/QrCodeSvg.tsx
@@ -1,5 +1,5 @@
import { useId, useMemo } from 'react';
-import { useTheme } from '../../../core-react/internal/hooks/useTheme';
+import { useTheme } from '../../../../core-react/internal/hooks/useTheme';
import {
GRADIENT_END_COORDINATES,
GRADIENT_START_COORDINATES,
diff --git a/src/internal/components/QrCode/gradientConstants.test.ts b/src/ui/react/internal/QrCode/gradientConstants.test.ts
similarity index 100%
rename from src/internal/components/QrCode/gradientConstants.test.ts
rename to src/ui/react/internal/QrCode/gradientConstants.test.ts
diff --git a/src/internal/components/QrCode/gradientConstants.ts b/src/ui/react/internal/QrCode/gradientConstants.ts
similarity index 100%
rename from src/internal/components/QrCode/gradientConstants.ts
rename to src/ui/react/internal/QrCode/gradientConstants.ts
diff --git a/src/internal/components/QrCode/useCorners.test.tsx b/src/ui/react/internal/QrCode/useCorners.test.tsx
similarity index 100%
rename from src/internal/components/QrCode/useCorners.test.tsx
rename to src/ui/react/internal/QrCode/useCorners.test.tsx
diff --git a/src/internal/components/QrCode/useCorners.tsx b/src/ui/react/internal/QrCode/useCorners.tsx
similarity index 100%
rename from src/internal/components/QrCode/useCorners.tsx
rename to src/ui/react/internal/QrCode/useCorners.tsx
diff --git a/src/internal/components/QrCode/useDotsPath.test.ts b/src/ui/react/internal/QrCode/useDotsPath.test.ts
similarity index 100%
rename from src/internal/components/QrCode/useDotsPath.test.ts
rename to src/ui/react/internal/QrCode/useDotsPath.test.ts
diff --git a/src/internal/components/QrCode/useDotsPath.ts b/src/ui/react/internal/QrCode/useDotsPath.ts
similarity index 100%
rename from src/internal/components/QrCode/useDotsPath.ts
rename to src/ui/react/internal/QrCode/useDotsPath.ts
diff --git a/src/internal/components/QrCode/useLogo.test.tsx b/src/ui/react/internal/QrCode/useLogo.test.tsx
similarity index 100%
rename from src/internal/components/QrCode/useLogo.test.tsx
rename to src/ui/react/internal/QrCode/useLogo.test.tsx
diff --git a/src/internal/components/QrCode/useLogo.tsx b/src/ui/react/internal/QrCode/useLogo.tsx
similarity index 97%
rename from src/internal/components/QrCode/useLogo.tsx
rename to src/ui/react/internal/QrCode/useLogo.tsx
index 3efa8b1104..8f54539bd2 100644
--- a/src/internal/components/QrCode/useLogo.tsx
+++ b/src/ui/react/internal/QrCode/useLogo.tsx
@@ -1,6 +1,6 @@
+import { cbwSvg } from '@/core/svg/cbwSvg';
import React, { useMemo } from 'react';
import ReactDOMServer from 'react-dom/server';
-import { cbwSvg } from '../../svg/cbwSvg';
type RenderLogoProps = {
size: number;
diff --git a/src/internal/components/QrCode/useMatrix.test.ts b/src/ui/react/internal/QrCode/useMatrix.test.ts
similarity index 100%
rename from src/internal/components/QrCode/useMatrix.test.ts
rename to src/ui/react/internal/QrCode/useMatrix.test.ts
diff --git a/src/internal/components/QrCode/useMatrix.ts b/src/ui/react/internal/QrCode/useMatrix.ts
similarity index 100%
rename from src/internal/components/QrCode/useMatrix.ts
rename to src/ui/react/internal/QrCode/useMatrix.ts
diff --git a/src/internal/components/QuantitySelector.test.tsx b/src/ui/react/internal/QuantitySelector.test.tsx
similarity index 99%
rename from src/internal/components/QuantitySelector.test.tsx
rename to src/ui/react/internal/QuantitySelector.test.tsx
index 67383fd9e8..274d7f438d 100644
--- a/src/internal/components/QuantitySelector.test.tsx
+++ b/src/ui/react/internal/QuantitySelector.test.tsx
@@ -10,7 +10,7 @@ import {
it,
vi,
} from 'vitest';
-import { pressable } from '../../styles/theme';
+import { pressable } from '../../../styles/theme';
import { DELAY_MS, QuantitySelector } from './QuantitySelector';
describe('QuantitySelector component', () => {
diff --git a/src/internal/components/QuantitySelector.tsx b/src/ui/react/internal/QuantitySelector.tsx
similarity index 95%
rename from src/internal/components/QuantitySelector.tsx
rename to src/ui/react/internal/QuantitySelector.tsx
index 1c5cf674ea..d9d30502c7 100644
--- a/src/internal/components/QuantitySelector.tsx
+++ b/src/ui/react/internal/QuantitySelector.tsx
@@ -1,6 +1,12 @@
+import { TextInput } from '@/ui-react/internal/TextInput';
import { useCallback, useState } from 'react';
-import { TextInput } from '../../internal/components/TextInput';
-import { background, border, cn, color, pressable } from '../../styles/theme';
+import {
+ background,
+ border,
+ cn,
+ color,
+ pressable,
+} from '../../../styles/theme';
export const DELAY_MS = 200;
diff --git a/src/internal/components/Spinner.test.tsx b/src/ui/react/internal/Spinner.test.tsx
similarity index 100%
rename from src/internal/components/Spinner.test.tsx
rename to src/ui/react/internal/Spinner.test.tsx
diff --git a/src/internal/components/Spinner.tsx b/src/ui/react/internal/Spinner.tsx
similarity index 90%
rename from src/internal/components/Spinner.tsx
rename to src/ui/react/internal/Spinner.tsx
index aa18a4f2ee..3ec1c0e1d3 100644
--- a/src/internal/components/Spinner.tsx
+++ b/src/ui/react/internal/Spinner.tsx
@@ -1,4 +1,4 @@
-import { cn } from '../../styles/theme';
+import { cn } from '../../../styles/theme';
type SpinnerReact = {
className?: string;
diff --git a/src/internal/components/TextInput.tsx b/src/ui/react/internal/TextInput.tsx
similarity index 94%
rename from src/internal/components/TextInput.tsx
rename to src/ui/react/internal/TextInput.tsx
index 198b2ae30e..993b54723c 100644
--- a/src/internal/components/TextInput.tsx
+++ b/src/ui/react/internal/TextInput.tsx
@@ -1,6 +1,6 @@
import { useCallback } from 'react';
import type { ChangeEvent } from 'react';
-import { useDebounce } from '../../core-react/internal/hooks/useDebounce';
+import { useDebounce } from '../../../core-react/internal/hooks/useDebounce';
type TextInputReact = {
'aria-label'?: string;
diff --git a/src/internal/components/Toast.test.tsx b/src/ui/react/internal/Toast.test.tsx
similarity index 100%
rename from src/internal/components/Toast.test.tsx
rename to src/ui/react/internal/Toast.test.tsx
diff --git a/src/internal/components/Toast.tsx b/src/ui/react/internal/Toast.tsx
similarity index 91%
rename from src/internal/components/Toast.tsx
rename to src/ui/react/internal/Toast.tsx
index 633a8d1d48..bdf0a9de8e 100644
--- a/src/internal/components/Toast.tsx
+++ b/src/ui/react/internal/Toast.tsx
@@ -1,7 +1,7 @@
+import { closeSvg } from '@/core/svg/closeSvg';
import { useEffect } from 'react';
-import { background, cn } from '../../styles/theme';
-import { getToastPosition } from '../../ui/react/internal/utils/getToastPosition';
-import { closeSvg } from '../svg/closeSvg';
+import { background, cn } from '../../../styles/theme';
+import { getToastPosition } from './utils/getToastPosition';
type ToastProps = {
className?: string;
diff --git a/src/ui/react/nft/mint/NFTMintButton.tsx b/src/ui/react/nft/mint/NFTMintButton.tsx
index a79e173fe5..61be5ab4bc 100644
--- a/src/ui/react/nft/mint/NFTMintButton.tsx
+++ b/src/ui/react/nft/mint/NFTMintButton.tsx
@@ -2,7 +2,6 @@ import { useNFTLifecycleContext } from '@/core-react/nft/providers/NFTLifecycleP
import { useNFTContext } from '@/core-react/nft/providers/NFTProvider';
import { useCallback, useEffect, useMemo, useState } from 'react';
import { useAccount, useChainId } from 'wagmi';
-import { Spinner } from '../../../../internal/components/Spinner';
import { cn, color, text } from '../../../../styles/theme';
import {
Transaction,
@@ -16,6 +15,7 @@ import {
} from '../../../../transaction';
import type { Call } from '../../../../transaction/types';
import { ConnectWallet } from '../../../../wallet';
+import { Spinner } from '../../internal/Spinner';
type NFTMintButtonReact = {
className?: string;
diff --git a/src/ui/react/nft/mint/NFTQuantitySelector.test.tsx b/src/ui/react/nft/mint/NFTQuantitySelector.test.tsx
index 366ecb8988..557783ba38 100644
--- a/src/ui/react/nft/mint/NFTQuantitySelector.test.tsx
+++ b/src/ui/react/nft/mint/NFTQuantitySelector.test.tsx
@@ -15,7 +15,7 @@ import { NFTQuantitySelector } from './NFTQuantitySelector';
vi.mock('@/core-react/nft/providers/NFTProvider');
-vi.mock('../../../../internal/components/QuantitySelector', () => ({
+vi.mock('@/ui-react/internal/QuantitySelector', () => ({
QuantitySelector: ({
onChange,
minQuantity,
diff --git a/src/ui/react/nft/mint/NFTQuantitySelector.tsx b/src/ui/react/nft/mint/NFTQuantitySelector.tsx
index 77e2289fed..b179b91678 100644
--- a/src/ui/react/nft/mint/NFTQuantitySelector.tsx
+++ b/src/ui/react/nft/mint/NFTQuantitySelector.tsx
@@ -1,5 +1,5 @@
import { useNFTContext } from '@/core-react/nft/providers/NFTProvider';
-import { QuantitySelector } from '../../../../internal/components/QuantitySelector';
+import { QuantitySelector } from '@/ui-react/internal/QuantitySelector';
import { cn } from '../../../../styles/theme';
type NFTQuantitySelectorReact = {
diff --git a/src/ui/react/nft/mint/NFTTotalCost.tsx b/src/ui/react/nft/mint/NFTTotalCost.tsx
index 90ea493617..e21bb85936 100644
--- a/src/ui/react/nft/mint/NFTTotalCost.tsx
+++ b/src/ui/react/nft/mint/NFTTotalCost.tsx
@@ -1,7 +1,7 @@
import { useNFTContext } from '@/core-react/nft/providers/NFTProvider';
+import { infoSvg } from '@/core/svg/infoSvg';
import { multiplyFloats } from '@/core/utils/multiplyFloats';
import { type ReactNode, useCallback, useMemo, useState } from 'react';
-import { infoSvg } from '../../../../internal/svg/infoSvg';
import { background, border, cn, text } from '../../../../styles/theme';
import { formatAmount } from '../../../../token/utils/formatAmount';
diff --git a/src/ui/react/nft/view/NFTImage.tsx b/src/ui/react/nft/view/NFTImage.tsx
index 7fc7757b9f..914b838dfc 100644
--- a/src/ui/react/nft/view/NFTImage.tsx
+++ b/src/ui/react/nft/view/NFTImage.tsx
@@ -1,7 +1,7 @@
import { useNFTContext } from '@/core-react/nft/providers/NFTProvider';
import type { NFTError } from '@/core/api/types';
+import { defaultNFTSvg } from '@/core/svg/defaultNFTSvg';
import { type MouseEvent, useCallback, useEffect, useState } from 'react';
-import { defaultNFTSvg } from '../../../../internal/svg/defaultNFTSvg';
import { cn } from '../../../../styles/theme';
type NFTImageReact = {
diff --git a/src/ui/react/nft/view/NFTNetwork.tsx b/src/ui/react/nft/view/NFTNetwork.tsx
index ae26c2328d..e21c33d089 100644
--- a/src/ui/react/nft/view/NFTNetwork.tsx
+++ b/src/ui/react/nft/view/NFTNetwork.tsx
@@ -1,7 +1,7 @@
+import { baseSvg } from '@/core/svg/baseSvg';
import type { ReactNode } from 'react';
import { type Chain, base } from 'viem/chains';
import { useChainId } from 'wagmi';
-import { baseSvg } from '../../../../internal/svg/baseSvg';
import { cn, color, text } from '../../../../styles/theme';
type NFTNetworkReact = {
diff --git a/src/ui/react/nft/view/NFTVideo.tsx b/src/ui/react/nft/view/NFTVideo.tsx
index 0cab84e9ad..ba7236c4ee 100644
--- a/src/ui/react/nft/view/NFTVideo.tsx
+++ b/src/ui/react/nft/view/NFTVideo.tsx
@@ -1,7 +1,7 @@
import { useNFTContext } from '@/core-react/nft/providers/NFTProvider';
import type { NFTError } from '@/core/api/types';
import { useEffect, useRef } from 'react';
-import { defaultNFTSvg } from '../../../../internal/svg/defaultNFTSvg';
+import { defaultNFTSvg } from '../../../../core/svg/defaultNFTSvg';
import { cn } from '../../../../styles/theme';
type NFTVideoReact = {
diff --git a/src/wallet/components/ConnectWallet.tsx b/src/wallet/components/ConnectWallet.tsx
index e29ec248e7..5e79e3a533 100644
--- a/src/wallet/components/ConnectWallet.tsx
+++ b/src/wallet/components/ConnectWallet.tsx
@@ -5,7 +5,6 @@ import { useAccount, useConnect } from 'wagmi';
import { findComponent } from '../../core-react/internal/utils/findComponent';
import { useOnchainKit } from '../../core-react/useOnchainKit';
import { IdentityProvider } from '../../identity/components/IdentityProvider';
-import { Spinner } from '../../internal/components/Spinner';
import {
border,
cn,
@@ -13,6 +12,7 @@ import {
text as dsText,
pressable,
} from '../../styles/theme';
+import { Spinner } from '../../ui/react/internal/Spinner';
import type { ConnectWalletReact } from '../types';
import { ConnectButton } from './ConnectButton';
import { ConnectWalletText } from './ConnectWalletText';
diff --git a/src/wallet/components/WalletDropdownBasename.tsx b/src/wallet/components/WalletDropdownBasename.tsx
index 2b91331cfd..d68c055e88 100644
--- a/src/wallet/components/WalletDropdownBasename.tsx
+++ b/src/wallet/components/WalletDropdownBasename.tsx
@@ -1,9 +1,9 @@
+import { basenameSvg } from '@/core/svg/basenameSvg';
import { base } from 'viem/chains';
import { useAccount } from 'wagmi';
import { useName } from '../../identity/hooks/useName';
-import { Spinner } from '../../internal/components/Spinner';
-import { basenameSvg } from '../../internal/svg/basenameSvg';
import { cn, color, pressable, text } from '../../styles/theme';
+import { Spinner } from '../../ui/react/internal/Spinner';
import type { WalletDropdownBasenameReact } from '../types';
export function WalletDropdownBasename({
diff --git a/src/wallet/components/WalletDropdownDisconnect.tsx b/src/wallet/components/WalletDropdownDisconnect.tsx
index ff9cc14c17..ff8f44abdb 100644
--- a/src/wallet/components/WalletDropdownDisconnect.tsx
+++ b/src/wallet/components/WalletDropdownDisconnect.tsx
@@ -1,6 +1,6 @@
+import { disconnectSvg } from '@/core/svg/disconnectSvg';
import { useCallback } from 'react';
import { useDisconnect } from 'wagmi';
-import { disconnectSvg } from '../../internal/svg/disconnectSvg';
import { cn, color, text as dsText, pressable } from '../../styles/theme';
import type { WalletDropdownDisconnectReact } from '../types';
diff --git a/src/wallet/components/WalletModal.tsx b/src/wallet/components/WalletModal.tsx
index 2127bb586e..e6211e9b65 100644
--- a/src/wallet/components/WalletModal.tsx
+++ b/src/wallet/components/WalletModal.tsx
@@ -1,11 +1,11 @@
+import { closeSvg } from '@/core/svg/closeSvg';
+import { coinbaseWalletSvg } from '@/core/svg/coinbaseWalletSvg';
+import { defaultAvatarSVG } from '@/core/svg/defaultAvatarSVG';
+import { metamaskSvg } from '@/core/svg/metamaskSvg';
import { useCallback, useEffect, useRef, useState } from 'react';
import { useConnect } from 'wagmi';
import { coinbaseWallet, metaMask } from 'wagmi/connectors';
import { useOnchainKit } from '../../core-react/useOnchainKit';
-import { closeSvg } from '../../internal/svg/closeSvg';
-import { coinbaseWalletSvg } from '../../internal/svg/coinbaseWalletSvg';
-import { defaultAvatarSVG } from '../../internal/svg/defaultAvatarSVG';
-import { metamaskSvg } from '../../internal/svg/metamaskSvg';
import {
background,
border,