1. Create new Vite Project

Begin by setting up a new React project with Vite, choosing the React + TypeScript template.

pnpm create vite@latest

2. Add Tailwind CSS (preferred v4)

Setup Tailwind CSS using the given commands:

pnpm add tailwindcss @tailwindcss/vite

3. Replace all styling in src/index.css with the following command:

@import "tailwindcss";

4. Modify 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"
    },
    {
      "path": "./tsconfig.node.json"
    }
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

5. Modify tsconfig.app.json file:

Add the following code to the tsconfig.app.json file to resolve paths, for your IDE:

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

6. Modify vite.config.ts file:

Add the following code to the vite.config.ts so your app can resolve paths without error:

pnpm add -D @types/node

Installing types for node will help use path:

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

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

7. Install Shad/cn

Run the shadcn init command to setup your project

pnpm dlx shadcn@latest init

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

Which color would you like to use as base color? > Neutral

8. Add Themes

To implement theme of your choice, go to Themes

9. Add Components

Also, add the registry name in order to access it via cli!

{
  "$schema": "https://ui.shadcn.com/schema.json",
  ///...
  "registries": {
    "@ruzul": "https://plaguin.ruzul.shop/r/{name}.json"
  }
}

The basic setup is done! Now, you can checkout the component you want to add for further instructions on how to add it.