Unifying JD Tech UI with NutUI-JDT: A Multi‑Platform Component Library Journey

Background

NutUI and JD Tech’s front‑end and UI designers worked together for more than two quarters, resulting in NutUI‑JDT, the official JD Tech‑styled NutUI component library. The goal was to achieve seamless theme customization that merges different UI styles while improving component usability, flexibility, and maintenance cost.

Goal

The aim was to enable a single codebase to support multiple mobile scenarios—H5 and mini‑programs—so that development, maintenance, and release could be unified, reducing duplicated effort and accelerating delivery.

Integration Approach

JD Tech’s FindMobile and NutUI are separate libraries with distinct visual styles, component types, and API definitions. After extensive discussion, the teams adopted a theme customization strategy, creating a shared visual theme that allows both sides to develop and maintain components collaboratively.

Component Differences and Fusion

The teams identified three main tasks:

Identify components needed by JD Tech that NutUI lacked (5 components: form, empty state, indicator, grid, cascade selector).

Identify NutUI components requiring API extensions (8 components, e.g., button size, cell description, dialog theme, switch custom icons, toast title, ring progress gradient, tabs size and scroll shadow, input is‑link).

Document UI style differences for over 70 components and adjust the theme accordingly.

Theme Customization

Using the theme customization tool, the variable count grew from 300+ to over 700, enhancing granularity. The new JD Tech theme was applied across all components, ensuring consistent UI while preserving independent visual identities.

Sketch Plugin for JD Tech Visual Style

A Sketch plugin was built to package all components as symbols, providing 39 components, 500+ symbols, 170+ text styles, 90+ layer styles, and 30+ color styles. The plugin allows designers to insert components without ungrouping, update them with a single click, and maintain UI consistency.

Installation steps:

In Sketch, add the plugin via Preferences → Component Library.

Insert symbols into project files through the menu.

Modify content in the inspector or directly edit text and graphics.

When the library updates, replace the old files with the new ones; Sketch will prompt for an update.

Technical Highlights for Developers

Developers can switch the theme by updating variables-jdt.scss in the Vite or Taro configuration, following the guide at https://nutui.jd.com/jdt/#/guide/theme. This enables rapid theme switching (about 1 second) and aligns visual interaction across JD Tech teams.

Future Plans

Upcoming work includes expanding the Sketch plugin with more components, unifying the icon library, and continuing to refine theme variables.

Milestones and Open‑Source Invitation

Since November 2021, the team has documented nearly 70 differences, added missing high‑frequency components, and created over 700 style variables. The project is open source, and contributors are encouraged to submit pull requests to help evolve NutUI.