How to Use Shadcn UI and TanStack Router in React.js

In this blog post, I'll guide you through the steps of integrating Shadcn UI and TanStack Router into your React.js project.

Topics Covered

What is Shadcn UI?
What is TanStack Router?
Installing and Setting Up Shadcn UI for Your React Project
- Add Tailwind and its configuration
- Configure path aliases
- Initialize Shadcn/UI
- Add Your First Shadcn/UI Component
How to Integrate TanStack Router into Your React Application
- Install & Configure TanStack Router
- Create the Routes
- Register the Routes
- Create a Layout Component
Conclusion

Name		Name	Last commit message	Last commit date
Latest commit History 2 Commits
public		public
src		src
.gitignore		.gitignore
README.md		README.md
components.json		components.json
eslint.config.js		eslint.config.js
index.html		index.html
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
postcss.config.js		postcss.config.js
tailwind.config.js		tailwind.config.js
tsconfig.app.json		tsconfig.app.json
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vite.config.ts		vite.config.ts