# arco-design/arco-design-vue

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/arco-design-arco-design-vue).**

3,054 stars · 602 forks · TypeScript · mit

## Links

- GitHub: https://github.com/arco-design/arco-design-vue
- Homepage: https://arco.design/vue
- awesome-repositories: https://awesome-repositories.com/repository/arco-design-arco-design-vue.md

## Topics

`arco-design` `component-library` `components` `design-system` `ui` `vue` `vue3` `vuejs`

## Description

Arco Design Vue is a Vue component library and design token system used to build consistent user interfaces. It provides a collection of pre-made visual components that handle common layout and interaction patterns.

The framework features a tree-shakable architecture, allowing the removal of unused components and styles to reduce the final application bundle size. It utilizes a configuration framework based on JSON to customize colors, spacing, and visual styles across a project.

The library covers broad capabilities for responsive web design and custom design system creation. It employs a token-driven approach to ensure consistent spacing and coloring across all interface elements.

## Tags

### Web Development

- [Vue Component Libraries](https://awesome-repositories.com/f/web-development/vue-component-wrappers/vue-component-libraries.md) — Provides a comprehensive collection of reusable Vue components as the foundational building blocks for user interfaces.
- [Frontend Performance Optimization](https://awesome-repositories.com/f/web-development/frontend-performance-optimization.md) — Optimizes frontend performance by minimizing the amount of shipped code through dead-code elimination.

### Software Engineering & Architecture

- [Tree-Shakable Architectures](https://awesome-repositories.com/f/software-engineering-architecture/tree-shakable-architectures.md) — Implements a modular architecture that allows bundlers to prune unused components and styles to reduce bundle size.
- [Tree-Shaking Module Distributions](https://awesome-repositories.com/f/software-engineering-architecture/tree-shaking-module-distributions.md) — Exports components as independent modules to enable build tools to remove unused code from the final bundle.

### User Interface & Experience

- [Design Systems](https://awesome-repositories.com/f/user-interface-experience/design-systems.md) — Enables the creation of branded visual identities through a standardized framework of shared design tokens.
- [Design Token Systems](https://awesome-repositories.com/f/user-interface-experience/design-token-systems.md) — Employs a framework for managing design properties through hierarchical variables to ensure consistent spacing and coloring.
- [User Interface Components](https://awesome-repositories.com/f/user-interface-experience/user-interface-components.md) — Provides reusable UI elements and layout patterns to build consistent and professional web pages. ([source](https://cdn.jsdelivr.net/gh/arco-design/arco-design-vue@main/README.md))
- [Component Slot Systems](https://awesome-repositories.com/f/user-interface-experience/component-slot-systems.md) — Provides a slot-based system for injecting custom content into predefined structural layouts of UI components.
- [CSS Variable Theming](https://awesome-repositories.com/f/user-interface-experience/css-variable-theming.md) — Implements a system that maps design tokens to native CSS variables for dynamic visual styling.
- [Responsive Design](https://awesome-repositories.com/f/user-interface-experience/responsive-design.md) — Includes tools and techniques for creating adaptive layouts that maintain consistency across different device screen sizes.
- [Visual Theme Configurations](https://awesome-repositories.com/f/user-interface-experience/visual-theme-configurations.md) — Allows customization of colors, spacing, and border radii via standardized JSON configuration files. ([source](https://cdn.jsdelivr.net/gh/arco-design/arco-design-vue@main/README.md))

### Development Tools & Productivity

- [Bundle Size Optimization](https://awesome-repositories.com/f/development-tools-productivity/bundle-size-optimization.md) — Reduces the final application bundle size by removing unused components, styles, and icons during the build process. ([source](https://arco.design/react/docs/start))