https://github.com/talhat298/setupreacthomepage
This React boilerplate, powered by Vite, integrates TailwindCSS and DaisyUI to provide a fast, responsive, and scalable foundation for modern web applications. It features React Router for seamless navigation, ensuring a streamlined development experience with built-in styling and component support.
https://github.com/talhat298/setupreacthomepage
daisyui es6 git javascript jest npm react react-router-dom tailwindcss vite
Last synced: 3 months ago
JSON representation
This React boilerplate, powered by Vite, integrates TailwindCSS and DaisyUI to provide a fast, responsive, and scalable foundation for modern web applications. It features React Router for seamless navigation, ensuring a streamlined development experience with built-in styling and component support.
- Host: GitHub
- URL: https://github.com/talhat298/setupreacthomepage
- Owner: TalhaT298
- Created: 2024-08-30T05:18:30.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-12-10T12:59:25.000Z (over 1 year ago)
- Last Synced: 2026-01-03T14:30:01.777Z (6 months ago)
- Topics: daisyui, es6, git, javascript, jest, npm, react, react-router-dom, tailwindcss, vite
- Language: JavaScript
- Homepage:
- Size: 58.6 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Router Tailwind DaisyUI Boilerplate
This repository provides a fully functional boilerplate for creating React projects with integrated React Router, TailwindCSS, DaisyUI, and essential configurations. It streamlines the process of starting a new project, allowing you to focus on building your application.
## Features
- **React Router DOM**: Set up for easy routing in your React applications.
- **TailwindCSS**: Pre-configured utility-first CSS framework.
- **DaisyUI**: Customizable component library built on TailwindCSS.
- **Vite**: Fast development server and build tool.
- **Linting**: Configured with ESLint for consistent code quality.
- **Dark and Light Themes**: Includes multiple DaisyUI themes like `dark`, `light`, `night`, and more.
## Installation
Clone this repository and get started with the following steps:
1. **Clone the repository:**
```bash
git clone https://github.com/yourusername/react-router-tailwind-boilerplate.git
cd react-router-tailwind-boilerplate
```
2. **Install dependencies:**
```bash
npm install
```
3. **Start the development server:**
```bash
npm run dev
```
## Usage
This boilerplate is ready for you to build your application. Below are key components:
- **`Home` Component:** A simple homepage template with a banner.
- **`Navbar` Component:** Responsive navigation bar with dropdown support for mobile screens.
- **`Footer` Component:** Customizable footer with social media links.
Feel free to extend or replace these components based on your project needs.
### File Structure
```
src/
├── components/
│ ├── Banner/
│ │ └── Banner.jsx
│ ├── Footer/
│ │ └── Footer.jsx
│ └── Navbar/
│ └── Navbar.jsx
├── Routes/
│ └── Routes.jsx
├── App.jsx
├── index.jsx
└── index.css
```
### TailwindCSS Configuration
TailwindCSS is configured in `tailwind.config.js` to scan all necessary files and includes DaisyUI with multiple themes.
```js
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [require("daisyui")],
daisyui: {
themes: ["dark", "light", "black", "forest", "autumn", "valentine", "night", "dracula"],
},
};
```
## Scripts
- **`npm run dev`**: Starts the development server.
- **`npm run build`**: Builds the project for production.
- **`npm run preview`**: Previews the production build.
- **`npm run lint`**: Runs ESLint for code quality checks.
## License
This project is licensed under the MIT License. See the `LICENSE` file for details.
---