@trapar-waves/react-mantine-tailwind

A project combining React, Mantine UI, and Tailwind CSS for building modern web applications.

✨ 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.8.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.

🚀 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 # or yarn -v or pnpm -v

Installation

1. Clone the repository:

   git clone https://github.com/Trapar-waves/react-mantine-tailwind.git
   cd react-mantine-tailwind

2. Install dependencies:

   # Use your preferred package manager
   npm install
   # or
   yarn install
   # or
   pnpm install

🛠️ Usage

Available Scripts

Common scripts available via npm run <script>, yarn <script>, or pnpm <script>:

• dev: Starts the development server with hot module replacement (HMR).
• build: Creates a production-ready build of the application.
• preview: Launches a local server to preview the production build.

Example:

# Start development server
npm run dev 

# Create production build
npm run build 

# Preview production build
npm run preview

💻 Tech Stack

Key technologies used in this project include:

• Framework/Library: React (v19)
• UI Toolkit/Styling: Mantine UI (@mantine/core), Tailwind CSS (tailwindcss)
• Build Tool: Rsbuild (@rsbuild/core)
• Language: TypeScript (v5.8.x)
• CSS Processing: PostCSS with plugins like autoprefixer and postcss-simple-vars
• Linting: ESLint with @antfu/eslint-config

See the package.json for a full list of dependencies.

🤝 Contributing

Contributions are welcome!

📄 License

Distributed under the ISC License. See LICENSE file for more information.

👤 Author

• Rikka ([e-mail])
• GitHub Profile: Muromi-Rikka

🔗 Links

• Repository: https://github.com/Trapar-waves/react-mantine-tailwind
• Homepage: https://github.com/Trapar-waves/react-mantine-tailwind
• Issues: Bug Tracker