{"id":13457760,"url":"https://github.com/alibaba-fusion/next","last_synced_at":"2025-05-14T08:05:16.816Z","repository":{"id":36981420,"uuid":"138132664","full_name":"alibaba-fusion/next","owner":"alibaba-fusion","description":"🦍 A configurable component library for web built on React. ","archived":false,"fork":false,"pushed_at":"2025-05-05T17:24:18.000Z","size":624196,"stargazers_count":4635,"open_issues_count":271,"forks_count":599,"subscribers_count":71,"default_branch":"master","last_synced_at":"2025-05-14T08:04:25.474Z","etag":null,"topics":["component","design-system","fusion","fusion-design","next","react","ui"],"latest_commit_sha":null,"homepage":"https://fusion.design","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alibaba-fusion.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2018-06-21T07:06:27.000Z","updated_at":"2025-05-12T16:00:19.000Z","dependencies_parsed_at":"2023-01-17T11:00:34.728Z","dependency_job_id":"d0890f29-7e5c-4b55-a3b2-2478fc1ba079","html_url":"https://github.com/alibaba-fusion/next","commit_stats":{"total_commits":3669,"total_committers":184,"mean_commits":"19.940217391304348","dds":0.6587626056146089,"last_synced_commit":"84eb9767d644c7280c73deb2a3198c58a70d17ad"},"previous_names":[],"tags_count":867,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alibaba-fusion%2Fnext","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alibaba-fusion%2Fnext/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alibaba-fusion%2Fnext/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alibaba-fusion%2Fnext/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alibaba-fusion","download_url":"https://codeload.github.com/alibaba-fusion/next/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254101588,"owners_count":22014907,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component","design-system","fusion","fusion-design","next","react","ui"],"created_at":"2024-07-31T09:00:35.811Z","updated_at":"2025-05-14T08:05:16.796Z","avatar_url":"https://github.com/alibaba-fusion.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","JavaScript","七、GitHub 优质仓库精选"],"sub_categories":["React"],"readme":"English | [简体中文](./README.zh-cn.md)\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://fusion.design/\"\u003e\n    \u003cimg alt=\"Fusion\" src=\"https://img.alicdn.com/tfs/TB1YsoiHVzqK1RjSZFCXXbbxVXa-159-99.svg\" width=\"200\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003eAn 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.\u003c/p\u003e\n\n---\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.org/package/@alifd/next\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/@alifd/next.svg\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.org/package/@alifd/next\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/@alifd/next.svg\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://codecov.io/gh/alibaba-fusion/next\"\u003e\u003cimg src=\"https://codecov.io/gh/alibaba-fusion/next/branch/master/graph/badge.svg?token=FSufKVDhmT\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://travis-ci.com/alibaba-fusion/next\"\u003e\u003cimg src=\"https://travis-ci.com/alibaba-fusion/next.svg?token=KAYresHL1UPaaLzUYyx6\u0026branch=master\"\u003e\u003c/a\u003e\n  \u003ca href=\"http://makeapullrequest.com\"\u003e\u003cimg src=\"https://img.shields.io/badge/PRs-welcome-brightgreen.svg\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/alibaba-fusion/next/blob/master/LICENSE\"\u003e\u003cimg src=\"https://img.shields.io/badge/license-MIT-brightgreen.svg\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://opensumi.run/ide/alibaba-fusion/next\"\u003e\u003cimg src=\"https://custom-icon-badges.demolab.com/badge/opensumi-run-blue.svg?logo=opensumi\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nYou can customize your own DesignSystem via [Collaboration Platform](https://fusion.design).💖 Designers will receive design materials by [Fusion Cool](https://fusion.design/tool?from=github) - an easy to use plugin on sketch. Developers will get code fragment on [IceWorks](https://fusion.design/tool?from=github). At the same time, the consistency between code and visual manuscript is guaranteed. 😍\n\n![howtouse](https://img.alicdn.com/tfs/TB1dF3BH4TpK1RjSZFMXXbG_VXa-1280-720.gif)\n\n# 🤔 Why use\n\n`@alifd/next` usually used with [Fusion Design](https://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.\n\n![](https://img.alicdn.com/tfs/TB1gia.HkvoK1RjSZFDXXXY3pXa-1286-490.png)\n\n# 💻 Browser Compatibility\n\n| ![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![Edge](https://raw.github.com/alrra/browser-logos/master/src/edge/edge_48x48.png) | ![IE](https://raw.github.com/alrra/browser-logos/master/src/archive/internet-explorer_9-11/internet-explorer_9-11_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/src/safari/safari_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/src/opera/opera_48x48.png) | ![UC](https://raw.github.com/alrra/browser-logos/master/src/uc/uc_48x48.png) |\n| :--------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------: | :--------------------------------------------------------------------------: |\n|                                            ✔                                             |                                              ✔                                              |                                         ✔                                          |                                                             9+ ✔                                                             |                                            ✔                                             |                                           ✔                                           |                                      ✔                                       |\n\n# 🚀 Quick Start\n\n## 🛠 Install\n\n### 1.Use NPM ( Recommend )\n\n```\nnpm install @alifd/next --save\n```\n\n### 2.Import in Browser\n\nUse 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](https://unpkg.com/@alifd/next/dist/) Download it.\n\n```html\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/@alifd/next/dist/next.css\" /\u003e\n\n\u003cscript src=\"https://unpkg.com/@alifd/next/dist/next.js\"\u003e\u003c/script\u003e\n\n// The above ways import latest @alifd/next, we recommend you specify version.\n\u003cscript src=\"https://unpkg.com/@alifd/next@1.8.6/dist/next.min.js\"\u003e\u003c/script\u003e\n\n// Or import as your own static resource\n\u003cscript src=\"../build/public/@alifd/next.js\"\u003e\u003c/script\u003e\n```\n\n## ☔️ Dependencies\n\n-   `@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.\n-   `@alifd/next` use [moment](https://github.com/moment/moment) library to implement date-time related component. moment is also used as peerDependencies, which requires the user to manually install or import it.\n\n## 🎯 Import\n\n### Import All\n\n```js\nimport '@alifd/next/dist/next.css';\n// import '@alifd/next/index.scss';\n\nimport { Button, Input } from '@alifd/next';\n```\n\n### Import module with plugin\n\n#### 1. Import module manually\n\n```js\nimport Button from '@alifd/next/lib/button';\nimport '@alifd/next/lib/button/style';\n```\n\n#### 2. Use with [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) ( Recommend )\n\n```js\n// webpack babel loader option or .babelrc\n{\n    // ...\n    plugins: [\n        [\n            'import',\n            {\n                libraryName: '@alifd/next',\n                style: true,\n            },\n        ],\n    ];\n}\n```\n\nIt will transform code as below\n\n```js\nimport { Button } from '@alifd/next';\n```\n\nTo\n\n```js\nimport Button from '@alifd/next/lib/button';\nimport '@alifd/next/lib/button/style';\n```\n\n## 🔗 Advanced\n\n-   [Use with Theme Package](./site/en-us/theme.md)\n-   [Internationalization](./site/en-us/i18n.md)\n-   [Deploy Font File](./site/en-us/font-deploy.md)\n\n## 🌈 Contributing\n\nUse Gitpod, a free online dev environment for GitHub.\n\n[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/alibaba-fusion/next)\n\nOr clone locally:\n\n-   [Contributing](./site/en-us/contributing.md)\n\n## 📣 Join Group\n\nUse [Dingtalk App](https://www.dingtalk.com/en) scan the Qrcode to join in _Dingtalk Group_ :\n\u003cimg alt=\"Join the chat at dingtalk\" src=\"https://user-images.githubusercontent.com/90443688/220082319-75cc7d88-b11d-4c07-9b40-b8a03ab65858.png\" width=\"300\"\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falibaba-fusion%2Fnext","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falibaba-fusion%2Fnext","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falibaba-fusion%2Fnext/lists"}