diff --git a/appkit/next/core/components.mdx b/appkit/next/core/components.mdx
index 788a14229..2338a7135 100644
--- a/appkit/next/core/components.mdx
+++ b/appkit/next/core/components.mdx
@@ -1,11 +1,46 @@
 ---
-title: Web Components
-sidebarTitle: Components
+title: Components
 ---
 
-import Components from "/snippets/appkit/shared/components.mdx";
+AppKit provides pre-built React components that you can use to trigger the modal or display wallet information in your Next.js application.
 
-<Components />
+## React Components
+
+```tsx
+import { 
+  AppKitButton, 
+  AppKitConnectButton, 
+  AppKitAccountButton, 
+  AppKitNetworkButton 
+} from "@reown/appkit/react";
+
+export default function MyApp() {
+  return (
+    <div>
+      {/* Default button that handles the modal state */}
+      <AppKitButton />
+      
+      {/* Button for connecting a wallet */}
+      <AppKitConnectButton />
+      
+      {/* Button for account view */}
+      <AppKitAccountButton />
+      
+      {/* Button for network selection */}
+      <AppKitNetworkButton />
+    </div>
+  );
+}
+```
+
+### Component Properties
+
+All React components support the same properties as their HTML element counterparts:
+
+- **AppKitButton**: `size`, `label`, `loadingLabel`, `disabled`, `balance`, `namespace`
+- **AppKitConnectButton**: `size`, `label`, `loadingLabel`
+- **AppKitAccountButton**: `disabled`, `balance`
+- **AppKitNetworkButton**: `disabled`
 
 ### `<appkit-wallet-button  />`
 
@@ -49,7 +84,11 @@ import "@reown/appkit-wallet-button/react";
 3. use the component in your project:
 
 ```tsx
-<appkit-wallet-button wallet="metamask" />
+import { AppKitWalletButton } from "@reown/appkit-wallet-button/react";
+
+export default function MyApp() {
+  return <AppKitWalletButton wallet="metamask" />;
+}
 ```
 
 #### Options for wallet property
diff --git a/appkit/react/core/components.mdx b/appkit/react/core/components.mdx
index 4c0562259..b3484af10 100644
--- a/appkit/react/core/components.mdx
+++ b/appkit/react/core/components.mdx
@@ -1,13 +1,46 @@
 ---
-title: Web Components
-sidebarTitle: Components
+title: Components
 ---
 
-import Components from "/snippets/appkit/shared/components.mdx";
+AppKit provides pre-built React components that you can use to trigger the modal or display wallet information.
 
-## Trigger the modal
+## React Components
 
-<Components />
+```tsx
+import { 
+  AppKitButton, 
+  AppKitConnectButton, 
+  AppKitAccountButton, 
+  AppKitNetworkButton 
+} from "@reown/appkit/react";
+
+export default function MyApp() {
+  return (
+    <div>
+      {/* Default button that handles the modal state */}
+      <AppKitButton />
+      
+      {/* Button for connecting a wallet */}
+      <AppKitConnectButton />
+      
+      {/* Button for account view */}
+      <AppKitAccountButton />
+      
+      {/* Button for network selection */}
+      <AppKitNetworkButton />
+    </div>
+  );
+}
+```
+
+### Component Properties
+
+All React components support the same properties as their HTML element counterparts:
+
+- **AppKitButton**: `size`, `label`, `loadingLabel`, `disabled`, `balance`, `namespace`
+- **AppKitConnectButton**: `size`, `label`, `loadingLabel`
+- **AppKitAccountButton**: `disabled`, `balance`
+- **AppKitNetworkButton**: `disabled`
 
 ### `<appkit-wallet-button  />`
 
@@ -50,7 +83,11 @@ import "@reown/appkit-wallet-button/react";
 3. Use the component in the project:
 
 ```tsx
-<appkit-wallet-button wallet="metamask" />
+import { AppKitWalletButton } from "@reown/appkit-wallet-button/react";
+
+export default function MyApp() {
+  return <AppKitWalletButton wallet="metamask" />;
+}
 ```
 
 #### Options for wallet property
diff --git a/appkit/react/solana/triggermodal.mdx b/appkit/react/solana/triggermodal.mdx
index d19b0f700..46329126b 100644
--- a/appkit/react/solana/triggermodal.mdx
+++ b/appkit/react/solana/triggermodal.mdx
@@ -1,19 +1,17 @@
-To open AppKit you can use our [**web component**](../core/components) or build your own button with AppKit [**hooks**](../core/hooks.mdx#useAppKit).
+To open AppKit you can use our [**React components**](../core/components) or build your own button with AppKit [**hooks**](../core/hooks.mdx#useAppKit).
 
 <Tabs>
-<Tab title="Web Component">
+<Tab title="React Component">
 
 ```tsx
+import { AppKitButton } from "@reown/appkit/react";
+
 export default function ConnectButton() {
-  return <appkit-button />;
+  return <AppKitButton />;
 }
 ```
 
-Learn more about the AppKit web components [here](../core/components)
-
-<Info>
-  Web components are global html elements that don't require importing.
-</Info>
+Learn more about the AppKit React components [here](../core/components)
 
 </Tab>
 <Tab title="Hooks">
diff --git a/snippets/appkit/shared/components.mdx b/snippets/appkit/shared/components.mdx
index 9c95ca9fa..9ad9d788b 100644
--- a/snippets/appkit/shared/components.mdx
+++ b/snippets/appkit/shared/components.mdx
@@ -1,3 +1,31 @@
+AppKit provides pre-built UI components that you can use to trigger the modal or display wallet information.
+
+## React Components
+
+For React and Next.js applications, you can use React components instead of HTML elements:
+
+```tsx
+import { 
+  AppKitButton, 
+  AppKitConnectButton, 
+  AppKitAccountButton, 
+  AppKitNetworkButton 
+} from "@reown/appkit/react";
+
+export default function MyApp() {
+  return (
+    <div>
+      <AppKitButton />
+      <AppKitConnectButton />
+      <AppKitAccountButton />
+      <AppKitNetworkButton />
+    </div>
+  );
+}
+```
+
+## HTML Elements
+
 AppKit's [web components](https://www.webcomponents.org/) are custom and reusable HTML tags. They will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML.
 
 <Note>