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

# Cosmos Support

> Using Cosmos libraries like CosmJS in React Native with Para's SDK

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>;
};

Para's React Native SDK supports Cosmos blockchain interactions through compatible libraries like CosmJS. After authenticating a user with native passkeys in your React Native or Expo application, all Cosmos-related operations function identically to our web SDKs.

## Implementation and References

Once a user has successfully authenticated with the Para React Native SDK using native passkeys, you can immediately sign Cosmos transactions and messages, interact with different Cosmos chains (including Cosmos Hub, Osmosis, and Juno), connect with IBC-enabled networks, and perform staking, delegation, and other operations. The CosmJS library and related Cosmos SDK tools work identically to their web implementations when used with Para's React Native SDK.

<Card horizontal title="Web Cosmos Guide" imgUrl="/images/v2/network-cosmos.png" href="/v2/react/guides/web3-operations/cosmos/setup-libraries" description="Complete guide to using Para with Cosmos SDK for signing transactions and messages in web applications" />

## Key Considerations for Mobile

When implementing Cosmos functionality in React Native applications:

* Initialize the Para SDK with your project ID before attempting any Cosmos operations
* Complete the authentication flow with native passkeys
* Consider mobile-specific UI patterns for transaction approvals
* Test on physical devices to ensure proper integration with native security features

While the integration steps are nearly identical to web implementations, mobile devices offer enhanced security through hardware-backed passkeys.