Skip to content
๐Ÿฆ A configurable component library for web built on React.
JavaScript CSS HTML
Branch: master
Clone or download
Latest commit 93554e5 Nov 12, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github chore(*): add weekly-diagest configuration Apr 29, 2019
docs fix(Cascader): disable can`t change checked Nov 11, 2019
scripts chore(*): add lib/index.d.ts of field/shell/notification Oct 28, 2019
site fix(Search): change the way of using sass method(color calculation) Aug 20, 2019
src Merge pull request #1341 from myronliu347/master Nov 12, 2019
test Merge pull request #1341 from myronliu347/master Nov 12, 2019
types Merge pull request #1332 from youluna/fix-bugfixs Nov 8, 2019
.commitlintrc typescript(Upload): correct Upload.Dragger Jun 4, 2019
.editorconfig style(*): prettier js files Mar 4, 2019
.eslintignore Merge branch 'master' into feature/rtl Nov 23, 2018
.eslintrc chore(*): add eslint Apr 4, 2019
.fusion fix(Icon): correct eye/eye-close's width Sep 29, 2019
.gitignore chore(*): ignore next/ Apr 9, 2019
.prettierignore fix(Collapse): fix nested collapse icon Mar 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.18.15 Nov 12, 2019 chore(*): Release-1.18.15 Nov 12, 2019
LICENSE Update License Jan 15, 2019 docs(*): Readme word spelling mistake (#1181) Sep 26, 2019 chore(*): chagne readme May 24, 2019 test(*): a11y refactoring and documentation Feb 26, 2019
a11y.eslintrc style(*): eslint a11y warnings Apr 1, 2019
index-noreset.scss feat(Shell): add Shell (#1175) Sep 26, 2019
index-with-locales.js chore(*): Init project Oct 15, 2018
index.js chore(*): Release-1.18.15 Nov 12, 2019
index.scss chore(*): Init project Oct 15, 2018
package.json chore(*): Release-1.18.15 Nov 12, 2019
reset.scss chore(*): Init project Oct 15, 2018
tsconfig.json typescript(*): fix d.ts and remove some warning Aug 12, 2019
variables.scss chore(*): Release-1.18.1 Sep 26, 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.