This is a template for projects using React and Mantine with JavaScript. It provides a solid, customizable foundation for building modern web applications with ease.
- React: A popular JavaScript library for building user interfaces.
- Mantine: A fully featured component library with all the tools you need to build a modern, user-friendly UI quickly.
- JavaScript (ES6+): Modern JavaScript setup to keep your code efficient and clean.
- Pre-configured tools: Includes basic configurations for ESLint, Prettier, and other development scripts.
- Dark Mode Support: Integrated dark mode using Mantine's theming system.
Make sure you have the following installed before getting started:
This template provides a basic structure for building React applications with Mantine. You can start by modifying the existing components or creating new ones to build your application.
- Click on the
Use this templatebutton on the top right of the github repository. - Click on the
Create a new repositorybutton. - Clone the new repository to your local machine.
-
Install the dependencies:
Using npm:
yarn
In the project directory, you can run the following commands:
Runs the app in development mode. Open http://localhost:5173 to view it in the browser. The app will reload if you make edits.
Builds the app for production into the build folder. It optimizes the build
for the best performance.
Runs ESLint to check for code style and syntax issues.
Runs the production build locally to preview the app. Open http://localhost:4173 to view it in the browser.
.
├── public/ # Public files (index.html, favicon, etc.)
├── src/
│ ├── assets/ # Static assets like images and fonts
│ ├── components/ # Reusable React components
│ ├── services/ # API services
│ ├── hooks/ # Custom React hooks
│ ├── pages/ # Application pages
│ ├── App.jsx # Root component
│ └── main.jsx # Main React entry point
├── eslint.config.js # ESLint configuration
├── package.json # Project dependencies and scripts
├── package-lock.json # Lock file for npm
├── postcss.config.cjs # PostCSS configuration
├── README.md # Project information
└── vite.config.js # Vite configurationFeel free to modify the structure, components, and styling according to your needs. Mantine's documentation is an excellent resource for customizing the UI components to fit your project.