React Router

Choose the setup that matches your starting point.

Use JGuang UI installation Build your preset and generate a React Router project.

Use the CLI Scaffold a new React Router project directly from the terminal.

Existing Project Configure JGuang UI manually in an existing React Router project.

Use JGuang UI installation

Build Your Preset

Open JGuang UI installation and build your preset visually. Choose your style, colors, fonts, icons, and more.

Open JGuang UI installation

Create Project

Click Create Project, choose your package manager, and copy the generated command.

The generated command will look similar to this:

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

The exact command will include your selected options such as --base, --monorepo, or --rtl.

Add Components

Add the Card component to your project:

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

If you created a monorepo, run the command from apps/web or specify the workspace from the repo root:

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

The command above will add the Card component to your project. You can then import it like this:

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "~/components/ui/card"

export default function Home() {
  return (
    <Card className="max-w-sm">
      <CardHeader>
        <CardTitle>Project Overview</CardTitle>
        <CardDescription>
          Track progress and recent activity for your React Router app.
        </CardDescription>
      </CardHeader>
      <CardContent>
        Your design system is ready. Start building your next component.
      </CardContent>
    </Card>
  )
}

If you created a monorepo, update apps/web/app/routes/home.tsx and import from @workspace/ui/components/card instead.

Use the CLI

Create Project

Run the init command to scaffold a new React Router project. Follow the prompts to configure your project: base, preset, monorepo, and more.

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

For a monorepo project, use --monorepo flag:

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

Add Components

Add the Card component to your project:

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

If you created a monorepo, run the command from apps/web or specify the workspace from the repo root:

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

The command above will add the Card component to your project. You can then import it like this:

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "~/components/ui/card"

export default function Home() {
  return (
    <Card className="max-w-sm">
      <CardHeader>
        <CardTitle>Project Overview</CardTitle>
        <CardDescription>
          Track progress and recent activity for your React Router app.
        </CardDescription>
      </CardHeader>
      <CardContent>
        Your design system is ready. Start building your next component.
      </CardContent>
    </Card>
  )
}

If you created a monorepo, update apps/web/app/routes/home.tsx and import from @workspace/ui/components/card instead.

Existing Project

Create Project

If you need a new React Router project, create one first. Otherwise, skip this step.

npm create react-router@latest

create-react-router already configures Tailwind CSS and the default ~/* import alias for you. If you're adding JGuang UI to an older or custom React Router app, make sure both are configured before continuing.

Run the CLI

Run the JGuang UI Registry init command to set up JGuang UI in your project.

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

Add Components

You can now start adding components to your project.

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

The command above will add the Button component to your project. You can then import it like this:

import { Button } from "~/components/ui/button"

export default function Home() {
  return (
    <div className="flex min-h-svh flex-col items-center justify-center">
      <Button>Click me</Button>
    </div>
  )
}