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.