Hello, Hello…

The inspiration for this article comes from my friend's struggle to get Shadcn working with React and Vite using JavaScript. Since the Shadcn documentation lacks specific guidance for JavaScript setups, I'm here to help out and guide you through the process like a true programmer. [Insert Smerk emoji]

Follow these commands to first setup react

npm create vite@latest

• Set project name if already in the folder then press .

• select the framework we are going with React

• Select Language for this articele: JavaScript

Once we are done installing npm install we will now setup tailwind@v4 src is here, do check if everything running fine by running this command

npm run dev

---

^{Setup Tailwind CSS}

• Install Tailwind CSS

    npm install tailwindcss @tailwindcss/vite
  

• Configure the Vite plugin

  Add the @tailwindcss/vite plugin to your Vite configuration.

//vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [react(), tailwindcss()],
})

• Import Tailwind CSS

  Add an @import to your CSS file src/index.css that imports Tailwind CSS.

@import "tailwindcss";

• Start your process

  Add some classes like text-red-500 and check if it works fine.

npm run dev

---

^{Setup CLI}

• Create a new file in root of your directory jsconfig.json and paste this in it

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

• Update the vite.config.js

    npm install -D @types/node
  

  update the code in vite.config.js

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

• Run the CLI

    npx shadcn@latest init
  

choose either of them i will be going with —legacy-peer-deps if you want to read about it, here

Once you see this message Success! Project initialization completed.

it means we are ready to add shadcn component to our project run this command to try it out

npx shadcn@latest add button

It will ask you the same process b/w legacy or force choose whichever you choosed previoursly for better experience.

try it out paste this in App.jsx

import './App.css'
import { Button } from "@/components/ui/button"

function App() {
  return (
    <div className="flex flex-col items-center justify-center min-h-svh">
      <p className='text-black'>hey mom!</p>
      <Button>Click me</Button>
    </div>
  )
}

export default App

If you see a button in the middle of the screen, then voila, you have done it!

Thanks! for reading see you next time.