alibaba-fusion/next

★ 4,679TypeScriptAudience · developerComplexity · 3/5LicenseSetup · easy

Mindmap

mindmap
  root((fusion-next))
    What it does
      Pre-built React components
      Designer-developer workflow
      Custom theme system
      Internationalization
    Tech Stack
      TypeScript
      React
      Moment.js
      npm
    Components
      Buttons forms tables
      Date pickers dialogs
    Audience
      Business dashboards
      Admin tools
      Enterprise apps
    Setup
      npm install
      Theme package
      Gitpod shortcut

mindmap root((fusion-next)) What it does Pre-built React components Designer-developer workflow Custom theme system Internationalization Tech Stack TypeScript React Moment.js npm Components Buttons forms tables Date pickers dialogs Audience Business dashboards Admin tools Enterprise apps Setup npm install Theme package Gitpod shortcut

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Build an admin dashboard or internal business tool using ready-made React components without designing them from scratch.

USE CASE 2

Apply a designer's Sketch theme to a React app so colors, spacing, and typography update automatically without manual coding.

USE CASE 3

Add multi-language support to a React business app using the library's built-in internationalization features.

Tech stack

TypeScriptReactMoment.jsnpm

Getting it running

Difficulty · easy Time to first run · 30min

Date and time components require Moment.js as a separate dependency.

Use freely for any purpose, including commercial use, as long as you keep the copyright notice.

In plain English

Alibaba Fusion Next is a component library for building business web applications, created by Alibaba. A component library is a collection of pre-built interface elements, such as buttons, forms, date pickers, and tables, that developers can assemble into a web application rather than building each piece from scratch. This one is aimed at internal business tools and admin dashboards, the kind of interfaces used behind the scenes at companies. The library is designed around a collaboration workflow between designers and developers. Designers use a plugin for the design tool Sketch to customize how components look, including colors, spacing, and typography. Those customizations get published as a theme package on Alibaba's Fusion Design platform. Developers then install that theme package in their project, and the components automatically reflect the designer's choices without any extra code changes. The idea is to avoid the back-and-forth of developers trying to match a visual design by eye. On the technical side, the library is built for React and requires React version 16 or newer. It supports all major browsers including Internet Explorer 9 and above. You install it via npm and import individual components as needed. There is also an option to load it directly in a web page through script tags without a build process. Date and time components depend on a separate library called Moment.js. The README covers installation, importing components, using custom themes, and internationalization for non-English interfaces. Contributions are welcome, and the project includes a button to open the development environment directly in Gitpod without any local setup. Community discussion happens through a Dingtalk group. The license is MIT.

Copy-paste prompts

Prompt 1

How do I install Alibaba Fusion Next and apply a custom theme package from the Fusion Design platform in my React project?

Prompt 2

Show me how to use the Table and DatePicker components from Fusion Next to build a simple admin data view.

Prompt 3

How do I configure Fusion Next for Japanese or Chinese localization in my React app?

Prompt 4

Can I load Fusion Next via script tags without a build tool, and if so, how?

Open on GitHub → Explain another repo

← alibaba-fusion on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.