> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getpara.com/llms.txt
> Use this file to discover all available pages before exploring further.

# React SDK Lite

> Use @getpara/react-sdk-lite for a lighter bundle when you only need specific chain support

export const Card = ({imgUrl, title, description, href, horizontal = false, newTab = false}) => {
  const [isHovered, setIsHovered] = useState(false);
  const handleClick = e => {
    e.preventDefault();
    if (newTab) {
      window.open(href, '_blank', 'noopener,noreferrer');
    } else {
      window.location.href = href;
    }
  };
  return <div className={`not-prose relative my-2 p-[1px] rounded-xl transition-all duration-300 ${isHovered ? 'bg-gradient-to-r from-[#FF4E00] to-[#874AE3]' : 'bg-gray-200'}`} onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
      <a href={href} onClick={handleClick} className={`not-prose flex ${horizontal ? 'flex-row' : 'flex-col'} font-normal h-full bg-white overflow-hidden w-full cursor-pointer rounded-[11px] no-underline`}>
        {imgUrl && <div className={`relative overflow-hidden flex-shrink-0 ${horizontal ? 'w-[30%] rounded-l-[11px]' : 'w-full'}`} onClick={e => e.stopPropagation()}>
            <img src={imgUrl} alt={title} className="w-full h-full object-cover pointer-events-none select-none" draggable="false" />
            <div className="absolute inset-0 pointer-events-none" />
          </div>}
        <div className={`flex-grow px-6 py-5 ${horizontal ? 'w-[70%]' : 'w-full'} flex flex-col ${horizontal && imgUrl ? 'justify-center' : 'justify-start'}`}>
          {title && <h2 className="font-semibold text-base text-gray-800 m-0">{title}</h2>}
          {description && <div className={`font-normal text-gray-500 re leading-6 ${horizontal || !imgUrl ? 'mt-0' : 'mt-1'}`}>
              <p className="m-0 text-xs">{description}</p>
            </div>}
        </div>
      </a>
    </div>;
};

export const Link = ({href, label, newTab = false}) => {
  const [isHovered, setIsHovered] = useState(false);
  return <a href={href} target={newTab ? '_blank' : '_self'} rel={newTab ? 'noopener noreferrer' : undefined} className="not-prose inline-block relative text-black font-semibold cursor-pointer border-b-0 no-underline" onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
      {label}
      <span className={`absolute left-0 bottom-0 w-full rounded-sm bg-gradient-to-r from-orange-600 to-purple-600 transition-all duration-300 ${isHovered ? 'h-0.5' : 'h-px'}`} />
    </a>;
};

Para offers a lightweight version of `@getpara/react-sdk` called `@getpara/react-sdk-lite`. It reduces your bundle size by letting you install only the chain-specific dependencies you actually need, rather than pulling in packages for all supported networks.

## Installation

Choose the tab for the network you plan to support. If you need multiple networks, install the dependencies from each relevant tab.

