# Configure Shadcn/UI

After installing reactjs using viteJs.



#### Create project <a href="#create-project" id="create-project"></a>

Start by creating a new React project using `vite`. Select the **React + TypeScript** template:

pnpmnpmyarnbun

```
npm create vite@latest
```

#### Add Tailwind CSS <a href="#add-tailwind-css" id="add-tailwind-css"></a>

pnpmnpmyarnbun

```
npm install tailwindcss @tailwindcss/vite
```

Replace everything in `src/index.css` with the following:

src/index.css

```
@import "tailwindcss";
```

#### Create a new file  jsconfig.json, insert code in bellow: <a href="#edit-tsconfigjson-file" id="edit-tsconfigjson-file"></a>

```
{
    "compilerOptions": {
      "baseUrl": ".",
      "paths": {
        "@/*": ["./src/*"]
      }
    }
  }
```

After settings up these configurations, you can run shadcn-ui initialization command again.

<figure><img src="https://695498858-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F89GYZ7bCFBFFAobNJ6x5%2Fuploads%2FEoC5vQAaTApnfXmofIin%2Fimage.png?alt=media&#x26;token=4c35e839-ea6e-47b6-8317-1f0c03553ef1" alt=""><figcaption></figcaption></figure>

After successful,  you can install command like this

```
npx shadcn@latest add form input button
```

<figure><img src="https://695498858-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F89GYZ7bCFBFFAobNJ6x5%2Fuploads%2FTra596avj5HdlcYMHe89%2Fimage.png?alt=media&#x26;token=b78d5330-5518-472f-85e6-b8c07833c0f4" alt=""><figcaption></figcaption></figure>
