> ## 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 customize Para to match your brand and user needs.

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 extensive customization options to help you create a seamless, branded authentication experience for your
users — visual appearance, authentication methods, security features, and third-party integrations.

In v3, your **partner record** is the source of truth for these settings. You manage it in the Para Developer Portal,
and the SDK reads it at runtime, so most configuration no longer needs to live in your app code. The Para Modal still
accepts props for runtime behavior and per-instance overrides, but the config-related props are now deprecated in favor
of the partner record.

<Card title="How Configuration Works" icon="sliders" href="/v3/react/guides/customization/configuration" description="Where Para reads each setting from, what you can override in code, and how the layers combine. Start here." />

## Developer Portal Customization

The <Link label="Para Developer Portal" href="https://developer.getpara.com" /> is where you configure the core settings for your Para integration. These settings control technical configuration, email branding, payment providers, and security features.

<CardGroup cols={2}>
  <Card title="Portal Setup" description="Configure environment settings, network support, and domain security for your integration." href="/v3/react/guides/customization/developer-portal-setup" />

  <Card title="Email Branding" description="Customize Welcome and OTP emails with your brand colors, fonts, and logos." href="/v3/react/guides/customization/developer-portal-email-branding" />

  <Card title="Payment Integration" description="Configure payment providers and transaction features for crypto onramps and offramps." href="/v3/react/guides/customization/developer-portal-payments" />

  <Card title="Security Settings" description="Set up authentication methods, session management, and transaction permissions." href="/v3/react/guides/customization/developer-portal-security" />
</CardGroup>

## Modal Customization

The Para Modal accepts props for runtime behavior (open state, callbacks, default identifier) and per-instance overrides.
Note that the config-related props — auth methods, theme, 2FA, guest mode, layout — are now **deprecated** in favor of
the partner record; see [How Configuration Works](/v3/react/guides/customization/configuration) for the supported way to
override settings in code (`configOverrides`).

<Note>
  The <Link label="Modal Designer" href="https://demo.getpara.com" /> is the easiest way to visualize your preferred modal configuration. You can then export the configuration directly into your app.
</Note>

<CardGroup cols={2}>
  <Card title="Modal Customization" icon="palette" href="/v3/react/guides/customization/modal" description="Customize the look and feel of your ParaModal integration" />

  <Card title="Two-Factor Auth" icon="shield" href="/v3/react/guides/customization/developer-portal-security" description="Add an extra layer of security with 2FA" />
</CardGroup>

## Custom UI Authentication Options

<CardGroup cols={2}>
  <Card title="Social Logins" icon="at" href="/v3/react/guides/custom-ui-simplified#oauth-authentication" description="Enable authentication via popular social platforms" />

  <Card title="Phone Number or Email" icon="mobile" href="/v3/react/guides/custom-ui-simplified#email--phone-authentication" description="Allow users to login with their phone number or email address" />
</CardGroup>

## External Wallet Support

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

  <Card title="Solana Wallets" imgUrl="/images/v3/wallets-solana.png" href="/v3/react/guides/external-wallets/solana" description="Integrate with Phantom, Backpack, and other Solana wallets" />

  <Card title="Cosmos Wallets" imgUrl="/images/v3/wallets-cosmos.png" href="/v3/react/guides/external-wallets/cosmos" description="Support Keplr, Leap, and other Cosmos ecosystem wallets" />
</CardGroup>

## Partner Add-Ons

Extend Para even further with Third Party Integrations!

<CardGroup cols={2}>
  <Card title="On & Off Ramps" icon="credit-card" href="/v3/react/guides/customization/developer-portal-payments" description="Enable fiat currency conversions for your users" />

  <Card title="Account Abstraction" icon="user" href="/v3/react/guides/web3-operations/evm/account-abstraction" description="Implement smart account features for your users" />
</CardGroup>