Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/arco-design/arco-design
A comprehensive React UI components library based on Arco Design
https://github.com/arco-design/arco-design
arco-design component-library customize design-system react ui ui-library
Last synced: 4 days ago
JSON representation
A comprehensive React UI components library based on Arco Design
- Host: GitHub
- URL: https://github.com/arco-design/arco-design
- Owner: arco-design
- License: mit
- Created: 2021-10-25T03:41:14.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2024-11-22T03:19:38.000Z (21 days ago)
- Last Synced: 2024-11-24T22:33:06.152Z (19 days ago)
- Topics: arco-design, component-library, customize, design-system, react, ui, ui-library
- Language: TypeScript
- Homepage: https://arco.design
- Size: 17.4 MB
- Stars: 4,964
- Watchers: 31
- Forks: 666
- Open Issues: 288
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome - arco-design/arco-design - A comprehensive React UI components library based on Arco Design (TypeScript)
- awesome-react - arco-design - A comprehensive React UI components library.  (UI Frameworks / style)
- awesome-arco - React
- StarryDivineSky - arco-design/arco-design
README
Arco Design
A comprehensive React UI components library based on the [Arco Design](https://arco.design/) system.
[](https://github.com/arco-design/arco-design/blob/main/LICENSE)
[](https://github.com/arco-design/awesome-arco)
English | [简体中文](./README.zh-CN.md)
https://user-images.githubusercontent.com/19399269/141435899-e453cf75-d50f-4549-b8d0-37daebe46c36.mp4
# Features
## Comprehensive
With more than 60 crafted components that you can use out of the box.
## Customizable theme
Extensive design tokens can be customized to build your own theme. Two ways
of customization are supported:
* [With less-loader](https://arco.design/react/docs/theme)
* [Design Lab](https://arco.design/themes) - Recommended!
## Reusable custom materials
[Material market](https://arco.design/material/) provides a one-stop solution for materials management. Reuse customized modules to make a breakthrough in efficiency.
## TypeScript friendly
All components are written in TypeScript so it's type friendly.
# Installation
Available as an [npm package](https://www.npmjs.com/package/@arco-design/web-react)
```bash
// with npm
npm install @arco-design/web-react
// with yarn
yarn add @arco-design/web-react
```
# Examples
```typescript
import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from '@arco-design/web-react';
import '@arco-design/web-react/dist/css/arco.css';
function App() {
return (
Hello World
);
}
ReactDOM.render(, document.getElementById('app'));
```
# Useful Links
* [Documentation website](https://arco.design/)
* [Components documentation](https://arco.design/react/docs/overview)
* [Dark mode](https://arco.design/react/docs/dark)
* [Theme customization](https://arco.design/react/docs/theme)
* [Figma component library](https://www.figma.com/file/M66cTiLXHa4SVyZIlfY5Pb/arco-Design-System?node-id=7945%3A44563)
* [Awesome Arco](https://github.com/arco-design/awesome-arco)
* [Bundler Plugins](https://github.com/arco-design/arco-plugins)
# Ecosystems
| Project | Description |
| --------------------- | ------------------------------------------------------- |
| [Vue Component Library] | A comprehensive Vue UI components library based on the [Arco Design](https://arco.design/) system |
| [Design Lab] | A platform to create and manage your themes with ease. |
| [Material Market] | A platform that provides massive high-quality customized materials to greatly boost development efficiency. |
| [Icon Box] | One-stop platform to manage your icons. |
| [Arco Pro] | A solution to quickly building applications from scratch. |
[Vue Component Library]: https://arco.design/vue/docs/start
[Design Lab]: https://arco.design/themes
[Material Market]: https://arco.design/material
[Icon Box]: https://arco.design/iconbox
[Arco Pro]: https://arco.design/pro/
# Browser Support
| [
](http://godban.github.io/browsers-support-badges/)
IE / Edge | [
](http://godban.github.io/browsers-support-badges/)
Firefox | [
](http://godban.github.io/browsers-support-badges/)
Chrome | [
](http://godban.github.io/browsers-support-badges/)
Safari | [
](http://godban.github.io/browsers-support-badges/)
Opera | [
](http://godban.github.io/browsers-support-badges/)
Electron |
| --------- | --------- | --------- | --------- | --------- | --------- |
| Edge 16| 31| 49 | 31 | 36 | last 2 versions |
# Contributing
Developers interested in contributing should read the [Code of Conduct](./CODE_OF_CONDUCT.md) and the [Contributing Guide](./CONTRIBUTING.md).
Thank you to all the people who already contributed to ArcoDesign!
# License
This project is [MIT licensed](./LICENSE).