> 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/compound-components/switch-network.md).

# Switch Network

This component also provides the same functionality as the one from *Readymade Components.* The only difference here is in the way of implementation.

### Usage

```tsx
"use client";
import { SwitchNetworkWrapper } from "@nazeeh2000/comp-kit";
import { arbitrum, mainnet, polygon } from "viem/chains";

export default function Home() {
  return (
    <>
     <SwitchNetworkWrapper style={{ background: "cyan" }}>
        <SwitchNetworkWrapper.Option
          style={{ border: "2px solid cyan", background: "red" }}
          value={mainnet}
        >
          mainnet
        </SwitchNetworkWrapper.Option>
        <SwitchNetworkWrapper.Option css={{ color: "blue" }} value={arbitrum}>
          arbitrum
        </SwitchNetworkWrapper.Option>
        <SwitchNetworkWrapper.Option
          css={{ color: "blue" }}
          value={polygon}
        >
          Polygon
        </SwitchNetworkWrapper.Option>
      </SwitchNetworkWrapper>
    </>
  );
}
```

{% hint style="info" %}
Note: Make sure your app is wrapped with the necessary provider [`KitProvider`](/comp-kit/introduction/getting-started.md#configuration).
{% endhint %}