How to Install ShadCN in a Vite + React Project with Tailwind CSS v4

ShadCN is a popular component library that provides beautifully designed UI components for React applications. This guide will walk you through installing ShadCN in a Vite + React project with Tailwind CSS v4.

Prerequisites

Ensure you have the following installed:

• Node.js (latest LTS recommended)

• npm or pnpm

• Vite + React project setup

Step 1: Create a Vite + React Project

If you haven't already created a Vite + React project, run the following command:

npm create vite@latest my-project --template react
cd my-project
npm install

Step 2: Install Tailwind CSS

Install Tailwind CSS and its Vite plugin:

npm install tailwindcss @tailwindcss/vite

Step 3: Configure the Vite Plugin and Resolve Alias

Add the @tailwindcss/vite plugin and configure the resolve alias in your Vite configuration.

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: Import Tailwind CSS

Add an @import to your CSS file that imports Tailwind CSS.

@import "tailwindcss";

Step 5: Create a jsconfig.json File

To enable absolute imports and path aliases, create a jsconfig.json file in the root of your project with the following content:

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

Step 6: Install Node.js Type Definitions

To ensure TypeScript support for Node.js APIs, install the @types/node package:

npm add -D @types/node

Step 7: Initialize ShadCN and Add Components

Run the following command to initialize ShadCN in your project:

npx shadcn@canary init

Choose any color, press enter, and proceed.

Next, add the Button component:

npx shadcn@latest add button

You can now import and use the Button component in your project. For example:

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

export default function Example() {
  return <Button variant="default">Click Me</Button>;
}

Conclusion

You have successfully set up ShadCN in a Vite + React project with Tailwind CSS v4. You can explore and add more components using npx shadcn-ui add <component> to enhance your UI easily. Happy coding!