Skip to content
๐Ÿฆ A configurable component library for web built on React.
JavaScript CSS HTML
Branch: master
Clone or download

Latest commit

Latest commit 710efdd Mar 31, 2020


Type Name Latest commit message Commit time
Failed to load latest commit information.
.github chore(*): add weekly-diagest configuration Apr 29, 2019
docs chore(*): Release-1.19.22 Mar 31, 2020
scripts docs(Upload): update demo to support IE/Edge Feb 25, 2020
site docs(*): add basic icon oss path (#1692) Mar 18, 2020
src chore(*): enhance robotness (#1726) Mar 31, 2020
test test(DatePicker): day may be changed after page down and up (#1727) Mar 31, 2020
types chore(*): Release-1.19.20 Mar 26, 2020
.commitlintrc typescript(Upload): correct Upload.Dragger Jun 4, 2019
.editorconfig style(*): prettier js files Mar 4, 2019
.eslintignore chore(*): scripts of adding new component Nov 6, 2019
.eslintrc chore(*): add eslint Apr 4, 2019
.fusion feat(List): Add List Component Dec 2, 2019
.gitignore chore(*): ignore next/ Apr 9, 2019
.prettierignore chore(*): scripts of adding new component Nov 6, 2019
.prettierrc feat(*): add file types/ to customize index.d.ts May 16, 2019
.travis.yml chore(*): a11y unit test script Mar 13, 2019 chore(*): Release-1.19.22 Mar 31, 2020 chore(*): Release-1.19.22 Mar 31, 2020
LICENSE Update License Jan 15, 2019 docs(*): Readme word spelling mistake (#1181) Sep 26, 2019 test(*): a11y refactoring and documentation Feb 26, 2019
a11y.eslintrc style(*): eslint a11y warnings Apr 1, 2019
index-noreset.scss chore(*): Release-1.19.4 Dec 4, 2019
index.js chore(*): Release-1.19.22 Mar 31, 2020
index.scss chore(*): Init project Oct 15, 2018
package.json chore(*): Release-1.19.22 Mar 31, 2020
reset.scss chore(*): Init project Oct 15, 2018
tsconfig.json chore(*): Release-1.19.0 Nov 25, 2019
variables.scss chore(*): Release-1.19.4 Dec 4, 2019

English | ็ฎ€ไฝ“ไธญๆ–‡


An enterprise-class UI solution for backend system, aimed at settling the problems like cooperation between designers and front-developers, consistency of product experience and development efficiency.

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

Chrome Firefox Edge IE Safari Opera UC
โœ” โœ” โœ” 9+ โœ” โœ” โœ” โœ”

๐Ÿš€ 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="" />

<script src=""></script>

// The above ways import latest @alifd/next, we recommend you specify version.
<script src=""></script>

// Or import as your own static resource
<script src="../build/public/@alifd/next.js"></script>

โ˜”๏ธ Dependencies

  • @alifd/next is based on react@16 development and is currently not compatible with versions below react@16. react/react-dom is used as peerDependencies, which requires the user to manually install or import it.
  • @alifd/next use 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: [
                libraryName: '@alifd/next',
                style: true,

It will transform code as below

import { Button } from '@alifd/next';


import Button from '@alifd/next/lib/button';
import '@alifd/next/lib/button/style';

๐Ÿ”— Advanced

๐ŸŒˆ Contributing

๐Ÿ“ฃ Join Group

Use Dingtalk App scan the Qrcode to join in Dingtalk Group :

Join the chat at dingtalk

You canโ€™t perform that action at this time.