Update React/Next.js Components documentation with new React components (#581)

- Replace HTML elements with React components in React/Next.js docs
- Add proper import statements for AppKit React components
- Update shared components snippet to include React examples
- Update React Solana trigger modal to use AppKitButton component
- Add component properties documentation for all React components
- Maintain backward compatibility by keeping HTML element docs for other frameworks

Based on AppKit PR #4687 that introduces React components using @lit/react

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: [email protected] <[email protected]>

Author: devin-ai-integration[bot]

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" />;
+}
 ```
 
 #### Multichain Support

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`
 
 ## React Components
 
@@ -85,7 +118,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" />;
+}
 ```
 
 #### Multichain Support

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">

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>