> ## Documentation Index
> Fetch the complete documentation index at: https://docs.9am.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# 9AM UI Kit

> The shared design language, NUI plumbing, and FiveM CEF workarounds behind every 9AM script — distributed as a private shadcn registry.

## Overview

9AM UI is the internal component kit every 9AM script builds its interface from. It is distributed as a **private [shadcn registry](https://ui.shadcn.com/docs/registry)**: you install components with `shadcn add`, and the files are copied into your script rather than imported from a package.

It was extracted from the vehicle shop, which is now its first consumer.

<Note>
  This kit is internal to the studio. The registry lives in a private repository and needs a GitHub token to install from — these pages are for 9AM developers, not for customers.
</Note>

## What is in it

| Layer      | Items                                                        | Contents                                                                         |
| ---------- | ------------------------------------------------------------ | -------------------------------------------------------------------------------- |
| Theme      | `@9am/theme`, `@9am/fonts`                                   | Design tokens for both palettes, the primary ramp, radius scale, Poppins + Phudu |
| Primitives | 19                                                           | Buttons, inputs, tables, tabs, dialogs, the viewport scroller, and more          |
| Icons      | 47                                                           | Hand-built animated SVGs with no icon-library dependency                         |
| NUI        | `@9am/nui`, `@9am/visibility`, `@9am/use-theme`, `@9am/i18n` | `fetchNui`, `useNuiEvent`, frame visibility, theme store, runtime translations   |
| Lib        | `@9am/utils`, `@9am/smooth-scroll`                           | `cn()` and the CEF wheel-scroll fix                                              |
| Scaffold   | `@9am/scaffold`, `@9am/tools`                                | A complete new-script skeleton, plus the drift checker                           |

That is 76 items in total.

## Why copy-in and not a package

A package would give you one version and no way out of it. A registry copies source files into your script, which means:

* A script can diverge when it genuinely needs to, without forking anything.
* There is no runtime dependency between scripts — each ships its own built `dist`.
* Escrow builds stay clean, because the kit is a build-time concern and only `web/dist` reaches customers.

The tradeoff is that copies can drift apart. That is what [`9am-ui check`](/ui-kit/maintaining) is for: it fails the build when the design tokens have been edited locally, and warns when a component has.

## The two pieces that matter most

<CardGroup cols={2}>
  <Card title="Viewport" icon="scroll" href="/ui-kit/components#viewport">
    The house scroll container. Drag-able custom scrollbar, layered glass edges, and a header that blur-swaps to a sticky copy as you scroll.
  </Card>

  <Card title="CEF workarounds" icon="triangle-exclamation" href="/ui-kit/cef">
    FiveM runs Chromium 103. The kit carries the fixes for everything that breaks there but works in your browser.
  </Card>
</CardGroup>

Those two are the real value. Anyone can rebuild a button; the reason a 9AM NUI scrolls smoothly and renders correctly in-game is several days of paid-for debugging that now travels with the kit.

## Where to go next

<CardGroup cols={2}>
  <Card title="Setup" icon="download" href="/ui-kit/setup">
    Get a token, wire up `components.json`, scaffold a new script.
  </Card>

  <Card title="Theme" icon="palette" href="/ui-kit/theme">
    Tokens, palettes, fonts, and the styling conventions.
  </Card>

  <Card title="Components" icon="shapes" href="/ui-kit/components">
    The full catalog with props and examples.
  </Card>

  <Card title="NUI bridge" icon="plug" href="/ui-kit/nui">
    Talking to Lua, visibility, and translations.
  </Card>
</CardGroup>