> For the complete documentation index, see [llms.txt](https://devmosaic.gitbook.io/devmosaic/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://devmosaic.gitbook.io/devmosaic/resources/devmosaic-connect-ui.md).

# Connect UI

`Dm-connectui` is a premium, fully configurable, and pure vector-based connection screen card for FiveM servers. Designed with an elegant aviation HUD blueprint aesthetic, it acts as a digital boarding pass for players as they connect to your server.

Unlike standard connection UIs that rely on heavy raster images (like PNGs or JPGs) which delay load times and trigger CEF memory limits, `Dm-connectui` is rendered dynamically using custom, light SVGs.

***

### Key Features

* **Pure Vector Graphics**: Dynamic wireframe navigation globe, radar rings, flight path trajectory, corner brackets, and monospaced telemetry data lines. No background PNGs or characters are required.
* **100 Hand-Picked Color Themes**: Instantly change the accent style of your screen by selecting one of 100 preset color themes ranging from neon cyberpunk and retro synthwave to stealth dark profiles.
* **50 Roleplay-Ready Vector Icons**: Preloaded list of 50 custom vector icons (like cars, rules hammers, shopping bags, discord controllers, keys, and shields) to match any custom menu button.
* **CEF Focus Bypass Workaround**: Clean startup mechanism that diverts default Chromium focus away from buttons, completely eliminating blue outline focus rings on load.
* **Glassmorphic Design System**: Sleek semi-transparent backdrops and glowing border filters that adapt beautifully to any FiveM server background.

### In This Section

<table data-view="cards"><thead><tr><th></th><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><i class="fa-download">:download:</i></td><td><strong>Installation</strong></td><td>Getting the connection screen running.</td><td><a href="/devmosaic/resources/devmosaic-connect-ui/installation.md">Installation</a></td></tr><tr><td><i class="fa-gear">:gear:</i></td><td><strong>Configuration</strong></td><td>Every option you can change.</td><td><a href="/devmosaic/resources/devmosaic-connect-ui/configuration.md">Configuration</a></td></tr><tr><td><i class="fa-palette">:palette:</i></td><td><strong>Themes</strong></td><td>Restyle it to match your server.</td><td><a href="/devmosaic/resources/devmosaic-connect-ui/themes.md">Themes</a></td></tr><tr><td><i class="fa-icons">:icons:</i></td><td><strong>Icons</strong></td><td>The icon set and how to swap them.</td><td><a href="/devmosaic/resources/devmosaic-connect-ui/icons.md">Icons</a></td></tr></tbody></table>