介绍 · JGuang UI

中文使用指南 · 下方保留完整原文

开放源码

JGuang UI 设计系统采用可编辑源码的分发方式。安装后，组件实现、设计指南和智能体规则会进入你的项目，你可以直接修改源码，而不必围绕封闭的组件实现反复覆盖样式。JGuang UI 平台还展示其他独立设计系统，各系统保留自己的 API 和安装方式。

组合方式

组件由基础交互原语和视觉样式组成。JGuang UI 提供 Base UI 与 Radix UI 两种独立实现；选择一种后，应持续使用它的属性和组合方式，不要在同一组件中混用两套 API。

安装与更新

从系统页面复制当前站点的 Registry 安装命令。安装包包含组件、依赖、主题变量、许可和智能体指南。更新基础依赖可以获得底层修复；更新已复制的组件源码时，应审查差异，保留项目已有的定制。

默认样式与智能体

组件使用 Tailwind CSS 工具类和 CSS Variables。可以通过语义令牌调整颜色、圆角和主题，通过组件源码调整布局与交互。Codex 和 Claude Code 可读取随包安装的设计指南与 Skills，按照相同规则继续开发。

This is not a component library. It is how you build your component library.

You know how most traditional component libraries work: you install a package from NPM, import the components, and use them in your app.

This approach works well until you need to customize a component to fit your design system or require one that isn’t included in the library. Often, you end up wrapping library components, writing workarounds to override styles, or mixing components from different libraries with incompatible APIs.

This is what JGuang UI aims to solve. It is built around the following principles:

Open Code: The top layer of your component code is open for modification.
Composition: Every component uses a common, composable interface, making them predictable.
Distribution: A flat-file schema and command-line tool make it easy to distribute components.
Beautiful Defaults: Carefully chosen default styles, so you get great design out-of-the-box.
AI-Ready: Open code for LLMs to read, understand, and improve.

Open Code

JGuang UI hands you the actual component code. You have full control to customize and extend the components to your needs. This means:

Full Transparency: You see exactly how each component is built.
Easy Customization: Modify any part of a component to fit your design and functionality requirements.
AI Integration: Access to the code makes it straightforward for LLMs to read, understand, and even improve your components.

In a typical library, if you need to change a button’s behavior, you have to override styles or wrap the component. With JGuang UI, you simply edit the button code directly.

  How do I pull upstream updates in an Open Code approach?




  

    JGuang UI follows a headless component architecture. This means the core
    of your app can receive fixes by updating your dependencies, for
    instance, @base-ui/react or input-otp.
  

  

    The topmost layer, i.e., the one closest to your design system, is not
    coupled with the implementation of the library. It stays open for
    modification.

Composition

Every component in JGuang UI shares a common, composable interface. If a component does not exist, we bring it in, make it composable, and adjust its style to match and work with the rest of the design system.

A shared, composable interface means it's predictable for both your team and LLMs. You are not learning different APIs for every new component. Even for third-party ones.

Distribution

JGuang UI is also a code distribution system. It defines a schema for components and a CLI to distribute them.

Schema: A flat-file structure that defines the components, their dependencies, and properties.
CLI: A command-line tool to distribute and install components across projects with cross-framework support.

You can use the schema to distribute your components to other projects or have AI generate completely new components based on existing schema.

Beautiful Defaults

JGuang UI comes with a large collection of components that have carefully chosen default styles. They are designed to look good on their own and to work well together as a consistent system:

Good Out-of-the-Box: Your UI has a clean and minimal look without extra work.
Unified Design: Components naturally fit with one another. Each component is built to match the others, keeping your UI consistent.
Easily Customizable: If you want to change something, it's simple to override and extend the defaults.

AI-Ready

The design of JGuang UI makes it easy for AI tools to work with your code. Its open code and consistent API allow AI models to read, understand, and even generate new components.

An AI model can learn how your components work and suggest improvements or even create new components that integrate with your existing design.

介绍