1. Project Overview

A lightweight Vue component library featuring JD.com-style design, supporting mobile H5 and Mini Program development.

Nut [nʌt] takes its name from the squirrel Scrat in the movie Ice Age, who is "obsessed" with a nut and pursues it throughout his life, never letting go even when it causes catastrophic disasters.

2. Open Source License

Licensed under MIT

3. Screenshots

4. Feature Overview

Features

•  70+ high-quality components covering mainstream mobile scenarios
•  Supports developing H5 and multi-platform mini-programs simultaneously with a single codebase
•  Based on the JD APP 10.0 visual design guidelines
•  Supports on-demand imports
•  Comprehensive documentation and examples
•  Supports TypeScript
•  Supports server-side rendering (testing phase)
•  Supports component-level theme customization, with 700+ built-in variables
•  Internationalization support, including English, Indonesian, and Traditional Chinese
•  Unit test coverage exceeds 80%, ensuring stability
•  Provides Sketch design resources

5. Tech Stack

Installation

// Vue2 project 
npm i @nutui/nutui@2

// Vue3 H5 project
npm i @nutui/nutui

// Vue3 mini-program project
npm i @nutui/nutui-taro

Example

import { createApp } from "vue";
import App from "./App.vue";

// Note: This method imports all components
import NutUI from "@nutui/nutui";
// When using on-demand loading, remove this global CSS stylesheet
import "@nutui/nutui/dist/style.css";

createApp(App).use(NutUI).mount("#app");

Learning Resources

NutUI Hands-on Quick Start Guide

awesome-nutui

Theme

We provide several official themes based on real-world internal business applications at JD.com. You are welcome to use them in your projects. If they do not meet your needs, you can also customize your own themes.

• JD APP Visual Design (Vue3, Default)
• JD Technology Visual Design (Vue3)
• JD Retail B2B Mall Theme (Vue3)
• JD Enterprise Business Theme (Vue3)
• JD Logistics Visual Design (Vue2)

Version Description

@nutui/nutui and @nutui/nutui-taro are parallel versions with some differences. Their version numbers are always kept in sync. For compatibility with iOS versions below 10, use @nutui/nutui@2

• NutUI 2x & NutUI-JDL are developed with Vue2 and support modern browsers, Android >= 4.0, and iOS >= 8.0. They are H5-only applications.
• NutUI 3x is developed with Vue3 and supports modern browsers, Chrome >= 51, and iOS >= 10.0. It can build both H5 and mini-program applications.

Build Versions

For AMD environments, build tool environments such as Webpack and Vite, and server-side applications, the ES version is recommended. For non-modular environments (such as direct references through <script> tags), the minified UMD version is recommended.

• es nutui.es.js
• umd nutui.umd.js

Usage case

NutUI is already being used in our production environment and is also widely adopted across the industry for developing multi-platform applications.

For specific examples, please refer to the README.md documentation.