Skip to content

Instantly share code, notes, and snippets.

@isarojdahal
Last active September 11, 2023 12:53
Show Gist options
  • Save isarojdahal/1d2f7a9d61e84ee72b33f6bc2c52f25e to your computer and use it in GitHub Desktop.
Save isarojdahal/1d2f7a9d61e84ee72b33f6bc2c52f25e to your computer and use it in GitHub Desktop.
ShadCN Setup for Atomic Based UI Structure for React-Project for Vite based Project.
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
@isarojdahal
Copy link
Author

..

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment