/react-mantine-tailwind

A React template integrating Mantine UI and Tailwind CSS for modern web development

Primary LanguageTypeScriptMIT LicenseMIT

@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.

✨ 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 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)
node -v
npm -v

Installation

Run script

pnpm create trapar-waves

Install dependencies

npm install
yarn install
pnpm install

Development

Start the development server:

npm run dev
yarn dev
pnpm dev

Build

Build the project for production:

npm run build
yarn build
pnpm build

Preview

Preview the production build locally:

npm run preview
yarn preview
pnpm preview

Linting

Lint the codebase:

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 file for details.

👤 Author

🔗 Links