<Tabs>
  <Tab title="EVM">
    ```bash npm theme={null}
    npm install @getpara/react-sdk-lite @getpara/evm-wallet-connectors wagmi@^2 viem --save-exact
    ```

    ```bash yarn theme={null}
    yarn add @getpara/react-sdk-lite @getpara/evm-wallet-connectors wagmi@^2 viem --exact
    ```

    ```bash pnpm theme={null}
    pnpm add @getpara/react-sdk-lite @getpara/evm-wallet-connectors wagmi@^2 viem --save-exact
    ```

    ```bash bun theme={null}
    bun add @getpara/react-sdk-lite @getpara/evm-wallet-connectors wagmi@^2 viem --exact
    ```
  </Tab>

  <Tab title="Solana">
    ```bash npm theme={null}
    npm install @getpara/react-sdk-lite @getpara/solana-wallet-connectors @solana-mobile/wallet-adapter-mobile @solana/wallet-adapter-base @solana/wallet-adapter-react @solana/wallet-adapter-walletconnect @solana/web3.js --save-exact
    ```

    ```bash yarn theme={null}
    yarn add @getpara/react-sdk-lite @getpara/solana-wallet-connectors @solana-mobile/wallet-adapter-mobile @solana/wallet-adapter-base @solana/wallet-adapter-react @solana/wallet-adapter-walletconnect @solana/web3.js --exact
    ```

    ```bash pnpm theme={null}
    pnpm add @getpara/react-sdk-lite @getpara/solana-wallet-connectors @solana-mobile/wallet-adapter-mobile @solana/wallet-adapter-base @solana/wallet-adapter-react @solana/wallet-adapter-walletconnect @solana/web3.js --save-exact
    ```

    ```bash bun theme={null}
    bun add @getpara/react-sdk-lite @getpara/solana-wallet-connectors @solana-mobile/wallet-adapter-mobile @solana/wallet-adapter-base @solana/wallet-adapter-react @solana/wallet-adapter-walletconnect @solana/web3.js --exact
    ```
  </Tab>

  <Tab title="Cosmos">
    ```bash npm theme={null}
    npm install @getpara/react-sdk-lite @getpara/cosmos-wallet-connectors graz @cosmjs/cosmwasm-stargate @cosmjs/launchpad @cosmjs/proto-signing @cosmjs/stargate @cosmjs/tendermint-rpc @leapwallet/cosmos-social-login-capsule-provider long starknet --save-exact
    ```

    ```bash yarn theme={null}
    yarn add @getpara/react-sdk-lite @getpara/cosmos-wallet-connectors graz @cosmjs/cosmwasm-stargate @cosmjs/launchpad @cosmjs/proto-signing @cosmjs/stargate @cosmjs/tendermint-rpc @leapwallet/cosmos-social-login-capsule-provider long starknet --exact
    ```

    ```bash pnpm theme={null}
    pnpm add @getpara/react-sdk-lite @getpara/cosmos-wallet-connectors graz @cosmjs/cosmwasm-stargate @cosmjs/launchpad @cosmjs/proto-signing @cosmjs/stargate @cosmjs/tendermint-rpc @leapwallet/cosmos-social-login-capsule-provider long starknet --save-exact
    ```

    ```bash bun theme={null}
    bun add @getpara/react-sdk-lite @getpara/cosmos-wallet-connectors graz @cosmjs/cosmwasm-stargate @cosmjs/launchpad @cosmjs/proto-signing @cosmjs/stargate @cosmjs/tendermint-rpc @leapwallet/cosmos-social-login-capsule-provider long starknet --exact
    ```
  </Tab>
</Tabs>

## Stub Unused Dependencies

After installing, add the `setup-para` postinstall script to your `package.json`. This CLI tool ships with `@getpara/react-sdk-lite` and stubs out chain dependencies you didn't install so your bundler won't try to include them.

```json package.json theme={null}
{
  "scripts": {
    "postinstall": "setup-para"
  }
}
```

If you already have a postinstall script, append `&& setup-para` to it.

<Note>
  If you are migrating from `@getpara/react-sdk`, remove any dependencies for networks you no longer need (e.g., `wagmi` and `viem` if you only use Solana, or `@solana/web3.js` if you only use EVM).
</Note>

## Next Steps

Once the lite SDK is installed, follow the corresponding external wallets guide to finish your integration:

<CardGroup cols={3}>
  <Card title="EVM Wallets" icon="ethereum" href="/v2/react/guides/external-wallets/evm">
    MetaMask, Coinbase Wallet, WalletConnect, and more
  </Card>

  <Card title="Solana Wallets" icon="sun-bright" href="/v2/react/guides/external-wallets/solana">
    Phantom, Backpack, Solflare, and more
  </Card>

  <Card title="Cosmos Wallets" icon="atom" href="/v2/react/guides/external-wallets/cosmos">
    Keplr, Leap, Cosmostation, and more
  </Card>
</CardGroup>