How to Build an Enterprise‑Level UI Component Library: Principles and Practices

In many product development processes, the lack of unified standards and a standardized system leads to high communication costs, gaps between design and implementation, low code reuse, and reduced user experience, especially as product scale grows.

Problem

Recognition: Product, development, and design teams each have their own solutions for the same requirement, making consensus difficult without unified constraints.

Efficiency: Design efficiency is low, and the cost of maintaining interaction prototypes and communicating across teams is high, creating an unprofessional impression.

Quality: These limitations ultimately affect product quality and user experience.

Solution

Standardized component libraries act like LEGO blocks: many small pieces can be combined to create a wide variety of components and page structures, providing a consistent, reusable solution for design problems.

What Is a Component Library?

A component library is part of a design system that offers a collection of reusable UI components for designers and front‑end engineers. Components can exist as single units or be combined into larger structures, and their usage must follow a set of standards to ensure consistency across multiple business scenarios.

Value of a Component Library

Consistency: Guarantees a uniform user experience across different business systems within a large product.

Designer Efficiency: Reduces repetitive work, allowing designers to focus on solving real user problems.

Product‑R&D Efficiency: Standardized components lower communication overhead between design and development.

Design Specification Consolidation: Component usage becomes part of the interaction and visual guidelines, streamlining theme, style, and layout decisions.

How to Build an Enterprise‑Level UI Component Library

Design Principles

Simplicity: Add no unnecessary elements; include only what users truly need.

Directness: Provide clear feedback that matches user expectations.

Elegance: Deliver a refined, pleasant interaction experience.

Adaptability: Ensure the solution can be extended and adapted to various enterprise scenarios.

Color Guidelines

Primary Color: Blue, conveying intelligence, trust, and technological innovation.

Secondary Colors: Additional blues for general actions, red for warnings and errors, yellow for alerts, and green for success and safety.

Neutral Colors: Black‑gray tones for text, backgrounds, and borders to establish hierarchy.

Layout Guidelines

To handle information density in multi‑business products, a 24‑column grid system (based on a 12‑column foundation) is used to increase layout similarity and improve user experience.

Atomic Design Theory

Inspired by Brad Frost, atomic design breaks UI into atoms (basic elements), molecules (combinations of atoms), and organisms (complex components), helping teams build scalable interfaces.

Component Scope and Classification

Components are divided into two main categories:

Universal Components: Widely applicable, high‑frequency reusable components without business logic (e.g., navigation, buttons, toast, modal).

Business Components: Contain specific business attributes and are usually limited to one or two systems (e.g., consultation classification in NetEase Qiyu).

Universal Component Sub‑Categories

Basic Components: Buttons, icons, etc., used as building blocks for other components.

Navigation: Menus, tabs, breadcrumbs that help users locate pages.

Data Entry: Input fields, selectors, forms for user data input.

Data Display: Charts, tables, cards that present information.

Operation Feedback: Dialogs, alerts, toasts that provide system responses.

FishDesign Examples in NetEase Qiyu

Navigation Component

Table Component

Modal Component

Step Component

Conclusion

The greatest value of a component library lies in boosting the efficiency of the entire product‑R&D team, ensuring design quality, and enhancing overall user experience. Building such a library involves clarifying problems, analyzing competitors, defining design patterns, selecting minimal elements, categorizing components, and continuously maintaining and evolving the library over time.