# Next.js · JGuang UI

> Install and configure JGuang UI for Next.js.

- Page: https://jiguang132.com/systems/jguang-ui/docs/installation/next
- Based on: shadcn/ui documentation (MIT) @ bc0705384b51252af26dcc65425b216bf5eb063c

Choose the setup that matches your starting point.


  

[Use JGuang UI installation Build your preset and generate a Next.js project command.](#scaffold-with-create)


  

[Use the CLI Scaffold a new Next.js project directly from the terminal.](#scaffold-with-cli)


  

[Existing Project Configure JGuang UI manually in an existing Next.js project.](#existing-next-project)


## Use JGuang UI installation


### Build Your Preset

Open [JGuang UI installation](/systems/jguang-ui#install) and build your preset visually. Choose your style, colors, fonts, icons, and more.


  

[Open JGuang UI installation](/systems/jguang-ui#install)


### Create Project

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

The generated command will look similar to this:

```text
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:

```text
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:

```text
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:

```tsx showLineNumbers title="app/page.tsx"
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 Next.js 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/page.tsx` and import from `@workspace/ui/components/card` instead.


## Use the CLI


### Create Project

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

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

**For a monorepo project, use `--monorepo` flag:**

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

### Add Components

Add the `Card` component to your project:

```text
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:

```text
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:

```tsx showLineNumbers title="app/page.tsx"
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 Next.js 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/page.tsx` and import from `@workspace/ui/components/card` instead.


## Existing Project


### Create Project

If you need a new Next.js project, create one with `create-next-app`. Otherwise, skip this step.

```bash
npx create-next-app@latest
```

Choose the recommended defaults so Tailwind CSS, the App Router, and the default `@/*` import alias are configured for you.

If you prefer a `src/` directory, use `--src-dir` or choose `Yes` when prompted:

```bash
npx create-next-app@latest --src-dir
```

With `--src-dir`, Next.js places your app in `src/app` and configures the `@/*` alias to point to `./src/*`.

### Configure Tailwind CSS and Import Aliases

If you created your project with the recommended `create-next-app` defaults, you can skip this step.

If you're adding JGuang UI to an older or custom Next.js app, make sure Tailwind CSS is installed first. You can follow the official [Next.js installation guide](https://nextjs.org/docs/app/getting-started).

Then make sure your `tsconfig.json` includes the `@/*` import alias:

```json title="tsconfig.json" showLineNumbers
{
  "compilerOptions": {
    "paths": {
      "@/*": ["./*"]
    }
  }
}
```

If you used `--src-dir`, point the alias to `./src/*` instead.

### Run the CLI

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

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

### Add Components

You can now start adding components to your project.

```text
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:

```tsx showLineNumbers title="app/page.tsx"
import { Button } from "@/components/ui/button"

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

If you used `--src-dir`, add the component to `src/app/page.tsx` instead.

---

Index of all JGuang resources: https://jiguang132.com/llms.txt