# Manual Installation · JGuang UI

> Add dependencies to your project manually.

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

### Add Tailwind CSS

Components are styled using Tailwind CSS. You need to install Tailwind CSS in your project.

[Follow the Tailwind CSS installation instructions to get started.](https://tailwindcss.com/docs/installation)

### Add dependencies

Add the following dependencies to your project:

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

### Configure import aliases

Choose one of the following alias setups.

#### Option A: `tsconfig.json` paths

```json {3-6} title="tsconfig.json" showLineNumbers
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  }
}
```

#### Option B: `package.json#imports`

```json title="package.json" showLineNumbers
{
  "imports": {
    "#components/*": "./src/components/*.tsx",
    "#lib/*": "./src/lib/*.ts",
    "#hooks/*": "./src/hooks/*.ts"
  }
}
```

```json title="tsconfig.json" showLineNumbers
{
  "compilerOptions": {
    "moduleResolution": "bundler",
    "resolvePackageJsonImports": true
  }
}
```

The `@` alias is a preference. You can use other aliases if you want. If you
use `package.json#imports`, keep the matching alias roots in `components.json`.
See the 

[package imports guide](/systems/jguang-ui/docs/package-imports)

 for
framework-specific setup.

### Configure styles

Add the following to your styles/globals.css file. You can learn more about using CSS variables for theming in the [theming section](/systems/jguang-ui/docs/theming).


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


### Add a cn helper

```ts showLineNumbers title="lib/utils.ts"
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}
```

### Create a `components.json` file

Create a `components.json` file in the root of your project.

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

If you're using `package.json#imports`, use the corresponding `#...` aliases instead:

```json title="components.json" showLineNumbers
{
  "aliases": {
    "components": "#components",
    "utils": "#lib/utils",
    "ui": "#components/ui",
    "lib": "#lib",
    "hooks": "#hooks"
  }
}
```

### That's it

You can now start adding components to your project.

---

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