A React template integrating Mantine UI and Tailwind CSS for modern web development
npm install @trapar-waves/react-mantine-tailwind!npm version
!npm dm
!License
!GitHub last commit
!GitHub Actions Workflow Status
!Renovate
---
中文 | 日本語 | Русский язык
> A React template integrating Mantine UI and Tailwind CSS for modern web development.
- 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.
- 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 for a full list of dependencies.
Follow these instructions to get the project running locally.
Ensure you have the following installed:
- Node.js (>= 18.x recommended)
- Package manager (npm, yarn, or pnpm)
``bash`
node -v
npm -v
Run script
`bash`
pnpm create trapar-waves
Install dependencies
`bash`
npm install
yarn install
pnpm install
Start the development server:
`bash`
npm run dev
yarn dev
pnpm dev
Build the project for production:
`bash`
npm run build
yarn build
pnpm build
Preview the production build locally:
`bash`
npm run preview
yarn preview
pnpm preview
Lint the codebase:
`bash`
npm run lint
yarn lint
pnpm lint
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)git commit -m 'Add some amazing feature'
3. Commit your changes ()git push origin feature/amazing-feature`)
4. Push to the branch (
5. Open a Pull Request
Please ensure your code adheres to the project's linting rules and passes all checks before submitting a PR.
This project is licensed under the MIT License - see the LICENSE file for details.
- Rikka: (admin@rikka.cc)
- GitHub Profile: Muromi-Rikka
- Repository: https://github.com/Trapar-waves/react-mantine-tailwind
- Homepage: https://github.com/Trapar-waves/react-mantine-tailwind
- Issues: https://github.com/Trapar-waves/react-mantine-tailwind/issues