1. Home
  2. ShadCn
  3. Basic
  4. Project Setup

Project Setup

Follow link : https://ui.shadcn.com/docs/installation/vite

Step 1: Create Reactjs Project . Select the React + TypeScript template

npm create vite@latest

Step 2 . Add Tailwind CSS

npm install tailwindcss @tailwindcss/vite

step 3 : remove all in index.css and replace below code

@import "tailwindcss";

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

How can we help?