安装

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

安装前准备

使用支持 React 的项目，并完成 Tailwind CSS v4 配置。先提交或备份已有修改，确认项目的导入别名与 components.json 一致。如果项目尚未初始化组件目录，请先按照所用框架完成初始化。

选择实现

在 JGuang UI 系统页面选择 Base UI 或 Radix UI，再复制完整安装命令。命令中的域名应是你当前访问的 JGuang UI 站点；不要把本地 localhost 地址交给其他用户。

安装内容

完整安装包提供组件源码、工具函数、必要依赖、浅色与深色主题令牌、动画样式、设计指南和许可证。安装会涉及你项目的全局 CSS；遇到同名组件或已有主题变量时，先审查差异，不要盲目覆盖。

安装后验证

运行项目的类型检查与生产构建。至少验证按钮、输入框、折叠面板、对话框和日期选择器，并检查键盘焦点、深浅色模式与窄屏布局。安装失败时保留完整错误信息，优先检查网络、包管理器和项目别名。

给智能体使用

安装后的设计指南和项目 Skills 适用于 Codex、Claude Code。新增页面时应复用已安装的组件；不要把 Base UI 的属性直接传给 Radix UI，或反向混用。

Prepare your project

Use a React project with Tailwind CSS v4 configured. Commit or back up existing changes before installing a source bundle. Your import aliases must agree with components.json.

Choose an implementation

Open the JGuang UI installation panel, choose Base UI or Radix UI, and copy the complete Registry command for the current site. These are independent implementations: do not mix their primitive APIs.

The installation panel distributes source into an existing project. It is not a visual application generator and does not scaffold every framework automatically.

Install the bundle

Run the copied command in your project root. The bundle contains component source, pinned dependencies, utility functions, light and dark theme variables, animation styles, a design guide, agent instructions, and license information.

Review prompts before overwriting existing components or global CSS. Use the public site address when sharing commands; another person's machine cannot access your localhost.

Verify your installation

Run your project's typecheck and production build. Test a button, input, accordion, dialog, and date picker. Verify keyboard navigation, focus, light/dark themes, and mobile layouts.

For a custom framework setup, follow the Tailwind CSS installation guide and configure matching component, library, and hook aliases before adding the Registry bundle.

Use with coding agents

Codex and Claude Code can use the bundled design guide and project Skills. Ask the agent to reuse the installed components and retain the selected Base UI or Radix UI API. Updates to copied source should be reviewed as code changes so your customizations remain intact.