https://github.com/nabhag8848/react-vite-template
Modern React Template with Vite
https://github.com/nabhag8848/react-vite-template
motion react react-router styled-components theme typescript vite
Last synced: 11 months ago
JSON representation
Modern React Template with Vite
- Host: GitHub
- URL: https://github.com/nabhag8848/react-vite-template
- Owner: Nabhag8848
- License: mit
- Created: 2025-04-07T08:23:18.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-04-14T08:42:17.000Z (about 1 year ago)
- Last Synced: 2025-04-30T22:54:58.623Z (about 1 year ago)
- Topics: motion, react, react-router, styled-components, theme, typescript, vite
- Language: TypeScript
- Homepage:
- Size: 155 KB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Modern React Template with Vite
A modern, minimal React template built with Vite, featuring TypeScript, React Router, Emotion, and system-aware theming. This template provides a solid foundation for building modern web applications with best practices and excellent developer experience.
## Features
- ⚡️ **Vite** - Lightning fast build tool with instant HMR
- 🎨 **Emotion** - Powerful CSS-in-JS with theme support
- 🌓 **Dark/Light Mode** - System-aware theming with smooth transitions
- 🛣️ **React Router** - Declarative routing with the latest React Router
- 📝 **TypeScript** - Type safety and better developer experience
- 🎯 **ESLint** - Strict TypeScript and React specific linting rules
- 📦 **Modern Package Management** - Using pnpm for efficient dependency management
- 🏗️ **Default Layout** - Clean and maintainable layout structure
- 🎭 **Motion Support** - Built-in animation capabilities
- 🚀 **Production Ready** - Optimized build setup for production
## Code Examples
### Theme Setup and Usage
This project uses Emotion for theming with a light/dark mode system. Here's how it's implemented:
#### 1. Theme Provider Setup
```tsx
// AppRouterProviders.tsx
import { ThemeProvider } from "@emotion/react";
import { THEME_DARK } from "@ui/theme/dark";
import { THEME_LIGHT } from "@ui/theme/light";
import { useSystemColorScheme } from "@ui/theme/hooks/useSystemColorScheme";
export const AppRouterProviders = () => {
// Automatically detect system color scheme
const preferredColorScheme = useSystemColorScheme();
const isDarkMode = preferredColorScheme === "dark";
const theme = isDarkMode ? THEME_DARK : THEME_LIGHT;
// Set HTML class for dark/light mode
document.documentElement.className = isDarkMode ? "dark" : "light";
return (
);
};
```
#### 2. Global Styles Setup
```tsx
// DefaultLayout.tsx
import { Global, useTheme } from "@emotion/react";
import { globalStyles } from "@ui/styles/global";
export const DefaultLayout = () => {
const theme = useTheme();
const styles = globalStyles(theme);
return (
<>
>
);
};
```
#### 3. Using Theme in Components
```tsx
// Example component using theme
import { useTheme } from "@emotion/react";
import styled from "styled-components";
const StyledComponent = styled.div`
background-color: ${(props) => props.theme.background.primary};
//...OtherStyles
`;
const MyComponent = () => {
const theme = useTheme();
return (
Hello World
);
};
```
#### Key Features:
- Automatic dark/light mode detection based on system preferences
- Theme values accessible throughout the application
- Global styles that respond to theme changes
#### Theme Structure:
```typescript
interface Theme {
background: {
primary: string;
secondary: string;
tertiary: string;
};
text: {
primary: string;
secondary: string;
};
spacing: {
sm: string;
md: string;
lg: string;
};
// ... other theme properties
}
```
### Routing Setup
```tsx
// Basic route configuration
}>
} />
} />
```
## Quick Start
### Installation
```bash
# Clone the repository
git clone [your-repo-url]
# Navigate to project directory
cd [your-project-name]
# Install dependencies
pnpm install
```
### Development
```bash
# Start development server
pnpm dev
```
The development server will start at http://localhost:3001
### Build
```bash
# Create production build
pnpm build
```
## Project Structure
```
src/
├── app/ # Application-specific components and logic
├── ui/ # Reusable UI components and theme
│ ├── layout/ # Layout components
│ ├── theme/ # Theme configuration
│ └── styles/ # Global styles
├── utils/ # Utility functions
└── main.tsx # Application entry point
```
## Theme Configuration
The template includes a system-aware theme that automatically switches between light and dark mode based on system preferences. Theme configuration can be found in:
- `src/ui/theme/light.ts`
- `src/ui/theme/dark.ts`
## ESLint Configuration
The project includes a comprehensive ESLint setup with:
- TypeScript-aware linting
- React-specific rules
- React Hooks linting
- Strict type checking
## License
This project is licensed under the MIT License - see the LICENSE file for details.
## Contributing
Contributions are welcome! Please feel free to submit a Pull Request.