import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.Contribute);

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

Contributing workflow

• Decide on what you want to contribute.
• If you would like to implement a new feature, discuss it with the maintainer (GitHub Discussions or Discord) before jumping into coding.
• After finalizing issue details, you can begin working on the code.
• Run tests with npm test and 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 ❤️!

Get started with Mantine locally

• Install the editorconfig extension for your editor.
• Fork the repository, then clone or download your fork.
• Run nvm use to switch to the Node version specified in .nvmrc file (install nvm).
• Install dependencies with yarn – yarn
• Setup project – npm run setup
• Build local version of all packages – npm run build
• To start storybook – npm run storybook
• To start docs – npm run docs
• To rebuild props descriptions – npm run docs:docgen

npm scripts

All npm scripts are located at main package.json. Individual packages do not have dedicated scripts.

Development scripts

• storybook – Starts the storybook development server. To start storybook for a specific component, use the npm run storybook Tooltip command.
• docs – Starts the docs development server.

Testing scripts

• syncpack – runs syncpack
• typecheck – runs TypeScript typechecking with tsc --noEmit on all packages and docs
• lint – runs oxlint and stylelint on the codebase
• jest – runs tests with jest
• test – runs all above testing scripts

Docs scripts

• docs:docgen – generates components types information with docgen script
• docs:build – builds docs for production
• docs:deploy – builds and deploys docs to the GitHub Pages
• docs:deploy:alpha – builds and deploys docs to Cloudflare Pages alpha-mantine-dev project
• docs:deploy:v7 – builds and deploys docs to Cloudflare Pages v7-mantine-docs project
• docs:deploy:v8 – builds and deploys docs to Cloudflare Pages v8-mantine-docs project