https://github.com/Trapar-waves/react-mantine-tailwind
A React template integrating Mantine UI and Tailwind CSS for modern web development
https://github.com/Trapar-waves/react-mantine-tailwind
Last synced: 3 months ago
JSON representation
A React template integrating Mantine UI and Tailwind CSS for modern web development
- Host: GitHub
- URL: https://github.com/Trapar-waves/react-mantine-tailwind
- Owner: Trapar-waves
- License: mit
- Created: 2025-04-01T05:11:28.000Z (8 months ago)
- Default Branch: master
- Last Pushed: 2025-09-09T01:45:28.000Z (3 months ago)
- Last Synced: 2025-09-09T03:47:43.323Z (3 months ago)
- Language: TypeScript
- Homepage:
- Size: 1.14 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-rstack - @trapar-waves/react-mantine-tailwind
README
# @trapar-waves/react-mantine-tailwind
---
[中文](./readme/README-CN.md) | [日本語](./readme/README-JP.md) | [Русский язык](./readme/README-RU.md)
> A React template integrating Mantine UI and Tailwind CSS for modern web development.
## ✨ Features
- **Modern UI Framework:** Built using React (v19) for a component-driven, declarative interface.
- **Rich Component Library:** Integrates with Mantine UI (`@mantine/core` and `@mantine/hooks`) providing pre-built UI elements and utility hooks.
- **Utility-First Styling:** Employs Tailwind CSS along with `@tailwindcss/postcss`, enabling flexible and rapid styling while maintaining consistency.
- **PostCSS Integration:** Leverages PostCSS plugins like `postcss-import`, `autoprefixer`, and `postcss-simple-vars` for advanced CSS processing.
- **Type Safety:** Utilizes TypeScript (v5.9.x) to enhance code reliability and provide robust type checking during development.
- **Fast Development Workflow:** Uses Rsbuild (`@rsbuild/core` and `@rsbuild/plugin-react`) for optimized builds and efficient development server performance.
- **Icon Support:** Includes `@iconify/json` and `@iconify/tailwind` for scalable and customizable iconography.
- **Consistent Design Language:** Combines `postcss-preset-mantine` and `tailwind-preset-mantine` for seamless integration between Mantine and Tailwind styles.
- **Focus on Code Quality:** Includes ESLint with `@antfu/eslint-config` for linting and enforcing best practices in the codebase.
- **Git Hooks:** Integrated with Husky and `lint-staged` for automated code quality checks on commit.
- **Automated Releases:** Utilizes GitHub Actions for automated releases and changelog generation.
## 💻 Tech Stack
- **Framework/Library:** React (v19)
- **UI Toolkit/Styling:** Mantine UI (`@mantine/core`), Tailwind CSS (`tailwindcss`)
- **Build Tool:** Rsbuild (`@rsbuild/core`)
- **Language:** TypeScript (v5.9.x)
- **CSS Processing:** PostCSS with plugins like `autoprefixer` and `postcss-simple-vars`
- **Linting:** ESLint with `@antfu/eslint-config`
- **State Management:** Zustand
- **Routing:** Tanstack Router
- **Data Fetching:** Tanstack Query (React Query)
- **Table Component:** Tanstack Table
See the [package.json](./package.json) for a full list of dependencies.
## 🚀 Getting Started
Follow these instructions to get the project running locally.
### Prerequisites
Ensure you have the following installed:
- Node.js (>= 18.x recommended)
- Package manager (npm, yarn, or pnpm)
```bash
node -v
npm -v
```
### Installation
Run script
```bash
pnpm create trapar-waves
```
Install dependencies
```bash
npm install
yarn install
pnpm install
```
### Development
Start the development server:
```bash
npm run dev
yarn dev
pnpm dev
```
### Build
Build the project for production:
```bash
npm run build
yarn build
pnpm build
```
### Preview
Preview the production build locally:
```bash
npm run preview
yarn preview
pnpm preview
```
### Linting
Lint the codebase:
```bash
npm run lint
yarn lint
pnpm lint
```
## 🤝 Contributing
Contributions are welcome and greatly appreciated! Please follow these steps to contribute:
1. Fork the repository
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add some amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request
Please ensure your code adheres to the project's linting rules and passes all checks before submitting a PR.
## 📄 License
This project is licensed under the MIT License - see the [LICENSE](./LICENSE) file for details.
## 👤 Author
- **Rikka:** (admin@rikka.cc)
- **GitHub Profile:** [Muromi-Rikka](https://github.com/Muromi-Rikka)
## 🔗 Links
- **Repository:** [https://github.com/Trapar-waves/react-mantine-tailwind](https://github.com/Trapar-waves/react-mantine-tailwind)
- **Homepage:** [https://github.com/Trapar-waves/react-mantine-tailwind](https://github.com/Trapar-waves/react-mantine-tailwind)
- **Issues:** [https://github.com/Trapar-waves/react-mantine-tailwind/issues](https://github.com/Trapar-waves/react-mantine-tailwind/issues)