Why I Built This Boilerplate

I initially started this project because I wanted to create a Vite project using ShadCN. However, as someone who had never used the React + TypeScript template before, I quickly realized that setting it up could be tricky. Being an absolute beginner in TypeScript, I tried to avoid it but eventually had to embrace the learning curve.

During this process, I found that setting up a project in Vite with ShadCN and a theme-switching feature can be a bit overwhelming for first-timers. I didn’t want to go through all the trouble every time I started a new project, so I built this boilerplate for myself. Then I thought, why not share it with others who might face the same struggle? I am also open to suggestions, including whether this setup is feasible with a React + JavaScript template.

Key Features

This boilerplate includes a proper folder structure with clearly defined components:

  • Components Folder:
    • ui/ (ShadCN components)
    • layout/ (Contains project layout: Layout.tsx, Navbar.tsx, Footer.tsx)
    • themes/ (Theme provider and theme toggle)
  • A separate routes/ folder
  • A pages/ folder
  • A clean and well-structured app.js codebase

Installation & Usage

Getting started is super simple:

  1. Clone the repository
  2. Run npm install
  3. Start the development server with npm run dev

That’s it! You’ll have a basic project layout ready to go.

Customization

This boilerplate provides a flexible structure that allows for easy customization:

  • Use ShadCN’s theming feature to generate custom CSS variables for index.css.
  • Update the Navbar.tsx and Footer.tsx code as needed.
  • Modify the layout to fit your project requirements.

I have provided a structured project layout, but it’s designed to be easily editable.

Tech Stack

This project is built with:

  • Vite – A fast and modern frontend build tool
  • TypeScript – For type safety and better developer experience
  • Tailwind CSS – A utility-first CSS framework
  • ShadCN – For beautiful and customizable UI components
  • Lucide-react – A modern and lightweight icon library

As a beginner in Tailwind CSS, I initially avoided it, but given the current industry standards, learning it has become essential.

Future Plans

I’m open to suggestions because I’m sure I might have missed some things while building this boilerplate. If you have any ideas for improvements or additional features, feel free to share them!

Call to Action

If you find this boilerplate useful, consider starring the repository on GitHub ⭐. Feel free to contribute, provide feedback, or suggest enhancements.

GITHUB LINK - source code

PREVIEW - preview

Let’s make setting up Vite + ShadCN projects easier for everyone! 🚀