DOCSEARCHbyAlgolia
Submit Docs

NutUI-React Documentation

repository·feat_v4.x·Indexed 22 days ago

https://github.com/jdf2e/nutui-react

A lightweight mobile UI component library based on JD's visual specifications for React, supporting H5 and mini-programs. The ecosystem includes @nutui/nutui-react (v4.0.0-beta.5), codemods for migration to 2.x, and specialized tools like @nutui/inject-ui-styles for HarmonyOS and React Native. It also provides AI-focused CLIs (@nutui/nutui-react-cli and @nutui/nutui-react-taro-cli) with MCP server support to provide structured metadata, props, and documentation to AI coding assistants.

Tokens
240.7K
Snippets
471
Records
1.4K
Agent score
74%

What's inside NutUI-React

  1. Overview of NutUI-React

    feat_v4.x

    NutUI-React is a component library based on Taro and the React technology stack. It is designed for developing mini-programs and H5 applications with a single codebase. It follows the JD APP 16.0 visual specifications and provides over 80 high-quality components for mobile scenarios.

    Key features include:

    • Multi-platform support: Develop for multiple mini-programs and H5 using one codebase.
    • Tree shaking: Supports on-demand (按需) component imports.
    • TypeScript support: Fully typed for better developer experience.
    • Customization: Supports custom themes and internationalization (i18n).
    • SSR: Supports Server-Side Rendering (currently in testing phase).
    • Stability: Over 80% unit test coverage.

  2. Overview of NutUI-React features

    feat_v4.x

    NutUI-React is a component library designed for H5 applications using the React technology stack. It aims to accelerate UI development and improve developer experience with the following features:

    • 80+ High-quality components: Covers mainstream mobile scenarios.
    • Visual Standard: Based on the JD APP 16.0 visual specification.
    • Tree Shaking: Supports on-demand (按需) component importing.
    • TypeScript Support: Full type definitions included.
    • SSR Support: Compatible with Next.js for server-side rendering.
    • Customizable Themes: Supports theme customization.
    • Internationalization: Built-in i18n support.
    • Stability: Over 85% unit test coverage.
    • Design Resources: Sketch design files are provided.

  3. Use the Badge component

    feat_v4.x

    The Badge component displays a red dot, a number, or text in the top-right corner of an icon or text to indicate new content or pending information.

    Common use cases include:

    • Basic usage: Showing a number or character.
    • Max Size: Limiting the displayed number (e.g., showing '99+' instead of '100').
    • Dot mode: Displaying a simple dot instead of text/numbers.
    • Customization: Changing colors, content, CSS position, or fill modes (solid vs outline).

  4. Use @nutui/nutui-react-taro-cli for AI Coding

    feat_v4.x

    The @nutui/nutui-react-taro-cli is an offline knowledge query CLI designed for AI coding assistants (like Claude Code, Cursor, or Copilot). It provides structured, offline access to NutUI React Taro component Props, documentation, Taro-specific examples, and Design Tokens. This helps prevent AI 'hallucinations' by allowing agents to query actual API specifications instead of guessing.

    Key Features:

    • Fully Offline: Metadata and docs are bundled with the package for millisecond-level local queries.
    • Structured Output: Supports --format json for reliable parsing by AI agents.
    • Taro-Specific: Data is sourced from Taro-specific documentation (doc.taro.md / demos/taro), which may differ from H5 versions.

    Note: For H5 scenarios, use @nutui/nutui-react-cli instead.

    # Run without installation (Recommended)
npx -y @nutui/nutui-react-taro-cli list
npx -y @nutui/nutui-react-taro-cli info Button

# Or install globally
npm i -g @nutui/nutui-react-taro-cli
nutui-react-taro info Button --format json

  10. Configure Popover location

    feat_v4.x

    Use the location property to control where the popover bubble appears relative to the target element.

    Note: The location type was updated in version 3.x. Refer to the FullPosition type in the project's type definitions for the complete list of valid values.

    Available positions:

    • top (Top middle)
    • left (Left middle)
    • right (Right middle)
    • bottom (Bottom middle)
    • top-left (Top left)
    • top-right (Top Right)
    • left-top (Left Top)
    • left-bottom (Left Bottom)
    • right-top (Right Top)
    • right-bottom (Right Bottom)
    • bottom-left (Bottom Left)
    • bottom-right (Bottom Right)

  11. Choose the correct NutUI React build version

    feat_v4.x

    NutUI React provides different build versions depending on your development environment and module loading strategy:

    • ES Version (nutui.es.js): Recommended if you are using modern build tools like Webpack or Vite, or an AMD environment. This version supports Tree Shaking.
    • UMD Version (nutui.umd.js): Recommended for non-module environments, such as when referencing the library directly via a <script> tag.

  12. Implement Vertical and Horizontal Virtual Lists

    feat_v4.x

    The VirtualList component supports different layout patterns:

    • Vertical Fixed Height: Standard vertical list where all items have the same height.
    • Vertical Variable Height & Infinite Scroll: Vertical list where items have different heights, using onScroll to trigger more data loading.
    • Horizontal Fixed Width: Horizontal list where all items have the same width.
    • Horizontal Variable Width & Infinite Scroll: Horizontal list with varying item widths and infinite scrolling capabilities.