> For the complete documentation index, see [llms.txt](https://docs.leapwallet.io/cosmos/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.leapwallet.io/cosmos/leap-metamask-snap/integrating-snaps/cosmos-kit.md).

# Cosmos Kit

Cosmos Kit is a UI library that simplifies the process of connecting your dApp to any Cosmos-related wallet. To begin integrating with Cosmos Kit, consult the [documentation here](https://docs.cosmoskit.com/).

### How to Add Leap Cosmos Snap to Cosmos Kit

First, import the wallets from the package [`@cosmos-kit/leap-metamask-cosmos-snap`](https://www.npmjs.com/package/@cosmos-kit/leap-metamask-cosmos-snap):

```
import { wallets as leap-cosmos-snap } from "@cosmos-kit/leap-metamask-cosmos-snap";
```

Next, add it to your provider:

```tsx
function MyCosmosApp({ Component, pageProps }: AppProps) {
  return (
      <ChainProvider
        chains={chains}
        assetLists={assets}
        wallets={[...leap-cosmos-snap]}
        walletConnectOptions={...} // required if `wallets` contains mobile wallets
      >
        <Component {...pageProps} />
      </ChainProvider>
  );
}
 
export default MyCosmosApp;

```