Vite + shadcn/ui without TypeScript

[codayon]

Step 1: Initialize a Vite project with React

I will be using npm as package manager. But you can choose whatever you preferences are:

npm create vite@latest new-app -- --template react --no-interactive

Step 2: Install dependencies then setup Tailwind CSS

cd new-app
npm install
npm install tailwindcss @tailwindcss/vite

In src/index.css insert the following line:

@import "tailwindcss";

Step 3: Setup import alias

Create a jsconfig.json in the root and insert the following lines:

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

Edit vite.config.js as followed:

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

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

Step 4: Initialize shadcn/ui

npx shadcn@latest init

To initialize shadcn/ui with Remix without TypeScript: #4915 #6170