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

# Welcome

> Welcome to the Para Developer Docs! If you're looking to learn more about integrating Para or discover advanced features, you've come to the right place!

export const HelpSection = () => {
  return <section style={{
    marginTop: "1.5rem",
    padding: "1px",
    background: "#e5e7eb",
    borderRadius: "12px",
    transition: "background 0.3s ease"
  }}>
      <div style={{
    padding: "1rem",
    background: "white",
    borderRadius: "11px"
  }}>
        <h2 style={{
    fontSize: "1.5rem",
    fontWeight: "600",
    margin: "0",
    marginBottom: "0.75rem",
    display: "flex",
    alignItems: "center",
    gap: "0.5rem",
    color: "#1f2937"
  }}>
          <span style={{
    fontSize: "1.125rem"
  }}>🤝</span> Need Help?
        </h2>
        <p style={{
    color: "#4b5563",
    marginBottom: "1rem",
    fontSize: "0.875rem",
    lineHeight: "1.4rem"
  }}>
          If you have any questions, we're here to help! You can get in touch in
          the following ways:
        </p>
        <div style={{
    display: "flex",
    flexDirection: "column",
    gap: "1rem"
  }}>
          <div style={{
    display: "flex",
    alignItems: "flex-start",
    gap: "0.75rem"
  }}>
            <div style={{
    backgroundColor: "#f9fafb",
    padding: "0.375rem",
    borderRadius: "9999px"
  }}>
              <img noZoom src="https://mintlify.b-cdn.net/v6.6.0/regular/envelope.svg" alt="Email" style={{
    width: "1.25rem",
    height: "1.25rem",
    color: "#6b7280",
    margin: "0"
  }} />
            </div>
            <div>
              <h3 style={{
    fontWeight: "600",
    fontSize: "0.938rem",
    margin: "0",
    marginBottom: "0.25rem",
    color: "#1f2937"
  }}>
                Email Support
              </h3>
              <Link label="hello@getpara.com" href="mailto:hello@getpara.com" />
            </div>
          </div>

          <div style={{
    width: "100%",
    height: "1px",
    backgroundColor: "#e5e7eb"
  }} aria-hidden="true" />

          <div style={{
    display: "flex",
    alignItems: "flex-start",
    gap: "0.75rem"
  }}>
            <div style={{
    backgroundColor: "#f9fafb",
    padding: "0.375rem",
    borderRadius: "9999px"
  }}>
              <img noZoom src="https://mintlify.b-cdn.net/v6.6.0/regular/message.svg" alt="Chat" style={{
    width: "1.25rem",
    height: "1.25rem",
    color: "#6b7280",
    margin: "0"
  }} />
            </div>
            <div>
              <h3 style={{
    fontWeight: "600",
    fontSize: "0.938rem",
    margin: "0",
    marginBottom: "0.25rem",
    color: "#1f2937"
  }}>
                Direct Chat
              </h3>
              <Link label="Talk to us!" href="https://getpara.com/talk-to-us" />
            </div>
          </div>
        </div>
      </div>
    </section>;
};

export const IconGridItem = ({src, label, href, disabled = false, disabledLabel = "Talk to us!"}) => {
  return <div className="relative w-24 h-24 group" 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={disabled ? undefined : href} className={`flex flex-col justify-center items-center p-4 not-prose w-full h-full bg-white dark:bg-gray-800 ${disabled ? "" : "cursor-pointer"}`} style={{
    borderRadius: "11px"
  }} onClick={disabled ? e => e.preventDefault() : undefined}>
        
        <img noZoom src={`https://mintlify.s3-us-west-1.amazonaws.com/getpara${src}`} className="w-12 h-12 m-0 object-contain" style={{
    maxWidth: "48px",
    maxHeight: "48px",
    filter: disabled ? "grayscale(1)" : "none"
  }} />
        <div className="absolute bottom-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 overflow-hidden w-full" style={{
    borderBottomLeftRadius: "12px",
    borderBottomRightRadius: "12px"
  }}>
          <div style={{
    background: "linear-gradient(45deg, #FF4E00, #874AE3)",
    padding: "4px 0"
  }}>
            <span className="block text-xs text-white text-center">{disabled ? disabledLabel : label}</span>
          </div>
        </div>
      </a>
    </div>;
};

