> ## 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.

# Overview

> Learn how to use Para with external wallets like MetaMask, Phantom, and Keplr.

export const Card = ({imgUrl, iconUrl, fontAwesomeIcon, title, description, href, horizontal = false}) => {
  return <div className="relative group my-2" style={{
    padding: "1px",
    background: "#e5e7eb",
    borderRadius: "12px"
  }} onMouseOver={e => {
    e.currentTarget.style.background = "linear-gradient(45deg, #FF4E00, #874AE3)";
  }} onMouseOut={e => {
    e.currentTarget.style.background = "#e5e7eb";
  }}>
      <a href={href} className={`
          block not-prose font-normal h-full
          bg-white dark:bg-background-dark 
          overflow-hidden w-full cursor-pointer
          flex ${horizontal ? "flex-row" : "flex-col"}
        `} style={{
    borderRadius: "11px"
  }}>
        {(imgUrl || iconUrl) && <div className={`
              relative overflow-hidden flex-shrink-0
              ${horizontal ? "rounded-l" : ""}
              ${!imgUrl ? "bg-white dark:bg-background-dark p-4" : ""}
            `} style={{
    width: horizontal ? "30%" : "100%"
  }}>
            {imgUrl && <img src={`https://mintlify.s3-us-west-1.amazonaws.com/getpara${imgUrl}`} alt={title} className="w-full h-full object-cover" />}
            {(iconUrl || fontAwesomeIcon) && <div className={`
                ${imgUrl ? "absolute inset-0" : ""}
                flex items-center justify-center
              `}>
                <div className="relative w-8 h-8">
                  <img src={iconUrl ? `https://mintlify.s3-us-west-1.amazonaws.com/getpara${iconUrl}` : fontAwesomeIcon} alt={title} className="w-full h-full object-contain" style={{
    filter: "brightness(0) invert(1)"
  }} />
                </div>
              </div>}
          </div>}
        <div className={`
            flex-grow px-6 py-5
            ${horizontal && (imgUrl || iconUrl) ? "flex flex-col justify-center" : ""}
          `} style={{
    width: horizontal ? "70%" : "100%"
  }}>
          {title && <h2 className="font-semibold text-base text-gray-800 dark:text-white">{title}</h2>}
          {description && <div className={`
              font-normal text-sm text-gray-600 dark:text-gray-400 leading-6
              ${horizontal || !imgUrl && !iconUrl ? "mt-0" : "mt-1"}
            `}>
              <p>{description}</p>
            </div>}
        </div>
      </a>
    </div>;
};

Para seamlessly integrates with popular external wallets across different blockchains. This enables your users to connect their existing wallets while benefiting from Para's security and user experience features.

<CardGroup cols={3}>
  <Card title="EVM Wallets" imgUrl="/images/v1/wallets-evm.png" href="/v1/web/guides/external-wallets/evm" description="Connect MetaMask, WalletConnect, and other EVM-compatible wallets with Para." />

  <Card title="Solana Wallets" imgUrl="/images/v1/wallets-solana.png" href="/v1/web/guides/external-wallets/solana" description="Integrate Phantom, Solflare, and other Solana wallets into your Para-powered dApp." />

  <Card title="Cosmos Wallets" imgUrl="/images/v1/wallets-cosmos.png" href="/v1/web/guides/external-wallets/cosmos" description="Connect Keplr and other Cosmos ecosystem wallets with Para applications." />
</CardGroup>

If you want to support multiple wallet types, you can implement a unified wallet connection experience that allows users to switch between different wallets seamlessly.

<Card horizontal title="Multichain Support" imgUrl="/images/v1/general-wallets.png" href="/v1/web/guides/external-wallets/multichain" description="Implement unified wallet connections across multiple blockchain networks for seamless user experiences." />