Introduction:

In the rapidly evolving landscape of web development, choosing the right tools and frameworks can make a significant difference in both productivity and project quality. For developers seeking a modern, efficient, and highly customizable stack, combining Vite, React, Tailwind CSS, and ShadcnUI offers a powerful solution.

Vite, known for its blazing-fast build times and seamless development experience, provides an excellent foundation for creating React applications. React, with its component-based architecture, simplifies the process of building interactive UIs. Tailwind CSS complements this by offering a utility-first approach to styling, allowing for rapid and responsive design. Adding ShadcnUI into the mix introduces a suite of pre-designed UI components that enhance both functionality and aesthetics.

This blog post will guide you through the process of setting up this modern stack using JavaScript, avoiding TypeScript to keep things straightforward. Whether you’re starting a new project or integrating these technologies into an existing one, you’ll find the steps and insights necessary to get your development environment up and running smoothly.

Installation Step 1: Vite + React

In this step, we will install a Vite + React simple project from scratch. Run the following command in your terminal:

npm create vite@latest
        

It will prompt you with the following questions:

• "Name of project" - Enter your desired project name.
• "Select a framework" - Choose React.
• "Select a variant" - Choose JavaScript.

Next, execute the following commands:

cd project_name
npm install
npm run dev
        

This completes the installation of the Vite + React project.

Note: For more details, visit the Vite guide page.

Installation Step 2: Tailwind CSS

To integrate Tailwind CSS, execute the following commands:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
        

You should now find a "tailwind.config.js" file in your project directory. Replace the content object with:

content: [
  "./index.html",
  "./src/**/*.{js,ts,jsx,tsx}",
]
        

Add the following lines to your "index.css" file:

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

Restart the development server using:

npm run dev
        

Update the "App.jsx" file with the following code:

export default function App() {
  return (
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
  )
}
        

If you see the "Hello world!" text styled as specified, Tailwind CSS has been successfully installed.

Note: For more details, visit the Tailwind installation guide page.

Installation Step 3: ShadcnUI

Create a new file named "jsconfig.json" with the following content to resolve paths:

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

Update "vite.config.js" to resolve paths without error:

npm i -D @types/node

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

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

Run the following command to set up ShadcnUI:

npx shadcn-ui@latest init
        

Follow the prompts to configure the "components.json" file.

** That's it **
You can now start adding components to your project.
        

Example: Add a button component using:

npx shadcn-ui@latest add button
        

Update your "App.jsx" file:

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

export default function App() {
  return <Button>Click me</Button>;
}
        

Restart your development server and test the application in your browser.

Conclusion:

By following this guide, you have successfully set up a modern frontend stack with Vite, React, Tailwind CSS, and ShadcnUI. You are now equipped to develop powerful and responsive web applications.