Layui 3 introduces a component‑library approach for backend and full‑stack developers, detailing its project positioning, native HTML/CSS/JS stack, dual component models, directory layout, coding conventions, naming rules, theme colors, sizing, and contribution guidelines.
Ant Design 6.0 and Ant Design X 2.0 were officially released at SEE Conf 2025, introducing smooth migration from v5, raising the minimum React version to 18, adopting pure CSS‑Variables, enabling React Compiler in the build, revamping component semantics, dropping IE support, and adding several new components such as Masonry, enhanced Tooltip, spinner‑style InputNumber, draggable Drawer, and blur‑mask overlays, with a clear upgrade guide and future roadmap.
The article introduces easy.ui's honeycomb architecture that splits a monolithic frontend into an Express gateway, independent Nuxt sub‑projects, and a shared component library, detailing core code, development workflow, tech choices, pitfalls, and a future roadmap.
This article explains how creating a custom frontend component library in small companies often leads to resource waste, maintenance nightmares, technical debt, and production failures, and recommends using mature open‑source libraries with selective customization instead.
This guide walks you through creating, loading, editing, and using Axure RP component libraries—showing how to package complex widgets like image carousels into reusable assets that can be dragged onto any prototype with a single click.
This guide provides a verified registration code for Axure RP 11, detailed instructions for applying a Chinese language pack on Windows and macOS, and tips for re‑importing component libraries after upgrading, ensuring a smooth setup for UI prototyping.
Omni-UI is an open‑source ArkUI component library for OpenHarmony that provides over 25 ready‑to‑use UI components, theme switching, and simple integration via ohpm, aiming to boost developer productivity by more than 30% in mobile real‑estate applications.
This article shares a practical methodology for creating high‑quality design components, outlining how to make them understandable, usable, and maintainable through multi‑layer nesting, flexible‑yet‑convergent construction, systematic variant mapping, and data‑driven maintenance, with a focus on Figma‑based workflows.
This article introduces Onionl-UI, a newly created Vue 3 component library, describing its motivation, current status, technology choices such as Vite and UnoCSS, directory layout, build configuration, component implementation, and unit testing with Vitest, offering a practical walkthrough for frontend engineers.
The article outlines the background, goals, construction process, and comprehensive showcase of SF Design Mobile, a cross‑platform component library built by SF Technology, emphasizing design principles, the integration of Design Tokens, component categories, public platform, application examples, current usage, feedback, and future plans.
This Vue.js and Element UI course teaches fundamental concepts, component development, state management, routing, and extensive Element UI component usage, enabling learners to build responsive, interactive modern web applications and establish a solid foundation for a frontend development career.
The article introduces AIGCDesign, an open‑source cross‑platform AI component library that extends traditional frontend UI kits with large‑language‑model capabilities, offering lightweight, configurable, and multi‑framework support for rapid AI‑driven application development across web, mobile, and native environments.
Shadcn UI, a React‑based component collection launched in early 2023, reached 73 K GitHub stars within two years by offering a highly customizable, copy‑and‑paste workflow, leveraging Tailwind CSS, Radix UI, TypeScript, and a simple CLI that together reshape the frontend component ecosystem.
The article introduces AIGCDesign, an open‑source cross‑platform AI component solution that combines traditional frontend libraries with large‑language‑model capabilities, outlines its design goals, technical architecture, lifecycle hooks, configuration examples, multi‑framework support, and real‑world business integration cases.
This article walks through creating a Vue component library using Vite, reorganizing the project structure, configuring aliases, writing reusable components with a global install helper, setting up routing, customizing Vite build outputs, generating TypeScript declarations, and documenting the library with VitePress.
This article explains the motivation, research, architecture, implementation details, lifecycle hooks, configuration options, multi‑framework support, and future directions of AIGCDesign, a cross‑platform AI component library built with Taro, React, Vue and native technologies, including code examples and streaming techniques.
This article explains how to upgrade an existing low‑code platform to a zero‑code solution, enabling backend engineers and non‑technical users to build pages effortlessly by defining component schemas, using templates, and automating interface integration.
This article details how Industrial and Commercial Bank of China (ICBC) created a cross‑channel, enterprise‑grade frontend component library and management platform to standardize UI design, boost development efficiency, and enhance user experience across mobile, PC, and smart‑terminal banking applications.
YYF2C, Baidu and YY Interactive’s all‑in‑one Figma‑plus‑AI platform, transforms design files into high‑fidelity, semantically named code across web, React Native and admin components, offering plugins, light‑logic tags, DSL converters and SaaS management that together boost development efficiency by roughly fifteen percent.
Layui is a free, lightweight Web UI component library that follows native HTML/CSS/JS development, offering modular specifications, easy onboarding, and a rich set of components, with simple installation via download, npm, or CDN, making rapid, elegant frontend development straightforward.
This article provides a comprehensive, hands‑on tutorial for creating a Vue 3 Headless UI component library, covering project initialization, workspace configuration, ESLint and Git‑hook setup, TypeScript and Vite integration, unit testing with Vitest, documentation with VitePress, playground creation, monorepo building, and publishing to npm.
This guide explains how to install the Layui-Vue component library for Vue 3, configure it in a main.ts file, create a basic layout template, and highlights the latest release notes including new events, bug fixes, and style optimizations.
Learn how to create a mini version of the TinyVue component library that works across Vue 2.6, Vue 2.7, and Vue 3 by using a single source code strategy, adaptive layers, renderless logic, and unified APIs, with practical code examples and migration solutions.
In a series of in‑depth interviews, four senior designers from 58UXD share why they built a design‑system handbook, its value for consistency and innovation, challenges of integrating AIGC, strategies for usability, visual standards, engineering practices, and future plans for continuous iteration.
Mpx‑cube‑ui is a cross‑platform mobile component library built on the Mpx mini‑program framework that unifies theming and reuse by organizing components into three layers—basic, basic‑business, and business—while offering hierarchical style variables, compile‑time or runtime theming, and plans to open‑source its core components for broader community adoption.
shadcn/ui is a rapidly popular, copy‑and‑paste component collection that provides accessible, highly customizable Tailwind‑styled UI elements with a two‑layer architecture, theme editor, dark‑mode support, and CLI, offering simplicity and fine‑grained control while requiring manual integration and careful bundle‑size management.
In this article the author, creator of the Vue3 mobile component library Varlet UI, shares the latest architectural changes, monorepo setup, design system, development tooling, testing, build outputs, documentation deployment, playground, and VSCode extensions, reflecting on lessons learned over the past two years.
Ant Design Mini now supports 16 core components on both Alipay and WeChat mini programs, detailing platform differences, a TSX‑based neutral template engine, AI‑assisted legacy conversion, and functional‑mini component logic to enable seamless cross‑platform development.
This article explains how the Titian component library uses Design Tokens to abstract visual attributes like color, typography, spacing, and shadow, allowing seamless theme customization, global and component-level styling, dark mode support, and multi‑framework integration for consistent front‑end development.
This article explains why and how to build a reusable business component library for frontend teams, compares single‑package and multi‑package architectures, details the build process using webpack and Rollup, describes version‑control strategies, outlines a SOP for component development, and provides practical code examples.
This article explains how Baidu Search’s design system was restructured using scenario‑driven thinking, detailing the challenges of asset redundancy and inconsistency, the three‑phase overhaul (unify, engineer, tool), and the resulting improvements in asset clarity, maintainability, and consumption efficiency.
This article explains why traditional qualitative questionnaires are insufficient for maintaining a design system, introduces a four‑step framework (clarify, select, explore, solve) with specific quantitative metrics for component scale, maintenance efficiency, adoption breadth, and usability, and demonstrates how to apply these metrics to identify and resolve real‑world component library issues.
This article examines the directory structures, package.json entries, and build scripts of popular React component libraries—Ant Design, Arco Design, and Semi Design—explaining how they generate CommonJS, ES Module, and UMD bundles using tools like tsc, Babel, Webpack, and Gulp, and shows how to apply the same approach when creating your own library.
This article explains how directed acyclic graphs (DAGs) are applied in frontend development for resource loading optimization, component library construction, and task flow orchestration, and demonstrates a real-world implementation in Kuaishou's e‑commerce advertising engine with detailed architecture and code examples.
This article provides a step‑by‑step tutorial on using dumi2 to create a React component and function library, covering project initialization, component and style development, documentation generation, Jest unit testing, Ant Design integration, utility functions, test optimization, and final packaging and deployment to both a static site and npm.
This article introduces Layui‑Vue, a Vue 3 desktop component library, showing how to install it via npm, configure it in main.ts, create a basic layout page with Layui components, and outlines recent bug fixes and enhancements.
This article outlines a browser‑based real‑time build, compile, and preview solution for front‑end material management, detailing its background, core requirements, development and compilation workflows, usage process, and the benefits of a unified, efficient platform for reusable UI components.
This article introduces OpenTiny, an enterprise‑grade, cross‑framework component library for Vue2, Vue3, and Angular, explains its five key advantages—including seamless Vue2‑to‑Vue3 migration and renderless architecture—and provides step‑by‑step commands to quickly scaffold an admin system and customize themes via its CLI and theme‑config tools.
Quarkc, the HelloBike‑developed framework‑agnostic web component toolkit, builds native Web Components without hidden magic, letting developers write once and run anywhere across Vue, React, Svelte, Angular and plain HTML, while offering a tiny bundle size, high performance and simple npm‑based setup.
This article explains the challenges of upgrading large B2B Vue 2 projects to Vue 3, evaluates three technical approaches—Vue SFC templates, render functions, and standard JSX—and details the chosen JSX‑based strategy, multi‑layer architecture, TypeScript support, and open‑source implementation for a seamless cross‑version component library.
This tutorial explains the purpose of a component library, compares popular Vue UI frameworks, and provides a step‑by‑step guide to creating, configuring, testing, publishing, and consuming a custom Vue component library using Vant CLI.
The article describes building a Taro component library whose components, documentation and live demos are generated from a single Markdown source, using Rollup‑built ES modules, a Vite‑based static site, a custom webpack markdown loader, and an isolated H5 demo project to ensure maintainable, reusable code and synchronized documentation.
NetEase Cloud Music’s GMTC talk unveils C2D2C—a lossless design‑development workflow that treats code as a shared language, letting designers export layer data and component metadata via Sketch/Figma plugins, which developers convert back into code, boosting designer efficiency by 25%, developer efficiency by 33%, and overall collaboration by 38% across major product scenarios.
This article explores the evolution of front‑end component libraries from early jQuery plugins to modern low‑code‑driven production, detailing current challenges, visual material description protocols, component lifecycle implementation, versioning, and future directions for scalable, collaborative component engineering.
This article explains the purpose of a component library, outlines how to plan, select a framework, set up Vant CLI, configure scripts, organize directories, add and test components, publish to an npm registry, and integrate the library into projects using various import methods.
FishUI is a cross‑platform React component library designed for Xianyu’s kun and web containers, offering unified APIs, automated environment detection, monorepo architecture with pnpm, lerna + nx versioning, custom build loaders, comprehensive testing, and documentation tooling to boost developer efficiency and maintainability.
NutUI 4.0 introduces a dynamic CSS‑variables theme, a dedicated icon library, automatic on‑demand component import, new components such as Tour and PullRefresh, extensive component refinements, significant bundle‑size reductions, upgraded build tools, and updated type declarations, providing a lighter, more flexible frontend solution.
This article details how the NutUI‑React component library was adapted to the Taro framework for WeChat mini‑programs, covering background, version upgrades, three development stages, key technical solutions, installation steps, and future community‑driven improvements.
This article reviews several popular Vue3 UI component libraries—including Ant Design Vue, BalmUI, Wave UI, Vuestic, Element+, Ionic, Naive UI, Quasar, and PrimeVUE—highlighting their official sites, key features, component counts, GitHub popularity, and suitability for building modern, responsive frontend applications.
This article guides developers through creating a customizable slider captcha component using Vue 3 and Vite, covering component design principles, Canvas drawing techniques, event handling, API configuration, and publishing the component to npm, with complete code examples.
This guide walks through establishing a unified development environment, creating a pnpm‑based monorepo, configuring TypeScript and Vite, registering package names, and linking sub‑packages so you can develop and preview a Vue 3 component library efficiently.
This article explains how NetEase Qiyu built a high‑cohesion multilingual component using React context and hooks, transformed tree‑structured language data for component libraries, and created a VSCode plugin to automate i18n key replacement, enabling efficient multi‑language support for their customer‑service console.
This article analyzes the challenges of traditional front‑end development for large real‑estate operation activities and presents a comprehensive efficiency‑boosting solution that includes workflow optimization, a unified event‑tracking system, a multi‑end adaptation plugin, and a low‑code "Jimu" platform for rapid page creation.
This article details how NutUI and JD Tech collaborated over multiple quarters to create NutUI‑JDT, a theme‑customizable component library that unifies H5 and mini‑program development, expands and adapts components, introduces a Sketch plugin, and outlines future roadmap and open‑source contributions.
Over the past six months the author handled dozens of corporate website projects, identified recurring design problems such as limited resources, high labor cost, lack of brand identity and poor user experience, and introduced a systematic workflow—including resource integration, component libraries, modular templates and a code‑generation tool—that enables the rapid production of multiple web designs within a single day.
The article defines T‑level interactions—high‑traffic, high‑revenue e‑commerce events—and outlines how using the Taro framework, a unified H5 and mini‑program development stack, combined with a custom component library, automated testing, and robust error‑handling strategies can dramatically improve development efficiency, consistency, and reliability across massive seasonal campaigns.
This article explains how Tencent created the open‑source TDesign system, its multi‑team organization, rule‑based governance, tooling, GitHub automation, documentation strategy, and contributor incentives, showing how a large‑scale design system can stay consistent while evolving across many technology stacks.
This article analyzes various CSS styling approaches for React component libraries, comparing CSS‑JS association methods and naming‑conflict solutions, and offers guidance on selecting the most suitable strategy based on development workflow, performance, SSR support, and maintainability.
This article explains how to create reusable UI components using Web Components by covering the three core concepts—custom elements, Shadow DOM, and HTML templates—demonstrating a button example, discussing component communication, two‑way binding, library packaging, framework integrations, current limitations, and reference resources.
This article outlines the evolution of Manycore Design, the in‑house design system created by Qunhe, detailing its transition from third‑party libraries to a unified component library, the four‑year development process, and the ongoing efforts to expand its ecosystem and ensure consistent product standards.
This article outlines practical strategies for operational designers to quickly produce high‑impact campaign assets, covering flexible design thinking, tiered activity planning, material standards, and component‑based workflows that boost efficiency while maintaining brand consistency.
This article describes how a company refactored its Ant Design‑based React component library by standardizing on higher‑order component wrappers, adopting the dumi documentation tool, and organizing the codebase with a Lerna‑Yarn monorepo, resulting in significantly improved maintainability and developer efficiency.
This article explains how NutUI’s theme customization enables developers to switch skins, edit component‑level styles, and generate theme variables through an online configurator, providing step‑by‑step usage instructions, code examples for Vite, Webpack and Taro, and a detailed overview of the underlying implementation.
The article explores how front‑end engineering, through reusable component libraries, modular building platforms, and low‑code visual editors, transforms data‑screen development by abstracting complexity, boosting efficiency, and enabling scalable, reusable business components across multiple devices and scenarios.
This guide introduces NutUI‑Bingo, a Vue 3‑based mobile component library for lottery and mini‑game scenarios, covering its background, design, installation, core components, usage examples, and future roadmap with technical details and code snippets.
The article details Tianxing Financial’s ten‑month design overhaul, outlining how a unified design system and component library were built to harmonize five business modules, streamline UI consistency, improve brand perception, and boost development efficiency across the financial app ecosystem.
The article describes Vivo’s plugin management platform for activity components, built with a Midway Node.js backend, Vue.js frontend, and MySQL, which automates component extraction, Markdown documentation, GitLab hook‑driven NPM package retrieval, and AST‑based export parsing to provide a reusable library that has already saved over 20 person‑days of development effort.
Version next of vue‑mapvgl introduces full Vue 3 compatibility, a complete TypeScript rewrite, IDE assistance files, updated documentation on VuePress 2.0, treeshake support, and several breaking changes such as a new library registration method and removal of deprecated APIs.
The Xianyu front‑end component library was designed as a Lerna‑based multi‑package system that unifies UI specifications, provides reusable atomic to industry‑specific components, employs CSS modules and strict linting, and uses Storybook for documentation, ultimately boosting development efficiency, quality, and cross‑team consistency across the product’s many business lines.
This article outlines a modern icon delivery workflow that moves from static image resources to a Figma‑driven process, using a custom Figma plugin and GitLab CI to fetch, optimize with SVGO, and automatically generate React/Vue SVG component libraries, publish npm packages, and deploy documentation.
During JD's 11.11 promotion, the team adopted the AI‑powered low‑code tool Deco to generate personalized event pages, replacing manual coding and low‑code platform workflows, achieving a 48% efficiency gain while detailing the workflow, component integration, code generation, data handling, and observed limitations.
This tutorial walks through creating a production‑ready React Native UI component library named vant‑react‑native, covering monorepo setup with Lerna, package naming, Yarn workspaces, commit and code standards, icon generation, on‑demand loading, debugging, documentation with Dumi, CI/CD deployment, and unit testing.
The ELab Front‑End Weekly presents the latest tech frontier updates—including HTTP/3 performance gains and React Native 0.65—alongside deep dives on building component libraries and ByteDance’s Node.js RPC design, plus practical resources for Next.js and Rust beginners.
This article explains why a design system is essential, outlines the Shufang case study, and details practical steps—tool selection, color palette, base styles, icon library, componentization, global rules, and brand language—to create a scalable, consistent UI framework.
Learn how to manually create an iOS component library using CocoaPods, automate the process with the pod lib create scaffold, customize private templates, and develop a CocoaPods plugin to streamline library generation, complete with code examples and project structure details.
The article presents OKee Mobile, an open‑source Vue‑based mobile component library that offers 36 customizable components, a comprehensive design‑token system, compile‑time and runtime theming via Less variables, and detailed code examples for developers seeking a flexible UI solution for both ToC and ToB scenarios.
This comprehensive tutorial walks through creating a React Native component library using Lerna monorepo, Yarn workspaces, code standards, automated builds, unit testing, documentation with Dumi, and on-demand loading techniques, providing practical guidance for developers to manage, test, and publish reusable UI components.
This article introduces the mica microservice component suite, details version changes, lists the v2.4.5 update highlights—including new cache, metrics, and logging modules—and showcases the expanded mica‑metrics for Druid and Undertow as well as the broader mica ecosystem.
The River Beaver system, developed by Daily Fresh, is a self‑built activity construction platform that offers a rich set of business components and a visual page‑building interface, enabling marketers to quickly create and publish customized H5 activity pages while freeing developers from repetitive tasks, improving efficiency, and supporting scalable component libraries.
This case study describes how the Luffy platform was built from scratch to replace cumbersome Excel workflows with a minimalist, component‑driven design that visualizes data securely, improves team collaboration, and accelerates product iteration for operations and product teams.
The IXDC 2020 workshop recounted how 58UXD’s Matrix project created a full‑link design system for complex mid‑platform products, detailing the rationale, component library, template automation, cross‑team collaboration, and the practical outcomes that boosted productivity and business impact.
This article introduces Dumi, a tool that combines component library project scaffolding with static documentation site generation, explains its three project modes, code structure, MDX-based documentation editing, on‑demand loading, build configurations, workflow commands, and publishing steps for frontend developers.
This article examines the Element‑Plus Vue3 component library, detailing its TypeScript refactor, Composition API usage, Teleport implementation, global‑instance API changes, internationalization support, and the multi‑tool build pipeline involving Rollup, Webpack, and Gulp.
This article details how iQIYI Knowledge's web frontend team designed and implemented a comprehensive componentization strategy that improves code reuse, development efficiency, and maintainability across numerous independent projects while ensuring product consistency.
This article introduces Ant Design’s Invisible Design System, explaining how design asset management and engineering rules (ETCG) are explored to create unified, hidden guidelines that improve component consistency, workflow efficiency, and collaboration, and outlines the open‑source plan, Kitchen tool, and community initiatives for frontend development.
From 2020 to 2021, Zhenkunxing built a visual‑editing service, a unified UI component library, standardized development, compilation and deployment pipelines, a front‑end portal, an online‑form system, an OKR tool, and a micro‑frontend BOSS platform, while planning a low‑code platform to boost efficiency and scalability.
This article outlines the decision‑making process for styling, icon, dark‑mode, RTL, and global configuration choices when building a custom front‑end component library, comparing Sass/Less, Atomic CSS, CSS‑in‑JS, various icon strategies, and implementation patterns for maintainability and scalability.
This article outlines the design and implementation of a Vue‑powered visual editor, covering its three‑part architecture (editor, component library, backend), JSON schema hierarchy, component creation and configuration, state management with Vuex, drag‑and‑drop mechanics, and server‑side rendering.
The article explains how the YuanShi platform was created to address front‑end talent shortage by standardising tools, redefining team structures, introducing component‑based cooperation, and outlining the evolution, benefits, challenges, and future directions of this approach within a large B‑end organization.
This article introduces the qrn‑remax‑unir library, explains how the QuNar front‑end team adapted React Native code to run on H5 and various mini‑program platforms using Remax, discusses the design choices, implementation details, style handling strategies, animation support, and provides usage instructions and code examples.
Meituan Waimai’s UI consistency project unites designers and developers around a unified design system, the Jimu toolchain, and a cross‑platform component library—supported by documentation and a cloud collaboration platform—to eliminate UI fragmentation, cut package size, and boost development efficiency by up to 50 %.
The River Beaver system, developed by Miss Fresh, is a self‑built activity‑construction platform that lets operators visually assemble marketing pages using reusable components, dramatically reducing development effort, accelerating release cycles, and empowering non‑technical staff, while the underlying architecture—Vue‑based designer, component libraries, Node/Think.js services, and build pipelines—ensures scalable, maintainable H5 page generation.
The talk explains Ant Design's core assumption that everyone seeks happy work, outlines its four design values, introduces the ETCG 2.0 methodology for consistent component design, and discusses how natural, deterministic interactions can make digital products feel more intuitive and enjoyable.
This article explains how standardized design guidelines, size and typography rules, consistent spacing, and reusable component libraries can dramatically improve design quality, accelerate production, and enhance team collaboration for mobile product operations, turning repetitive tasks into quantifiable value.
This article explains what a design system is, outlines its key advantages such as unified design, reduced design debt, and improved efficiency, describes its core components like visual language and component libraries, and showcases best‑practice examples from Google, Ant Design, and Shopify.
This article outlines the strategic redesign of the 58 MicroChat SDK, detailing the middle‑platform concept, current challenges, clear product goals, a systematic design‑research process, visual and code upgrades, and the anticipated benefits for developers and end‑users across dozens of business scenarios.
This article provides a comprehensive, step‑by‑step tutorial on creating, documenting, and publishing a React component library using create‑react‑app, TypeScript, docz, npm linking, and Netlify, covering configuration, build scripts, on‑demand loading, and deployment best practices.
This case study details the redesign of a membership center, covering project background, user‑driven design thinking, visual language upgrades, reusable component development, and the resulting improvements in user experience, decision efficiency, and paid conversion rates.
Vivo Mall transformed its Java‑centric frontend into a layered Vue‑Node architecture, separating frontend and backend, unifying multiple platforms with BFF and SSR, building a shared UI library, adopting extreme modularization, and enforcing coding standards and quality tools to double development efficiency and improve scalability.
This article details the comprehensive redesign of JD VSP's PC platform, covering the motivations for the overhaul, the adoption of Vue, TypeScript, Gaea scaffolding, Legao component library, performance enhancements with icon fonts and PWA caching, and the implementation of robust development tooling such as ESLint and code‑generation workflows.
