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

# Build Custom UI

> Follow this path when your app owns the auth and wallet screens while Para handles authentication state, wallets, sessions, and signing.

Use this path when your app owns the screens, copy, layout, and interaction model. Para handles authentication state, key management, embedded wallets, sessions, and signing, while your product decides how users move through the flow.

## Choose This Path If

* You want custom auth or wallet screens instead of Para's modal.
* You are building with Vue, Svelte, vanilla JavaScript, React Native, Flutter, Swift, or another non-React UI stack.
* You are building a headless React flow or a direct Web SDK integration.
* You still want Para to manage authentication, key shares, wallets, sessions, and signing.

<Warning>
  Custom UI is a different path from modal customization. Para Modal is React-only. If you are building a React app and only need to style Para's modal, use [Use Para Modal](/v3/introduction/use-para-ui) and the [modal customization docs](/v3/react/guides/customization/modal).
</Warning>

## Integration Lifecycle

<Steps>
  <Step title="Create a Para project">
    Create a project and API key in the [Developer Portal](https://developer.getpara.com/), then review [Developer Portal setup](/v3/general/developer-portal-setup).
  </Step>

  <Step title="Choose your SDK surface">
    Use [Custom UI with React hooks](/v3/react/guides/custom-ui-simplified) for headless React, [Custom UI with the Web SDK](/v3/react/guides/custom-ui-web-sdk) for framework-agnostic web apps, or the matching mobile setup for [React Native](/v3/react-native/setup/react-native), [Flutter](/v3/flutter/setup), or [Swift](/v3/swift/setup).
  </Step>

  <Step title="Build authentication screens">
    Implement the auth methods your app supports, then connect those screens to Para's auth state and session lifecycle. For React custom UI, review the v3 [configuration model](/v3/react/guides/customization/configuration) so your screens respect partner-level settings.
  </Step>

  <Step title="Build wallet screens">
    Add wallet creation, wallet selection, address display, signing requests, and post-signing UI using the SDK methods for your platform.
  </Step>

  <Step title="Sign and transact">
    Use [Sign with Para](/v3/react/guides/web3-operations/sign-with-para) or the matching mobile signing guide to confirm the custom UI path end to end.
  </Step>

  <Step title="Prepare for launch">
    Review [session management](/v3/react/guides/sessions), the [Go Live Checklist](/v3/general/checklist), and [Production Deployment](/v3/general/production-deployment).
  </Step>
</Steps>

## Next Docs

<CardGroup cols={2}>
  <Card title="Custom UI with React hooks" icon="react" href="/v3/react/guides/custom-ui-simplified">
    Build custom auth and wallet screens on top of the React SDK hooks.
  </Card>

  <Card title="Custom UI with the Web SDK" icon="code" href="/v3/react/guides/custom-ui-web-sdk">
    Build a custom wallet experience with the framework-agnostic Web SDK.
  </Card>

  <Card title="Svelte setup" icon="code" href="/v3/svelte/setup/vite">
    Build custom Svelte auth and wallet screens with the Web SDK.
  </Card>

  <Card title="Vue setup" icon="code" href="/v3/vue/setup/vite">
    Build custom Vue auth and wallet screens with the Web SDK.
  </Card>

  <Card title="React Native setup" icon="mobile-screen" href="/v3/react-native/setup/react-native">
    Build mobile auth and wallet screens with the React Native SDK.
  </Card>

  <Card title="Flutter setup" icon="mobile-screen-button" href="/v3/flutter/setup">
    Build mobile auth and wallet screens with the Flutter SDK.
  </Card>

  <Card title="Swift setup" icon="swift" href="/v3/swift/setup">
    Build iOS auth and wallet screens with the Swift SDK.
  </Card>

  <Card title="Sessions" icon="clock" href="/v3/react/guides/sessions">
    Keep user authentication and wallet sessions aligned with your UI.
  </Card>

  <Card title="Sign with Para" icon="signature" href="/v3/react/guides/web3-operations/sign-with-para">
    Confirm the custom UI path by signing a message or transaction.
  </Card>
</CardGroup>