export const ConnectorsGrid = () => {
  return <div className="space-y-2">
      <div>
        <h6 className="text-xl font-semibold mb-3 mt-0">EVM</h6>
        <div className="flex flex-wrap justify-start gap-4">
          <IconGridItem src="/images/v1/icon-logo-ethers.png" label="Ethers" href="/v1/web/guides/evm/ethers" />
          <IconGridItem src="/images/v1/icon-logo-wagmi.png" label="Wagmi" href="/v1/web/guides/evm/wagmi" />
          <IconGridItem src="/images/v1/icon-logo-viem.png" label="Viem" href="/v1/web/guides/evm/viem" />
          <IconGridItem src="/images/v1/icon-logo-rainbowkit.png" label="RainbowKit" href="/v1/web/guides/evm/wagmi" />
        </div>
      </div>

      <div>
        <h6 className="text-xl font-semibold mb-3 mt-0">Cosmos</h6>
        <div className="flex flex-wrap justify-start gap-4">
          <IconGridItem src="/images/v1/icon-logo-cosmjs.png" label="CosmJS" href="/v1/web/guides/cosmos/cosmjs" />
          <IconGridItem src="/images/v1/icon-logo-cosmology.png" label="CosmosKit" href="/v1/web/guides/cosmos/cosmos-kit" disabled />
          <IconGridItem src="/images/v1/icon-logo-graz.png" label="Graz" href="/v1/web/guides/cosmos/graz" disabled />
        </div>
      </div>

      <div>
        <h6 className="text-xl font-semibold mb-3 mt-0">Solana</h6>
        <div className="flex flex-wrap justify-start gap-4">
          <IconGridItem src="/images/v1/icon-logo-solana-web3.png" label="Solana Web3.js" href="/v1/web/guides/solana/web3js" />
          <IconGridItem src="/images/v1/icon-logo-anchor.png" label="Anchor Framework" href="/v1/web/guides/solana/anchor" />
        </div>
      </div>
    </div>;
};

export const FrameworksGrid = () => {
  return <div className="space-y-2">
      <div>
        <h6 className="text-xl font-semibold mb-3 mt-0">Web Frameworks</h6>
        <div className="flex flex-wrap justify-start gap-4">
          <IconGridItem src="/images/v1/icon-logo-react.png" label="React" href="/v1/web/setup/react/vite" />
          <IconGridItem src="/images/v1/icon-logo-next.png" label="Next.js" href="/v1/web/setup/react/nextjs" />
          <IconGridItem src="/images/v1/icon-logo-vue.png" label="Vue.js" href="/v1/web/setup/vue/vite" />
          <IconGridItem src="/images/v1/icon-logo-svelte.png" label="Svelte" href="/v1/web/setup/svelte/vite" />
          <IconGridItem src="/images/v1/icon-logo-pwa.png" label="PWA" href="/v1/web/setup/react/vite" disabled />
        </div>
      </div>

      <div>
        <h6 className="text-xl font-semibold mb-3 mt-0">Mobile Frameworks</h6>
        <div className="flex flex-wrap justify-start gap-4">
          <IconGridItem src="/images/v1/icon-logo-react-native.png" label="React Native" href="/v1/react-native/setup/react-native" />
          <IconGridItem src="/images/v1/icon-logo-expo.png" label="Expo" href="/v1/react-native/setup/expo" />
          <IconGridItem src="/images/v1/icon-logo-flutter.png" label="Flutter" href="/v1/flutter/setup" />
          <IconGridItem src="/images/v1/icon-logo-swift.png" label="Swift" href="/v1/swift/setup" />
          <IconGridItem src="/images/v1/icon-logo-kotlin.png" label="Kotlin" disabled />
        </div>
      </div>
      <div>
      <h6 className="text-xl font-semibold mb-3 mt-0">Server Frameworks</h6>
        <div className="flex flex-wrap justify-start gap-4">
                  <IconGridItem src="/images/v1/icon-logo-node.png" label="Node.js" href="/v1/server/setup" />
                    <IconGridItem src="/images/v1/icon-logo-deno.png" label="Deno" href="/v1/server/setup/deno" disabled />
                    <IconGridItem src="/images/v1/icon-logo-bun.png" label="Bun" href="/v1/server/setup/bun" disabled />
        </div>
      </div>

      <div>
        <h6 className="text-xl font-semibold mb-3 mt-0">Other Platforms</h6>
        <div className="flex flex-wrap justify-start gap-4">
          <IconGridItem src="/images/v1/icon-logo-telegram.png" label="Telegram" href="/v1/general/telegram" />
          <IconGridItem src="/images/v1/icon-logo-chrome-extension.png" label="Chrome Extension" disabled />
          <IconGridItem src="/images/v1/icon-logo-electron.png" label="Electron" disabled />
        </div>
      </div>
    </div>;
};

