ShadCN Setup for Atomic Based UI Structure for React-Project for Vite based Project.

gistfile1.txt

Setup your React project with Vite.

pnpm add -D tailwindcss postcss autoprefixer
pnpx tailwindcss init -p

Inside tsconfig.json
"baseUrl": ".",
"paths": {
  "@/*": ["./src/*"]
}

pnpm add @types/node -D 

Replace vite.config.ts with following code : 
```
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"),
    },
  },
})


pnpm dlx shadcn-ui@latest init


✔ Would you like to use TypeScript (recommended)? … no / yes
✔ Which style would you like to use? › Default
✔ Which color would you like to use as base color? › Slate
✔ Where is your global CSS file? … src/assets/css/global.css
✔ Would you like to use CSS variables for colors? … no / yes
✔ Where is your tailwind.config.js located? … tailwind.config.js
✔ Configure the import alias for components: … src/ui/atoms
✔ Configure the import alias for utils: … src/ui/utils
✔ Are you using React Server Components? … no / yes
✔ Write configuration to components.json. Proceed? … yes

..