next
Fusion Next (@alifd/next) is Alibaba's enterprise-class React UI component library built around a design-system collaboration workflow, letting designers customize component themes and ship them as npm packages that developers consume without manual UI rework.
Embed badge
[](https://opensources.dev/resource/next)MITPermissive — free to use in commercial and proprietary software, with attribution.View license →
Production readiness
5/5- Actively maintainedCommits in the last 6 months
- No known vulnerabilitiesNo OSV advisories
- Clear, usable licenseMIT (permissive)
- Proven adoptionWidely used
- Has documentationDocumentation indexed
npm install @alifd/nextOur analysis
A React-based enterprise UI component library from Alibaba's Fusion team, designed to power back-office/admin systems with a strong focus on designer-developer collaboration through customizable, npm-distributable theme packages.
When to use next
Good for internal/enterprise admin dashboards where you need a complete component set and want designers to control theming via the Fusion Design platform, releasing themes that developers consume directly without rebuilding UI. Suitable for teams already in the Alibaba/Fusion tooling ecosystem (Fusion Cool, IceWorks).
When not to
If you want the largest community and English-language ecosystem, Ant Design or MUI are safer bets. Avoid for greenfield apps wanting a modern, lightweight, or headless/unstyled approach, or for non-React stacks. The dependency on moment (a deprecated library) and React 16 baseline are concerns for new projects.
Strengths
- Comprehensive component coverage tailored to enterprise back-office needs
- Tight theme-package workflow that decouples visual design from code, reducing designer-developer review churn
- TypeScript support and standalone bundle (UMD via unpkg) for non-bundler usage
- Backed by Alibaba with the Fusion Design collaboration platform
Trade-offs
- Documentation and community are heavily oriented toward Chinese-speaking users
- Relies on moment.js (now in maintenance mode) for date components
- React 16 minimum and design coupling to the Fusion ecosystem can be limiting
- Smaller English-speaking adoption and ecosystem compared to Ant Design or MUI
Maturity
A mature, actively maintained project (~4.7k stars) used in production within Alibaba's ecosystem, with CI, codecov, and a versioned npm package. Adoption outside China is modest relative to peers like Ant Design.
English | 简体中文
You can customize your own DesignSystem via Collaboration Platform.💖 Designers will receive design materials by Fusion Cool - an easy to use plugin on sketch. Developers will get code fragment on IceWorks. At the same time, the consistency between code and visual manuscript is guaranteed. 😍
🤔 Why use
@alifd/next usually used with Fusion Design to improving designer-developer collaboration and development efficiency. Designer can customize the UI of components and release an npm theme package. Developer can use this theme package directly, and don't need to care about the UI refactoring. It saves the workload of reductive degree review repeatedly with designers, and greatly improves the development efficiency.
💻 Browser Compatibility
🚀 Quick Start
🛠 Install
1.Use NPM ( Recommend )
npm install @alifd/next --save
2.Import in Browser
Use the script and link tags in the browser to directly import the file and use the global variable Next. We provide files such as next.js/next.min.js and next.css/next.min.css in the @alifd/next/dist directory in the npm package, or via unpkg Download it.
<link rel="stylesheet" href="https://unpkg.com/@alifd/next/dist/next.css" />
<script src="https://unpkg.com/@alifd/next/dist/next.js"></script>
// The above ways import latest @alifd/next, we recommend you specify version.
<script src="https://unpkg.com/@alifd/next@1.8.6/dist/next.min.js"></script>
// Or import as your own static resource
<script src="../build/public/@alifd/next.js"></script>
☔️ Dependencies
@alifd/nextis based onreact@16development and is currently not compatible with versions belowreact@16. react/react-dom is used as peerDependencies, which requires the user to manually install or import it.@alifd/nextuse moment library to implement date-time related component. moment is also used as peerDependencies, which requires the user to manually install or import it.
🎯 Import
Import All
import '@alifd/next/dist/next.css';
// import '@alifd/next/index.scss';
import { Button, Input } from '@alifd/next';
Import module with plugin
1. Import module manually
import Button from '@alifd/next/lib/button';
import '@alifd/next/lib/button/style';
2. Use with babel-plugin-import ( Recommend )
// webpack babel loader option or .babelrc
{
// ...
plugins: [
[
'import',
{
libraryName: '@alifd/next',
style: true,
},
],
];
}
It will transform code as below
import { Button } from '@alifd/next';
To
import Button from '@alifd/next/lib/button';
import '@alifd/next/lib/button/style';
🔗 Advanced
🌈 Contributing
Use Gitpod, a free online dev environment for GitHub.
Or clone locally:
📣 Join Group
Use Dingtalk App scan the Qrcode to join in Dingtalk Group :