Contributing to Mantine
First of all, thank you for showing interest in contributing to Mantine! All your contributions are extremely valuable to the project!
Ways to contribute
- Improve documentation: Fix incomplete or missing docs, bad wording, examples or explanations.
- Give feedback: We are constantly working on making Mantine better. Please share how you use Mantine, what features are missing and what is done well via GitHub Discussions or Discord.
- Share Mantine: Share links to the Mantine docs with everyone who might be interested! Share Mantine on Twitter here.
- Contribute to the codebase: Propose new features via GitHub Issues, or find an existing issue that you are interested in and work on it!
- Give us a code review: Help us identify problems with the source code or make Mantine more performant.
- Decide on what you want to contribute.
- If you want to implement a new feature, discuss it with the maintainer (GitHub Discussions or Discord) before jumping into coding.
- After finalizing issue details, as you begin working on the code, please make sure to follow commit conventions.
- Run tests with
npm testand submit a PR once all tests have passed.
- Get a code review and fix all issues noticed by the maintainer.
- If you cannot finish your task or if you change your mind – that's totally fine! Just let us know in the GitHub issue that you created during the first step of this process. The Mantine community is friendly – we won't judge or ask any questions if you decide to cancel your submission.
- Your PR is merged. You are awesome!
Mantine is a monorepo, thus it is important to write correct commit messages to keep the git history clean and consistent. All commits made in this repository are divided into 3 groups:
- package commits Related to any particular package.
- docs commits Related to the documentation.
- core commits Only related to repository tooling and not associated with any package.
Commit messages consists of 3 parts:
[core] Fix documentation deployment script– Change made in repository script, it is not related to documentation or any package
[docs] Update report issues link– Change related to documentation website
[@mantine/core] Button: Add theme focus styles– Change in
@mantine/corepackage at Button component
[@mantine/hooks] use-list-state: Add remove handler– Change in
@mantine/hookspackage at use-list-state hook
- master – current version, patches for current minor version (1.0.x)
- dev – contains next minor version (1.x.0) - Most likely, you will want to create a PR to this branch.
Get started with Mantine locally
- Install the editorconfig extension for your editor.
- Fork the repository, then clone or download your fork.
- Install dependencies with yarn –
- Build local version of all packages –
npm run build:all
- Build local version of specific packages –
npm run build @mantine/core @mantine/demos @mantine/hooks
- To start storybook –
npm run storybook
- To start docs –
npm run docs
- To rebuild props descriptions –
npm run docs:docgen
All npm scripts are located at main package.json. Individual packages do not have dedicated scripts.
storybook– Starts the storybook development server. To start storybook for specific component, use the
npm run storybook Tooltipcommand.
docs– Starts the docs development server.
syncpack– runs syncpack
typecheck– runs TypeScript typechecking with
tsc --noEmiton all packages and docs
lint– runs ESLint on src folder
jest– runs tests with jest
test– runs all above testing scripts
docs:docgen– generates components types information with docgen script
docs:sizes– generates bundle size information for all packages
docs:build– runs all above docs scripts and build production docs bundle
docs:deploy– runs all above docs scripts and deploys docs to GitHub Pages