# Interchain Kit Documentation

Beta

import { DownloadButton } from '../../../components/download-button'

# Interchain Kit

Interchain Kit is the next generation of CosmosKit, designed to be more modular, performant, and developer-friendly for building Cosmos applications.

<DownloadButton href='/llms/interchain-kit.txt' fileName="interchain-kit-llms.txt" />

## Key Features

- 🎯 **Modular Architecture** - Built with composability in mind
- ⚡️ **Performance Focused** - Optimized for better loading and interaction times
- 🔌 **Plug-and-Play Components** - Ready-to-use React components
- 🎨 **Customizable** - Easily theme and style components
- 📱 **Mobile First** - Better mobile wallet support
- 🔒 **Type Safe** - Built with TypeScript for better developer experience

## Core Packages

- `@interchain-kit/react` - React components and hooks
- `@interchain-kit/core` - Core functionality and types
- `@interchain-kit/wallets` - Wallet integrations
- `@interchain-kit/providers` - Chain providers and configurations

## Why Interchain Kit?

Interchain Kit is the evolution of CosmosKit, addressing common pain points and adding new features:

- Simplified wallet integration
- Better TypeScript support
- Improved mobile wallet handling
- More flexible component system
- Better performance and bundle size
- Enhanced developer experience

## Status

Interchain Kit is currently in beta. While it's stable enough for testing and early adoption, the API may still change before the 1.0 release.

## Installation

```bash
npm install @interchain-kit/react
```

For detailed setup instructions, check out the [Get Started](/cosmos-kit/beta/get-started) guide.

----------------------------------

Get Started

# Getting Started with Interchain Kit

## Installation

Install the required packages:

```bash
npm install @interchain-kit/react @interchain-kit/core
```

## Basic Setup

Wrap your app with the InterchainProvider:

```tsx
import { InterchainProvider } from '@interchain-kit/react'
import { chains, assets } from 'chain-registry'

function App() {
  return (
    <InterchainProvider
      chains={chains}
      assets={assets}
      walletConnectProjectId="your-project-id"
    >
      <YourApp />
    </InterchainProvider>
  )
}
```

## Using Hooks

```tsx
import { useChain, useConnect } from '@interchain-kit/react'

function WalletConnect() {
  const { connect, disconnect, isConnected } = useConnect()
  const { address } = useChain('cosmoshub')

  return (
    <div>
      {isConnected ? (
        <button onClick={disconnect}>Disconnect</button>
      ) : (
        <button onClick={connect}>Connect Wallet</button>
      )}
      {address && <div>Connected Address: {address}</div>}
    </div>
  )
}
```

## Using Components

```tsx
import { WalletButton, WalletModal } from '@interchain-kit/react'

function WalletSection() {
  return (
    <div>
      <WalletButton />
      <WalletModal />
    </div>
  )
}
```

## Next Steps

- Check out the [Hooks documentation](/cosmos-kit/beta/hooks) for available hooks
- Explore the [Components documentation](/cosmos-kit/beta/components) for UI components
- See the [Cookbook](/cosmos-kit/beta/cookbook) for common patterns and examples
- Learn how to [migrate from CosmosKit](/cosmos-kit/beta/migration)