# ⚙ Components

Scaffold-ETH 2 ships with reusable, drop-in React components for the things almost every dapp needs: connecting a wallet, displaying an address with ENS resolution, showing an ETH balance, and taking addresses or ETH amounts as input. For reading from and writing to your contracts, it also ships [custom hooks](/hooks) that wrap wagmi.

Most of these components are powered by [**Scaffold-UI**](https://scaffold-ui-docs.vercel.app/), a standalone library that comes pre-installed in every Scaffold-ETH 2 project; import them from `@scaffold-ui/components`. The app-specific ones live in your project at `~~/components/scaffold-eth`. The main one is the wallet connect button, built on [RainbowKit](https://rainbowkit.com) and extended with Scaffold-ETH 2's network and balance UI. For 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
* [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