export const Link = ({href, label}) => <a href={href} style={{
  display: "inline-block",
  position: "relative",
  color: "#000000",
  fontWeight: 600,
  cursor: "pointer",
  borderBottom: "none",
  textDecoration: "none"
}} onMouseEnter={e => {
  e.currentTarget.querySelector("#underline").style.height = "2px";
}} onMouseLeave={e => {
  e.currentTarget.querySelector("#underline").style.height = "1px";
}}>
    {label}
    <span id="underline" style={{
  position: "absolute",
  left: 0,
  bottom: 0,
  width: "100%",
  height: "1px",
  borderRadius: "2px",
  background: "linear-gradient(45deg, #FF4E00, #874AE3)",
  transition: "height 0.3s"
}}></span>

  </a>;

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

<div className="p-6 rounded-xl text-white flex flex-col md:flex-row gap-4" style={{ backgroundImage: `linear-gradient(90deg, #FF4E00 0%, #E73461 44%, #874AE3 77.5%, #7F7DFF 100%)`, backgroundSize: "cover", backgroundPosition: "center" }}>
  <div className="flex flex-1 flex-col">
    <h2 className="text-3xl text-white font-bold not-prose">Capsule is now Para!</h2>
    <p className="text-white text-xs mt-2 not-prose">Same mission, new name. We're excited to continue supporting amazing onchain experiences.</p>
  </div>

  <div className="flex flex-1 items-end gap-3">
    <a target="_blank" href="https://blog.getpara.com/introducing-para" className="flex flex-1 justify-between bg-white text-primary text-xs font-semibold p-4 rounded-xl items-end not-prose" style={{ transition: "transform 0.3s ease-in-out" }} onMouseOver={(e) => (e.currentTarget.style.transform = "scale(1.05)")} onMouseOut={(e) => (e.currentTarget.style.transform = "scale(1)")}>
      <span className="mr-4">Blog <br /> Post</span>

      <div className="relative w-4 h-4">
        <img src="https://mintcdn.com/getpara/xtC0F-pfvyHtkMiM/images/v1/icon-arrow-up-right.svg?fit=max&auto=format&n=xtC0F-pfvyHtkMiM&q=85&s=129c84a6e625dc033917a794c7070312" alt="Up Right Arrow" className="w-full h-full object-contain" style={{ filter: "invert(49%) sepia(96%) saturate(3341%) hue-rotate(336deg) brightness(98%) contrast(112%)" }} width="512" height="512" data-path="images/v1/icon-arrow-up-right.svg" />
      </div>
    </a>

    <a target="_self" href="/v1/general/migration-from-capsule" className="flex flex-1 justify-between border border-white text-white text-xs font-semibold p-4 rounded-xl items-end not-prose" style={{ border: "1px solid white", transition: "transform 0.3s ease-in-out" }} onMouseOver={(e) => (e.currentTarget.style.transform = "scale(1.05)")} onMouseOut={(e) => (e.currentTarget.style.transform = "scale(1)")}>
      <span className="mr-4">Migration <br /> Guide</span>

      <div className="relative w-4 h-4">
        <img src="https://mintcdn.com/getpara/xtC0F-pfvyHtkMiM/images/v1/icon-arrow-up-right.svg?fit=max&auto=format&n=xtC0F-pfvyHtkMiM&q=85&s=129c84a6e625dc033917a794c7070312" alt="Up Right Arrow" className="w-full h-full object-contain" style={{ filter: "brightness(0) invert(1)" }} width="512" height="512" data-path="images/v1/icon-arrow-up-right.svg" />
      </div>
    </a>
  </div>
</div>

## What is Para?

<Link label="Para" href="https://getpara.com/" /> is the easiest and most secure way to onboard all your users and support them throughout their crypto journey. We
support projects throughout their growth, ranging from personal projects to many of the most trusted teams in crypto and
beyond.

Para's universal embedded wallets work across apps, chains, and ecosystem, so whether users start
transacting on EVM, Solana, or Cosmos, they can **onboard once and transact forever, all with the same wallet**.

## Getting Started

