> For the complete documentation index, see [llms.txt](https://nazeehs-org.gitbook.io/comp-kit/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nazeehs-org.gitbook.io/comp-kit/components/readymade-components/switch-network.md).

# Switch Network

This component will provide you with the Network selection dropdown with pre-filled values of chains provided in the `supportedChains` props of the `KitProvider`.

If the user is on a network that is not included in the `supportedChains` array, then it will show **Wrong Network** and will prompt the user to switch to any of the supported chains.

This dropdown will also display the current network status by displaying a green dot next to the current network, and if network switching is in progress or the user has yet to confirm from the wallet, it will display a yellow indicator next to the chain on which the user wishes to switch.

### Usage

```tsx
"use client";
import { SwitchNetworks } from "@nazeeh2000/comp-kit";

export default function Home() {
  return (
    <>
      <SwitchNetworks />
    </>
  );
}

```

{% hint style="info" %}
You can pass `variant` prop to both of these components whose value will be `light` or `dark` depending on the theme of your dapp.
{% endhint %}