Add scaffold-ui backlinks and fix component imports

docs/pages/components/Address.md

@@ -20,7 +20,7 @@ Clicking on the address redirects to the connected wallet's network block explor
 ## Import
 
 ```tsx
-import { Address } from "~~/components/scaffold-eth";
+import { Address } from "@scaffold-ui/components";
 ```
 
 ## Usage
@@ -38,3 +38,7 @@ import { Address } from "~~/components/scaffold-eth";
 | **format** (optional)             | `string`  | `"short"`     | By default, only the first five characters of the address are displayed. Set this to `"long"` to display the entire address.  |
 | **size** (optional)               | `string`  | `"base"`      | Size for the displayed Address component. `base` by default but you can pass in `xs`, `sm`, `base`, `lg`, `xl`, `2xl`, `3xl`. |
 | **onlyEnsOrAddress** (optional)   | `boolean` | `false`       | When `true`, displays only the ENS name (if available) or the address, not both.                                              |
+
+:::tip[Scaffold-UI]
+For more details on customization and theming, check the [Scaffold-UI Address docs](https://scaffold-ui-docs.vercel.app/components/Address).
+:::

docs/pages/components/AddressInput.md

@@ -14,7 +14,7 @@ Also shows a blockie image for each address.
 ## Import
 
 ```tsx
-import { AddressInput } from "~~/components/scaffold-eth";
+import { AddressInput } from "@scaffold-ui/components";
 ```
 
 ## Usage
@@ -40,3 +40,7 @@ const [address, setAddress] = useState("");
 | **placeholder** (optional) | `string`   | `undefined`   | The string that will be rendered before address input has been entered.      |
 | **name** (optional)        | `string`   | `undefined`   | Helps identify the data being sent if AddressInput is submitted into a form. |
 | **disabled** (optional)    | `boolean`  | `false`       | If `true`, sets the address input un-clickable and unusable.                 |
+
+:::tip[Scaffold-UI]
+For more details on customization and theming, check the [Scaffold-UI AddressInput docs](https://scaffold-ui-docs.vercel.app/components/AddressInput).
+:::

docs/pages/components/Balance.md

@@ -12,7 +12,7 @@ Displays the balance of a given address in both ether (ETH) and US dollars (USD)
 ## Import
 
 ```tsx
-import { Balance } from "~~/components/scaffold-eth";
+import { Balance } from "@scaffold-ui/components";
 ```
 
 ## Usage
@@ -27,3 +27,7 @@ import { Balance } from "~~/components/scaffold-eth";
 | ------------------------ | -------- | ------------- | ------------------------------------------------------------------------------------------------------------------------- |
 | **address**              | `string` | `undefined`   | Address in `0x___` format, it will resolve its ENS if it has one associated.                                              |
 | **className** (optional) | `string` | `""`          | Prop to pass additional CSS styling to the component. You can use Tailwind / daisyUI classes like `text-3xl` for styling. |
+
+:::tip[Scaffold-UI]
+For more details on customization and theming, check the [Scaffold-UI Balance docs](https://scaffold-ui-docs.vercel.app/components/Balance).
+:::

docs/pages/components/InputBase.md → docs/pages/components/BaseInput.md

@@ -1,9 +1,9 @@
 ---
-title: InputBase
+title: BaseInput
 description: Base input component with default styling.
 ---
 
-# InputBase
+# BaseInput
 
 Simple building block for creating an input which comes with basic default styles (colors, rounded borders).
 
@@ -12,7 +12,7 @@ Simple building block for creating an input which comes with basic default style
 ## Import
 
 ```tsx
-import { InputBase } from "~~/components/scaffold-eth";
+import { BaseInput } from "@scaffold-ui/components";
 ```
 
 ## Usage
@@ -22,7 +22,7 @@ const [url, setUrl] = useState<string>();
 ```
 
 ```tsx
-<InputBase
+<BaseInput
   name="url"
   placeholder="url"
   value={url}
@@ -37,6 +37,10 @@ const [url, setUrl] = useState<string>();
 | **value**                  | `string`   | `undefined`   | The data that your input will show.                                                     |
 | **onChange**               | `function` | `undefined`   | A callback invoked when the data in the input changes.                                  |
 | **placeholder** (optional) | `string`   | `undefined`   | The string that will be rendered before input data has been entered.                    |
-| **name** (optional)        | `string`   | `undefined`   | Helps identify the data being sent if InputBase is submitted into a form.               |
+| **name** (optional)        | `string`   | `undefined`   | Helps identify the data being sent if BaseInput is submitted into a form.               |
 | **error** (optional)       | `boolean`  | `false`       | When set to `true`, changes input border to have error styling.                         |
 | **disabled** (optional)    | `boolean`  | `false`       | When set to `true`, changes input background color and border to have disabled styling. |
+
+:::tip[Scaffold-UI]
+For more details on customization and theming, check the [Scaffold-UI BaseInput docs](https://scaffold-ui-docs.vercel.app/components/BaseInput).
+:::

docs/pages/components/EtherInput.md

@@ -12,7 +12,7 @@ Displays an input field for ETH/USD amount, with an option to convert between ET
 ## Import
 
 ```tsx
-import { EtherInput } from "~~/components/scaffold-eth";
+import { EtherInput } from "@scaffold-ui/components";
 ```
 
 ## Usage
@@ -37,3 +37,7 @@ const [ethAmount, setEthAmount] = useState("");
 | **placeholder** (optional) | `string`   | `undefined`   | The string that will be rendered when there is no input value.                          |
 | **name** (optional)        | `string`   | `undefined`   | Helps identify the data being sent if EtherInput is submitted into a form.              |
 | **disabled** (optional)    | `boolean`  | `false`       | When set to `true`, changes input background color and border to have disabled styling. |
+
+:::tip[Scaffold-UI]
+For more details on customization and theming, check the [Scaffold-UI EtherInput docs](https://scaffold-ui-docs.vercel.app/components/EtherInput).
+:::

docs/pages/components/IntegerInput.md

@@ -13,7 +13,7 @@ Shows by default a small button to multiply input's value \* 10^18 to transform
 ## Import
 
 ```tsx
-import { IntegerInput } from "~~/components/scaffold-eth";
+import { IntegerInput } from "@scaffold-ui/debug-contracts";
 ```
 
 ## Usage
@@ -42,3 +42,7 @@ const [txValue, setTxValue] = useState<string | bigint>("");
 | **name** (optional)        | `string`   | `undefined`   | Helps identify the data being sent if InputBase is submitted into a form.               |
 | **error** (optional)       | `boolean`  | `false`       | When set to `true`, changes input border to have error styling.                         |
 | **disabled** (optional)    | `boolean`  | `false`       | When set to `true`, changes input background color and border to have disabled styling. |
+
+:::tip[Scaffold-UI]
+This component is part of the `@scaffold-ui/debug-contracts` package. For more details, check the [Scaffold-UI docs](https://scaffold-ui-docs.vercel.app/).
+:::

docs/pages/components/index.mdx

@@ -7,13 +7,15 @@ description: Pre-built React components for common web3 use cases.
 
 Scaffold-ETH 2 provides a set of pre-built components for common web3 use cases. You can make use of them to accelerate and simplify your dapp development.
 
+Most of these components are powered by [**Scaffold-UI**](https://scaffold-ui-docs.vercel.app/), a standalone library that provides the underlying components and UI hooks. The examples below show how they work within a Scaffold-ETH 2 project. For more details on customization, theming, and advanced usage, check the [Scaffold-UI documentation](https://scaffold-ui-docs.vercel.app/).
+
 ## Available Components
 
 - [Address](/components/Address) - Display an Ethereum address with ENS resolution and copy functionality
 - [AddressInput](/components/AddressInput) - Input field for Ethereum addresses with ENS support
 - [Balance](/components/Balance) - Display the ETH balance of an address
 - [BlockieAvatar](/components/BlockieAvatar) - Generate and display blockie avatars for addresses
 - [EtherInput](/components/EtherInput) - Input field for ETH amounts with USD conversion
-- [InputBase](/components/InputBase) - Base input component for building custom inputs
+- [BaseInput](/components/BaseInput) - Base input component for building custom inputs
 - [IntegerInput](/components/IntegerInput) - Input field for integer values
 - [RainbowKitCustomConnectButton](/components/RainbowKitCustomConnectButton) - Customized wallet connect button

docs/pages/index.mdx

@@ -56,4 +56,5 @@ Here are the main components:
 - [**Viem**](https://viem.sh/docs/getting-started) as low-level interface that provides primitives to interact with Ethereum. The alternative to ethers.js and web3.js.
 - [**NextJS**](https://nextjs.org/docs) for building a frontend, using many useful pre-made hooks.
 - [**RainbowKit**](https://www.rainbowkit.com/docs/) for adding wallet connection.
+- [**Scaffold-UI**](https://scaffold-ui-docs.vercel.app/) for pre-built web3 components and UI hooks.
 - [**DaisyUI**](https://daisyui.com/docs/) for pre-built [Tailwind CSS](https://tailwindui.com/components) components.

vocs.config.ts

@@ -70,8 +70,8 @@ export default defineConfig({
           link: "/components/EtherInput",
         },
         {
-          text: "InputBase",
-          link: "/components/InputBase",
+          text: "BaseInput",
+          link: "/components/BaseInput",
         },
         {
           text: "IntegerInput",