GitHub

Setup

PreviousNext

Install @appboxo/ui-kit and wire it into your app.

Install

pnpm add @appboxo/ui-kit

Then add the peer dependencies your app needs:

pnpm add react react-dom react-i18next i18next @arco-design/mobile-react @arco-design/mobile-utils @tanstack/react-query

Wire up styles

Order matters — Arco's component CSS must load before the kit theme so the kit's --* tokens win the cascade:

// app entry (main.tsx / _app.tsx)
import "@arco-design/mobile-react/esm/style"
import "@appboxo/ui-kit/styles.css"
import "@appboxo/ui-kit/themes/freedom/theme.css"

Mandatory host setup

Two side-effects the kit relies on. Run them once at startup before React mounts:

// All bundled themes are scoped under #root. Mirror the id on <body>
// so top-level styles resolve even before React paints.
document.body.id = "root"
 
// Arco Mobile is laid out against a 750px artboard with pxtorem(value / 50).
// Without an explicit root font-size 1rem defaults to 16px and the page
// renders at ~3x scale on desktop.
document.documentElement.style.fontSize = "50px"

Wrap in providers

The wiring differs slightly per framework — pick your stack:

Next.js needs two extra deps:

pnpm add next next-i18next

Wrap in <NextUIKitProvider> so the kit picks up Next's router / link / i18n, inside Arco's ContextProvider:

import { ContextProvider } from "@arco-design/mobile-react"
import { NextUIKitProvider } from "@appboxo/ui-kit/next"
 
function App({ Component, pageProps }: AppProps) {
  return (
    <ContextProvider system="ios" useRtl={false} useDarkMode={false}>
      <NextUIKitProvider>
        <Component {...pageProps} />
      </NextUIKitProvider>
    </ContextProvider>
  )
}

Prerequisites

  • Node.js 18 or later
  • React 18+
  • A bundler that handles CSS (Vite, Next.js, …). LESS is not required — every theme ships pre-compiled theme.css alongside the theme.less source.

See the runnable basic-app example for an end-to-end 70-line consumer.

For right-to-left locales (Arabic brands like ADIB, Riyad, SAIB), see RTL.