How to Install ShadCN with Vite + React: A Step-by-Step Guide

Setting up ShadCN depends on the framework you're working with. For this guide, I’ll walk you through installing ShadCN for a Vite + React project. The steps will help structure your app efficiently and accelerate your development process.

1. Create Your Project

Begin by creating a new React project using Vite. Run the following command in your terminal:

npm create vite@latest

2 Add Tailwind CSS and its configuration

Install tailwindcss along with its peer dependencies, and generate the configuration files- tailwind.config.js and postcss.config.js files:

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

Next, update your CSS file (src/index.css in this case) to include Tailwind’s base styles:

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

Configure the tailwind template paths in tailwind.config.js:

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

3. Edit tsconfig.json file

   The current version of Vite splits TypeScript configuration into three files, two of which need to be edited. Add the baseUrl and paths properties to the compilerOptions section of the tsconfig.json and tsconfig.app.json files:

{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.app.json"
    }
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

4. Edit tsconfig.app.json file

   Add the following code to the tsconfig.app.json file to resolve paths, for your IDE (integrated development environment) such as VS code:

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

5. Update vite.config.ts

   Install node.js types and also, add the following code to the vite.config.ts so your app can resolve paths without error

# (so you can import "path" without error)
npm i -D @types/node

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"),
    },
  },
})

6. Run the CLI Command Line Interface

   Run the shadcn-ui initialization command to set up your project:

npx shadcn@latest init

7. Configure components.json

   You will be asked a few questions to configure components.json:

Which style would you like to use? › New York
Which color would you like to use as base color? › Zinc
Do you want to use CSS variables for colors? › yes / no

8. Add Components

   After the configuration, you can add shadCN components to your project. For example, to add a Button component

npx shadcn@latest add button

The command above will add the Button component to your project. You can then import it like this:

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

export default function Home() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  )
}

Repeat this process for additional components as needed.

7. Troubleshooting Common Errors

One common issue you may encounter if not properly configured is:

[plugin:vite:import-analysis] Failed to resolve import "react/jsx-dev-runtime" from "src/index.tsx". Does the file exist?

Ensure to follow the steps and You can consult the shadCN documentation for clarity.

Wrapping Up

With these steps, you can use ShadCN in your Vite + React project. If you found this guide helpful, feel free to share it with others!

Happy coding! 🚀