Installation

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.