Setting up (vite+react) project with shadcn ui.

Introduction

while trying to set app my vite react app with shadcn, I realised that the official documentation for shadcn UI had only configuration for typescript while that for react was not there. This forced me to troubleshoot and find a solution and this is what I am going to share in this tutorial.

1 Creating vite project and adding tailwindCSS

In the terminal write this command to create a new react app using vite.

npm create vite@latest

To add tailwind CSS run this command.

npm install tailwindcss @tailwindcss/vite

2 Setting app files.

2.1 index.css

Replace everything in the src/index.css

 @import "tailwindcss";

2.2 jsconfig.json

Note that in that in your vite app this file is missing so you have to create it by using the following command in the terminal.

 touch jsconfig.json

paste the code below in your jsconfig.json file.

 {
  "files": [],
  "references": [
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.node.json"
    }
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

2.3 Vite.config.js

Remove all the code in the vite.config.js and paste the one below.

 import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite' 
import path from "path"

// https://vite.dev/config/
export default defineConfig({
   plugins: [react(), tailwindcss()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
})

3 Setting up Shadcn.

Run the following command to set up shadcn in your project,

 npx shadcn@latest init

You will be asked a question to configure components.json

Which color would you like to use as base color? › Neutral

4 Adding components to your project

You can now start adding components to your project.
Let's add a button component to the project using the following command.

npx shadcn@latest add button

You can now import the component in the app.js like this.

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

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

export default App

Now run, npm run dev and your output should look like this in your browser

Conclusion

This tutorial covers how to set up shadcn with a vite react app. I hope this tutorial was helpful. If you have any feedback feel free to reach out to me at [e-mail].