Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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: 6 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-10-25T08:53:25.000Z (10 days ago)
Last Synced: 2024-10-25T21:14:41.558Z (9 days ago)
Topics: arco-design, component-library, customize, design-system, react, ui, ui-library
Language: TypeScript
Homepage: https://arco.design
Size: 17 MB
Stars: 4,919
Watchers: 31
Forks: 660
Open Issues: 277
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. ![](https://img.shields.io/github/stars/arco-design/arco-design.svg?style=social&label=Star) (UI Frameworks / style)
awesome-arco - React
awesome - arco-design/arco-design - A comprehensive React UI components library based on Arco Design (TypeScript)
StarryDivineSky - arco-design/arco-design

README

        


  

    

  





  Arco Design





A comprehensive React UI components library based on the [Arco Design](https://arco.design/) system.

[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/arco-design/arco-design/blob/main/LICENSE)

[![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](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).