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

# Web Examples

> Explore Para's web integration examples across popular frameworks

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

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 offers a comprehensive collection of web examples to help you integrate our technology across your preferred
frontend frameworks. Our examples-hub repository follows a consistent naming convention with folders structured as
(e.g., `with-react-vite` or `with-vue-vite`).

Each framework folder contains lightweight, standalone examples that focus on specific Para SDKs or features,
demonstrating minimal implementation requirements. These examples are designed to showcase individual capabilities with
clean, focused code that you can easily adapt to your specific application needs and use cases.

## Para Web Examples

Browse our web examples showcasing Para integration with popular frameworks:

<CardGroup cols={2}>
  <Card horizontal title="Next.js App" imgUrl="/images/v2/framework-nextjs.png" href="https://github.com/getpara/examples-hub/tree/2.0.0/web/with-react-nextjs" description="Various Para SDKs and Signing features in a Next.js app" newTab={true} />

  <Card horizontal title="React Vite App" imgUrl="/images/v2/framework-react-vite.png" href="https://github.com/getpara/examples-hub/tree/2.0.0/web/with-react-vite" description="Various Para SDKs and Signing features in a Vite-based React app" newTab={true} />

  <Card horizontal title="Vue Example" imgUrl="/images/v2/framework-vue-vite.png" href="https://github.com/getpara/examples-hub/tree/2.0.0/web/with-vue-vite" description="Vue.js implementation using the Para Modal component" newTab={true} />

  <Card horizontal title="Svelte Example" imgUrl="/images/v2/framework-svelte-vite.png" href="https://github.com/getpara/examples-hub/tree/2.0.0/web/with-svelte-vite" description="Svelte implementation using the Para Modal component" newTab={true} />
</CardGroup>

## Signing Examples

Explore different signing implementations with Para:

<CardGroup cols={3}>
  <Card title="Ethers Signing" imgUrl="/images/v2/signer-ethers.png" href="https://github.com/getpara/examples-hub/tree/2.0.0/web/with-react-nextjs/signer-ethers-v6" description="Sign Ethereum transactions and messages using Para with Ethers.js" newTab={true} />

  <Card title="Solana Web3 Signing" imgUrl="/images/v2/signer-web3js.png" href="https://github.com/getpara/examples-hub/tree/2.0.0/web/with-react-nextjs/signer-solana-web3" description="Sign Solana transactions using Para with Solana Web3.js" newTab={true} />

  <Card title="Solana Anchor Signing" imgUrl="/images/v2/signer-anchor.png" href="https://github.com/getpara/examples-hub/tree/2.0.0/web/with-react-nextjs/signer-solana-anchor" description="Sign Solana transactions using Para with Anchor framework" newTab={true} />
</CardGroup>

## Wallet Pregeneration

Para also supports specialized web integration scenarios:

<Card horizontal title="Wallet Pregeneration (Web Client)" imgUrl="/images/v2/feature-pregeneration.png" href="https://github.com/getpara/examples-hub/tree/2.0.0/web/with-react-nextjs/para-pregen-claim" description="Web implementation for registering and claiming pregenerated wallets with string identifiers" newTab={true} />

## DeFi Integrations

Discover how Para integrates with DeFi protocols:

<Card horizontal title="Jupiter DEX API" imgUrl="/images/v2/feature-jupiter-dex.png" href="https://github.com/getpara/examples-hub/tree/2.0.0/defi-integrations/with-jupiter-dex-api" description="Integration example for working with Jupiter DEX API and Para wallets" newTab={true} />

## Need Something Specific?

Don't see an example for your use case? Para's team is eager to create new examples to help you integrate with different libraries, third-party features, or providers.