How to use Shadcn with React (JavaScript, No TypeScript)

• create a react project using vite:
  

  npm create vite@latest
  

  (choose React and then JavaScript in options)
  
  

• we'll use tailwind 3.4.1 coz tailwind v4 is not properly compatible with shadcn yet:
  

  npm install -D tailwindcss@3.4.1 postcss autoprefixer`
  

• initialize tailwind config:
  

  npx tailwindcss init -p
  

• at the top of index.css add these directives:
  

  @tailwind base;
  @tailwind components;
  @tailwind utilities;
  

• edit tailwind.config.js and make it look like this:
  

  /** @type {import('tailwindcss').Config} */
  export default {
    content: ["./index.html", "./src/**/*.{ts,tsx,js,jsx}"],
    theme: {
      extend: {},
    },
    plugins: [],
  }
  

• create a jsconfig.json file in root directory of project and paste this:
  

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

• install shadcn
  

  npx shadcn@latest init
  

  (i chose “new york”, then “zinc” and then “use —force” option)
  
  

  checkout the difference between Default and New York theme in shadcn and colors it provides.
  

• edit the vite.config.json:
  

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

• now u can install shadcn components and use them

  select “use —force” whenever u install a component

  preview:

  

• example usage:
  
  src/App.jsx :
  

  import './App.css'
  import { Button } from './components/ui/button'
  
  function App() {
    return (
      <>
       <Button variant="default">Button</Button>
      </>
    )
  }
  
  export default App
  
  

  

That’s how you install and use Shadcn in a React project (JavaScript only, No TypeScript). Whether you were searching for "How to use Shadcn with React (JavaScript, No TypeScript)" or "Set up Shadcn in a React project without TypeScript," this guide covers everything you need to get started.