Arco Design
A comprehensive React UI components library based on Arco Design
README
Arco Design
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:
Design Lab - Recommended!
Reusable custom materials
Material market 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
- ``` sh
- // 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 (
- <Button type='secondary'>
- Hello World
- </Button>
- );
- }
- ReactDOM.render(<App />, document.getElementById('app'));
- ```
Useful Links
Ecosystems
Project | Description |
---|---|
--------------------- | ------------------------------------------------------- |
[Vue | A |
[Design | A |
[Material | A |
[Icon | One-stop |
[Arco | A |
[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
[ | [ | [ | [ | [ | [ |
---|---|---|---|---|---|
--------- | --------- | --------- | --------- | --------- | --------- |
Edge | 31| | 31 | 36 | last |
Contributing
Developers interested in contributing should read the Code of Conduct and the Contributing Guide.
Thank you to all the people who already contributed to ArcoDesign!
License
This project is MIT licensed.