GitHub

Troubleshooting

PreviousNext

Common issues when integrating @appboxo/ui-kit.

Everything renders at 3x scale on desktop

Arco Mobile is laid out against a 750px artboard. The kit's styles use pxtorem(value / 50) so 1rem must equal 50px:

document.documentElement.style.fontSize = "50px"

Without this 1rem = 16px and the whole page balloons.

Theme tokens look wrong

All bundled themes scope tokens under #root. Mirror the id on <body> so they actually apply:

document.body.id = "root"

Tailwind / your own reset is overriding the kit

Load Arco's component CSS before the kit's theme:

import "@arco-design/mobile-react/esm/style"
import "@appboxo/ui-kit/styles.css"
import "@appboxo/ui-kit/themes/freedom/theme.css"

The order matters: the kit's --* tokens must win the cascade.

ReferenceError: process is not defined in a Vite app

You're on a pre-0.2 kit version that hard-imported next/router. Upgrade to 0.2.1+ — the kit is now host-agnostic and only pulls in Next code when you explicitly import from @appboxo/ui-kit/next.

<DatePicker> / <TimePicker> labels are untranslated

These pickers call useUIKitTranslation internally. Wrap your tree in <UIKitProvider translation={...}> (or <NextUIKitProvider> for Next) and pass a real useTranslation hook.

import { Button } from "@appboxo/ui-kit" fails

There is no generic Button. Use the variant exports:

import {
  PrimaryButton,
  SecondaryButton,
  TertiaryButton,
  QuaternaryButton,
} from "@appboxo/ui-kit"

Toast.success does not exist

The Toast API exposes two methods, both static — they are not React components:

import { Toast } from "@appboxo/ui-kit"
 
Toast.info("Saved")
Toast.error("Failed")

Bundler can't process .less

Every theme also ships pre-compiled CSS. Import that instead:

// instead of: import "@appboxo/ui-kit/themes/freedom/theme.less"
import "@appboxo/ui-kit/themes/freedom/theme.css"

Still stuck?

Open an issue at Appboxo/ui-kit.