shadcn/ui কী?
- Re-usable UI components এর collection
- তুমি component copy করে নিজের project এ রাখো (dependency না)
- Full control তোমার হাতে – customize করতে পারবে
Step 1: Path alias setup করো
প্রথমে tsconfig.json update করো। ফাইল খোলো এবং এভাবে বানাও:
{
"files": [],
"references": [
{ "path": "./tsconfig.app.json" },
{ "path": "./tsconfig.node.json" }
],
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
}
}
Step 2: tsconfig.app.json update করো
{
"compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"verbatimModuleSyntax": true,
"noEmit": true,
"jsx": "react-jsx",
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true,
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
},
"include": ["src"]
}
Step 3: Vite config এ alias add করো
vite.config.ts update করো:
import path from "path"
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
plugins: [react(), tailwindcss()],
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
},
},
})
Step 4: Node types install করো
npm install -D @types/node
Step 5: shadcn/ui initialize করো
npx shadcn@latest init
এটা কিছু প্রশ্ন করবে:
- Style: New York (recommend করি)
- Base color: Slate বা Zinc (তোমার পছন্দ)
- CSS variables: Yes
Step 6: Verify করো
src/ folder এ দেখো:
components/folder তৈরি হয়েছেlib/utils.tsfile তৈরি হয়েছে
components.json file root এ তৈরি হয়েছে।