<div
  className="p-6 rounded-xl text-white flex flex-col md:flex-row gap-4"
  style={{
backgroundImage: `linear-gradient(90deg, #FF4E00 0%, #E73461 44%, #874AE3 77.5%, #7F7DFF 100%)`,
backgroundSize: "cover",
backgroundPosition: "center",
}}
>
  <div className="flex flex-1 flex-col">
    <h2 className="text-3xl text-white font-bold not-prose">Kickstart Your Integration</h2>

    <p className="text-white text-xs mt-2 not-prose">
      Manage your integration seamlessly with the Modal Designer and Developer Portal. Get access with just a few
      clicks.
    </p>
  </div>

  <div className="flex flex-1 items-end gap-3">
    <a target="_blank" href="https://demo.getpara.com/" className="flex flex-1 justify-between bg-white text-primary text-xs font-semibold p-4 rounded-xl items-end not-prose" style={{ transition: "transform 0.3s ease-in-out" }} onMouseOver={(e) => (e.currentTarget.style.transform = "scale(1.05)")} onMouseOut={(e) => (e.currentTarget.style.transform = "scale(1)")}>
      <span className="mr-4">
        Modal <br /> Designer
      </span>

      <div className="relative w-4 h-4">
        <img src="https://mintcdn.com/getpara/xtC0F-pfvyHtkMiM/images/v1/icon-arrow-up-right.svg?fit=max&auto=format&n=xtC0F-pfvyHtkMiM&q=85&s=129c84a6e625dc033917a794c7070312" alt="Up Right Arrow" className="w-full h-full object-contain" style={{ filter: "invert(49%) sepia(96%) saturate(3341%) hue-rotate(336deg) brightness(98%) contrast(112%)" }} width="512" height="512" data-path="images/v1/icon-arrow-up-right.svg" />
      </div>
    </a>

    <a target="_blank" href="https://developer.getpara.com" className="flex flex-1 justify-between border border-white text-white text-xs font-semibold p-4 rounded-xl items-end not-prose" style={{ border: "1px solid white", transition: "transform 0.3s ease-in-out" }} onMouseOver={(e) => (e.currentTarget.style.transform = "scale(1.05)")} onMouseOut={(e) => (e.currentTarget.style.transform = "scale(1)")}>
      <span className="mr-4">
        Developer <br /> Portal
      </span>

      <div className="relative w-4 h-4">
        <img src="https://mintcdn.com/getpara/xtC0F-pfvyHtkMiM/images/v1/icon-arrow-up-right.svg?fit=max&auto=format&n=xtC0F-pfvyHtkMiM&q=85&s=129c84a6e625dc033917a794c7070312" alt="Up Right Arrow" className="w-full h-full object-contain" style={{ filter: "brightness(0) invert(1)" }} width="512" height="512" data-path="images/v1/icon-arrow-up-right.svg" />
      </div>
    </a>
  </div>
</div>

If you'd like to see Para in action with your brand, try our <Link href="https://demo.getpara.com" label="Modal Designer Demo" />.

Ready to get started? Head over to our <Link href="https://developer.getpara.com" label="Developer Portal" /> to create your account. The portal is self-serve, allowing you to begin your integration journey immediately.

Once your account is set up, explore the resources below to begin integrating Para with your platform.

## Adding Para to Your App

<div className="p-6 rounded-xl text-white flex flex-col md:flex-row gap-4" style={{ backgroundImage: `linear-gradient(90deg, #FF4E00 0%, #E73461 44%, #874AE3 77.5%, #7F7DFF 100%)`, backgroundSize: "cover", backgroundPosition: "center" }}>
  <div className="flex flex-1 flex-col">
    <h2 className="text-3xl text-white font-bold not-prose">New: v2.0 Release</h2>
    <p className="text-white text-xs mt-2 not-prose">Check out the v2.0 Release for the latest features, streamlined integrations, and more! You can still use 1.x in the meantime if you prefer</p>
  </div>

  <div className="flex flex-1 items-end">
    <a target="_self" href="/v2/introduction/migration-to-alpha" className="flex w-1/2 justify-between bg-white text-primary text-xs font-semibold p-4 rounded-xl items-end not-prose" style={{ transition: "transform 0.3s ease-in-out" }} onMouseOver={(e) => (e.currentTarget.style.transform = "scale(1.05)")} onMouseOut={(e) => (e.currentTarget.style.transform = "scale(1)")}>
      <span className="mr-4">Migration <br /> Guide</span>

      <div className="relative w-4 h-4">
        <img src="https://mintcdn.com/getpara/xtC0F-pfvyHtkMiM/images/v1/icon-arrow-up-right.svg?fit=max&auto=format&n=xtC0F-pfvyHtkMiM&q=85&s=129c84a6e625dc033917a794c7070312" alt="Up Right Arrow" className="w-full h-full object-contain" style={{ filter: "invert(49%) sepia(96%) saturate(3341%) hue-rotate(336deg) brightness(98%) contrast(112%)" }} width="512" height="512" data-path="images/v1/icon-arrow-up-right.svg" />
      </div>
    </a>
  </div>
