# jd-opensource/nutui

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/jd-opensource-nutui).**

_How this analysis was created: the description and tags below were written by an AI model that read this project's README and public documentation pages; stars, license and language come straight from the GitHub API. The model does not read the source code._

6,514 stars · 833 forks · Vue · MIT

## Links

- GitHub: https://github.com/jd-opensource/nutui
- Homepage: https://nutui.jd.com
- awesome-repositories: https://awesome-repositories.com/repository/jd-opensource-nutui.md

## Topics

`components` `jd` `nutui` `typescript` `vite` `vue` `vue-components` `vue3`

## Description

NutUI is a Vue component library for building mobile web interfaces. It supplies a large set of ready-made, consistently styled components for common touch-screen scenarios, including calendar cards, avatar cropping, guided tours, pull-to-refresh and spacing-based layouts. A Taro-based adapter package lets the same component codebase also run as mini-programs on platforms such as WeChat, Alipay and JD.

Theming is a central part of the design. Hundreds of exposed style variables control colors, sizes and spacing, so an app can be restyled to match a brand, either at runtime or by compiling the variables into stylesheets. Sketch design files are provided so designers can mock up interfaces that match the components, and a dedicated icon set and swappable language packs for built-in component text round out customization.

On the tooling side, a build plugin resolves components and their styles automatically, so templates need no manual import statements and only the components a page uses are bundled. The package ships type definitions for editor autocompletion and compile-time checks, and it is compiled into several module formats from one entry point. Styles can be built as a separate minified bundle. Server-side rendering is offered as a testing-stage capability.

Components can be tried through live documentation demos and an online playground. A touch emulator lets mobile-oriented components be used with a mouse in a desktop browser, and canvas calls are stubbed so graphics-dependent components can be unit tested without a display.

## Tags

### User Interface & Experience

- [Mobile UI Component Libraries](https://awesome-repositories.com/f/user-interface-experience/mobile-ui-component-libraries.md) — Supplies a large collection of ready-made Vue components with a consistent visual style for building mobile web interfaces.
- [CSS Variable Theming](https://awesome-repositories.com/f/user-interface-experience/css-variable-theming.md) — Exposes hundreds of style variables controlling colors, sizes and spacing so themes can be swapped at runtime or compiled into stylesheets.
- [Themed Component Libraries](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/theme-systems/component-theming/themed-component-libraries.md) — Provides several hundred built-in theme variables to change colors, sizes and other styles per component without rewriting component code. ([source](https://github.com/jd-opensource/nutui#readme))
- [Theme Style Customizations](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/component-styling/theme-style-customizations.md) — Exposes hundreds of style variables for colors, sizes and spacing that can be overridden to restyle every component to match a brand. ([source](https://github.com/jd-opensource/nutui/blob/v4/README_EN.md))
- [Dynamic Theme Switching](https://awesome-repositories.com/f/user-interface-experience/color-themes/theme-application-switching/dynamic-theme-switching.md) — Lets apps change colors and visual styles at runtime by adjusting theme variables, without rebuilding the project. ([source](https://github.com/jd-opensource/nutui/blob/v4/CHANGELOG.md))
- [Guided Tour Components](https://awesome-repositories.com/f/user-interface-experience/component-utilities/guided-tour-components.md) — Includes a tour component that highlights interface areas step by step to introduce new features. ([source](https://github.com/jd-opensource/nutui/blob/v4/CHANGELOG.md))
- [Design Tokens & Themeable Components](https://awesome-repositories.com/f/user-interface-experience/custom-ui-components/design-tokens-themeable-components.md) — Exposes hundreds of style variables for restyling colors, sizes and spacing, plus Sketch design files for matching interface mockups.
- [Avatar Uploaders](https://awesome-repositories.com/f/user-interface-experience/media-uploaders/editor-image-uploaders/pluggable-image-uploaders/avatar-uploaders.md) — Provides an avatar component that lets users pick a profile image and crop it on a canvas before upload. ([source](https://github.com/jd-opensource/nutui/blob/v4/CHANGELOG.md))
- [Pull-to-Refresh Components](https://awesome-repositories.com/f/user-interface-experience/pull-to-refresh-components.md) — Offers a pull-to-refresh component that reloads lists or pages on downward drag with a loading indicator. ([source](https://github.com/jd-opensource/nutui/blob/v4/CHANGELOG.md))
- [Touch Interaction Emulators](https://awesome-repositories.com/f/user-interface-experience/touch-interaction-emulators.md) — Includes a touch emulator that turns mouse input into touch events so mobile components work in a desktop browser. ([source](https://github.com/jd-opensource/nutui/tree/v4/packages))
- [Brand Theme Applicators](https://awesome-repositories.com/f/user-interface-experience/visual-theme-configurations/visual-themes/brand-theme-applicators.md) — Applies a consistent brand look through overridable style variables and runtime theme switching, with Sketch design files for matching mockups.

### Mobile Development

- [Cross-Platform Mini Program Build Systems](https://awesome-repositories.com/f/mobile-development/cross-platform-mini-program-build-systems.md) — Provides a Taro-based component package that renders the same interface across several mini-program platforms such as WeChat, Alipay and JD. ([source](https://github.com/jd-opensource/nutui/blob/v4/CHANGELOG.md))

### Business & Productivity Software

- [Compact Calendar Views](https://awesome-repositories.com/f/business-productivity-software/compact-calendar-views.md) — Ships a compact calendar card component for picking and viewing dates in mobile web and mini-program interfaces. ([source](https://github.com/jd-opensource/nutui/blob/v4/CHANGELOG.md))

### Development Tools & Productivity

- [Component Imports](https://awesome-repositories.com/f/development-tools-productivity/component-discovery/automatic/component-imports.md) — Resolves components and their styles through a build plugin so templates need no manual imports and only used components are bundled.
- [Component Instance Type Definitions](https://awesome-repositories.com/f/development-tools-productivity/component-instance-type-definitions.md) — Ships type definitions giving autocompletion and compile-time checks when using components in typed projects. ([source](https://github.com/jd-opensource/nutui#readme))
- [Automatic Component Imports](https://awesome-repositories.com/f/development-tools-productivity/configuration-importers/automatic-component-imports.md) — Matches component usage to library imports at build time so manual import statements are never required. ([source](https://github.com/jd-opensource/nutui/tree/v4/packages))
- [Tree-Shaken Component Imports](https://awesome-repositories.com/f/development-tools-productivity/tree-shaken-component-imports.md) — Resolves components automatically at build time so only the ones a page uses are bundled, keeping output size small. ([source](https://github.com/jd-opensource/nutui/blob/v4/README_EN.md))

### Web Development

- [Mobile Web Development](https://awesome-repositories.com/f/web-development/front-end-development/mobile-web-development.md) — Provides many ready-made, consistently styled components for assembling mobile web pages covering common touch-screen scenarios.
- [On-Demand Component Loading](https://awesome-repositories.com/f/web-development/on-demand-component-loading.md) — Resolves components and their styles through a build plugin so only the components a page uses are bundled, with no manual imports.
- [Build-Time Auto-Import Resolvers](https://awesome-repositories.com/f/web-development/validation-resolver-integrations/build-time-auto-import-resolvers.md) — Ships a build plugin that resolves component names in templates so no import statements are needed. ([source](https://github.com/jd-opensource/nutui#readme))