I often find myself creating small, specialized tools for work-related tasks — banner generators, image compressors, file format converters. These projects are compact, but they still benefit from a solid foundation. Repeating the same setup for each new tool gets tedious and leads to inconsistencies, so I decided to create a reusable template.
The GitHub link of this template is here React-Vite-Shadcn.
React Vite Template
My project template is based on React and Vite. At its core is React, and I've chosen Vite as the build tool. For UI components I'm using Shadcn UI, a collection of reusable components that speeds up UI development. For code quality, I'm using Biome.js, a fast tool that combines linting and formatting. I also use TypeScript for type safety. I'm experimenting with Lefthook, a pre-commit hook manager, as an alternative to husky/lint-staged. For routing I'm using Tanstack Router.
Why These Tools?
I chose these tools to keep setup quick while leaving room for future improvements. Here's my thinking:
- React's component-based architecture is good for modular, reusable UI elements.
- Vite offers fast hot module replacement (HMR) and quick builds, which I like because it keeps iteration fast.
- Shadcn UI provides customizable, accessible components that can be easily styled and integrated.
- Biome.js replaces the traditional ESLint + Prettier setup with a single, fast tool. While it's relatively new, it simplifies the code quality setup.
- TypeScript might be overkill for small tools, but I like having it in every project. It catches type errors early and makes it easier to jump in and out of a project later.
- Lefthook manages pre-commit hooks so I don't forget to run linting and formatting before committing. It needs less setup than husky/lint-staged, though I'm still figuring out if I've configured it properly.
- Tanstack Router for routing. The projects are small, so I don't need full framework routing like Next.js or Remix with server-side rendering. But the router can expand to support SSR if needed.
As I use this template for future projects, I plan to refine it based on actual usage. This includes fine-tuning the Biome.js configuration as I learn what works best in practice.
How to use this template
To get started with this template:
- Clone the repository:
git clone https://github.com/indralukmana/react-vite-shadcn.git - Install dependencies:
pnpm install - Start the development server:
pnpm dev