</div>

<Steps>
  <Step title="Quick Start">
    Para's SDKs support a wide variety of frameworks across Web, Native Mobile, and more. Pick your framework(s) and follow the Quickstart to create your first Para User.

    <Note>Don't see the framework you're building on? Get in touch! We're always broadening our framework support and often have SDKs not listed here in alpha.</Note>

    <FrameworksGrid />

    <Tip>Just looking to add MPC wallets to your existing app's auth and user models? You can reserve wallets for users and progressively onboard them to web3 with <Link label="Pregenerated Wallets" href="/v1/general/pregen" /></Tip>
  </Step>

  <Step title="Integration Guides">
    Para supports any EVM, Solana, or Cosmos chain and is compatible with popular signing libraries. We also have adapters for many popular wallet connector libraries if you prefer to keep the one you're using and just add Para cross-app embedded wallets as an add-on

    <Note>Not sure whether we support your ecosystem? Ask us!</Note>

    <ConnectorsGrid />
  </Step>

  <Step title="Customize Para">
    Once you're set up, there are many add-ons to make the integration look and work just right for your product.

    <AccordionGroup>
      <Accordion title="Authentication" defaultOpen={false}>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
          <div className="relative" style={{ padding: "1px", background: "#e5e7eb", borderRadius: "12px" }} onMouseOver={(e) => {e.currentTarget.style.background = "linear-gradient(45deg, #FFB4A1, #E5B1FF)"}} onMouseOut={(e) => {e.currentTarget.style.background = "#e5e7eb"}}>
            <a href="/v1/web/guides/external-wallets/overview" className="block w-full h-full bg-white not-prose dark:bg-gray-800 p-4" style={{borderRadius: "11px"}}>
              <p className="m-0 font-normal">External and Embedded Wallets</p>
            </a>
          </div>

          <div className="relative" style={{ padding: "1px", background: "#e5e7eb", borderRadius: "12px" }} onMouseOver={(e) => {e.currentTarget.style.background = "linear-gradient(45deg, #FFB4A1, #E5B1FF)"}} onMouseOut={(e) => {e.currentTarget.style.background = "#e5e7eb"}}>
            <a href="/v1/web/guides/custom-ui/social-logins" className="block w-full h-full bg-white not-prose dark:bg-gray-800 p-4" style={{borderRadius: "11px"}}>
              <p className="m-0 font-normal">Social Logins</p>
            </a>
          </div>

          <div className="relative" style={{ padding: "1px", background: "#e5e7eb", borderRadius: "12px" }} onMouseOver={(e) => {e.currentTarget.style.background = "linear-gradient(45deg, #FFB4A1, #E5B1FF)"}} onMouseOut={(e) => {e.currentTarget.style.background = "#e5e7eb"}}>
            <a href="/v1/web/guides/custom-ui/phone-login" className="block w-full h-full bg-white not-prose dark:bg-gray-800 p-4" style={{borderRadius: "11px"}}>
              <p className="m-0 font-normal">Phone Number Auth</p>
            </a>
          </div>

          <div className="relative" style={{ padding: "1px", background: "#e5e7eb", borderRadius: "12px" }} onMouseOver={(e) => {e.currentTarget.style.background = "linear-gradient(45deg, #FFB4A1, #E5B1FF)"}} onMouseOut={(e) => {e.currentTarget.style.background = "#e5e7eb"}}>
            <a className="block w-full h-full bg-white not-prose dark:bg-gray-800 p-4" style={{borderRadius: "11px"}}>
              <p className="m-0 font-normal">Passkey & Password Protection</p>
            </a>
          </div>
        </div>
      </Accordion>

      <Accordion title="Security" defaultOpen={false}>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
          <div className="relative" style={{ padding: "1px", background: "#e5e7eb", borderRadius: "12px" }} onMouseOver={(e) => {e.currentTarget.style.background = "linear-gradient(45deg, #FFB4A1, #E5B1FF)"}} onMouseOut={(e) => {e.currentTarget.style.background = "#e5e7eb"}}>
            <a href="/v1/web/guides/custom-ui/2fa" className="block w-full h-full bg-white not-prose dark:bg-gray-800 p-4" style={{borderRadius: "11px"}}>
              <p className="m-0 font-normal">Set up 2FA</p>
            </a>
          </div>

          <div className="relative" style={{ padding: "1px", background: "#e5e7eb", borderRadius: "12px" }} onMouseOver={(e) => {e.currentTarget.style.background = "linear-gradient(45deg, #FFB4A1, #E5B1FF)"}} onMouseOut={(e) => {e.currentTarget.style.background = "#e5e7eb"}}>
            <a className="block w-full h-full bg-white not-prose dark:bg-gray-800 p-4" style={{borderRadius: "11px"}}>
              <p className="m-0 font-normal">Manage Emails</p>
            </a>
          </div>

          <div className="relative" style={{ padding: "1px", background: "#e5e7eb", borderRadius: "12px" }} onMouseOver={(e) => {e.currentTarget.style.background = "linear-gradient(45deg, #FFB4A1, #E5B1FF)"}} onMouseOut={(e) => {e.currentTarget.style.background = "#e5e7eb"}}>
            <a className="block w-full h-full bg-white not-prose dark:bg-gray-800 p-4" style={{borderRadius: "11px"}}>
              <p className="m-0 font-normal">Configure Popups</p>
            </a>
          </div>
        </div>
      </Accordion>

      <Accordion title="Themes and UI" defaultOpen={false}>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
          <div
            className="relative"
            style={{ padding: "1px", background: "#e5e7eb", borderRadius: "12px" }}
            onMouseOver={(e) => {
    e.currentTarget.style.background = "linear-gradient(45deg, #FFB4A1, #E5B1FF)";
  }}
            onMouseOut={(e) => {
    e.currentTarget.style.background = "#e5e7eb";
  }}
          >
            <a href="/v1/web/guides/customization/modal" className="block w-full h-full bg-white not-prose dark:bg-gray-800 p-4" style={{ borderRadius: "11px" }}>
              <p className="m-0 font-normal">Modal Customization and Theming</p>
            </a>
          </div>
        </div>
      </Accordion>

      <Accordion title="3rd Party Integrations" defaultOpen={false}>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
          <div className="relative" style={{ padding: "1px", background: "#e5e7eb", borderRadius: "12px" }} onMouseOver={(e) => {e.currentTarget.style.background = "linear-gradient(45deg, #FFB4A1, #E5B1FF)"}} onMouseOut={(e) => {e.currentTarget.style.background = "#e5e7eb"}}>
            <a href="/v1/web/guides/customization/fiat-onramps" className="block w-full h-full bg-white not-prose dark:bg-gray-800 p-4" style={{borderRadius: "11px"}}>
              <p className="m-0 font-normal">Integrations for Fiat On & Off Ramps</p>
            </a>
          </div>

          <div className="relative" style={{ padding: "1px", background: "#e5e7eb", borderRadius: "12px" }} onMouseOver={(e) => {e.currentTarget.style.background = "linear-gradient(45deg, #FFB4A1, #E5B1FF)"}} onMouseOut={(e) => {e.currentTarget.style.background = "#e5e7eb"}}>
            <a href="/v1/web/guides/account-abstraction/overview" className="block w-full h-full bg-white not-prose dark:bg-gray-800 p-4" style={{borderRadius: "11px"}}>
              <p className="m-0 font-normal">Account Abstraction</p>
            </a>
          </div>
        </div>
      </Accordion>
    </AccordionGroup>
  </Step>
</Steps>

<Tip>
  Using an LLM (ChatGPT, Claude) or Coding Assistant (Cursor, Github Copilot)? Here are a few tips:

  1. Include the <Link label="Para LLM-optimized context file" href="https://docs.getpara.com/llms-full.txt" /> for the most up-to-date help
  2. Check out the <Link label="Example Hub Wiki" href="https://deepwiki.com/getpara/examples-hub" /> for an interactive LLM using Para Examples Hub
</Tip>

<CardGroup cols={2}>
  <Card title="Examples Hub" imgUrl="/images/v1/general-examples.png" href="/v1/introduction/examples" description="Sample Apps to get started & help troubleshoot" horizontal />

  <Card title="Troubleshooting" imgUrl="/images/v1/general-help.png" href="/v1/general/troubleshooting" description="Framework-specific guides for common issues" horizontal />
</CardGroup>
