A clean React starter template with TypeScript, Tailwind CSS, and a responsive layout system including a collapsible sidebar and Darkmode toggle. This template provides a solid foundation for building modern web applications with best practices.
- ⚡️ Vite
- 🔥 React 19
- 🔒 TypeScript
- 💅 Tailwind CSS
- 🌓 Dark Mode
- 📱 Mobile First Responsive Design
- 🧩 Schadcn Configured
- 📁 Clean Project Structure
- 🔄 Path Aliases - Import components using
@/prefix
- Node.js (v16 or higher)
- npm, yarn or better pnpm
- Clone the repository:
git clone https://github.com/amddevmh/react-starter.git
cd frontend- Install dependencies:
npm install
# or
yarn- Start the development server:
npm run dev
# or
yarn dev- Open your browser and visit
http://localhost:3000
├── public/ # Static assets
├── src/
│ ├── components/ # Reusable components
│ ├── App.tsx # Main application component
│ ├── main.tsx # Application entry point
│ └── index.css # Global styles and Tailwind directives
├── .gitignore # Git ignore file
├── index.html # HTML template
├── package.json # Project dependencies and scripts
├── tsconfig.json # TypeScript configuration
├── vite.config.ts # Vite configuration
└── README.md # Project documentation
The template comes with a built-in theme system. You can customize the colors in src/index.css by modifying the CSS variables in the :root and .dark selectors.
Place new components in the src/components directory. For UI components that are part of your design system, add them to src/components/ui/.
Path aliases are configured in tsconfig.json and vite.config.ts. You can import components using the @/ prefix:
import { Button } from "@/components/ui/button";npm run dev- Start the development servernpm run build- Build for productionnpm run preview- Preview the production build locally
The template supports all modern browsers, including:
- Chrome
- Firefox
- Safari
- Edge
This project is licensed under the MIT License.
Made with ❤️ by Ahmed Mouelhi