> ## Documentation Index
> Fetch the complete documentation index at: https://crosslink.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Custom UI

> What you build, and what Crosslink already built

<Warning>
  This page used to show how to build your own pairing screen, SAS confirmation
  and connection UI. That was wrong: Crosslink ships all of it, and applications
  that reimplemented it ended up with worse, inconsistent versions of screens the
  framework already maintains.

  Build your application. Crosslink builds the bridge.
</Warning>

## The split

**Crosslink owns** — you mount these, you do not write them:

* the desktop pairing card, QR and nine-digit code — [Pairing Card](/client/pairing-card)
* mobile first-pair, code entry and SAS confirmation
* Add to Home Screen, and Continue in Browser
* the trusted-device handoff into your app
* offline, reconnecting and revoked screens — [Offline and Reconnect](/connections/offline-behavior)
* the cached app shell and service worker — [Mobile Bootstrap](/client/mobile-bootstrap)
* the Crosslink mark and attribution — [Branding](/client/branding)

**You own:**

* your desktop application UI
* your mobile application UI, from `crosslink.onConnected(rpc)` onward
* your RPC methods and business logic
* your application's name, icon and colours — [Branding](/client/branding)

## Theming

Colours, icon, name and light/dark. That is the supported customisation surface,
and it is documented in [Branding and Theming](/client/branding).

## Building a client without Crosslink's UI

`CrosslinkClient` is public and you can drive pairing yourself. This is a
genuinely unusual path — a native shell, an automated test harness, a headless
integration — not a starting point for an application.

```ts theme={null}
import { CrosslinkClient } from "@crosslink/sdk-browser";

const client = await CrosslinkClient.create({ deviceName: "My Device" });
await client.pairFromQr(uri, ["notes.read"]);
const rpc = await client.connect();
```

Taking this path means you are also responsible for everything the bootstrap was
doing: pairing states and their errors, SAS confirmation, the install handoff
that stops an installed app re-pairing, reconnection with backoff, revocation
handling, and the offline shell. Those are not small, and they are the reason
`CrosslinkMobileBootstrap` exists.

If you only want it to look different, set `accentColor` instead.