Thanks for showing interest to contribute to Chakra UI 💖, you rock!
When it comes to open source, there are different ways you can contribute, all of which are valuable. Here's a few guidelines that should help you as you prepare your contribution.
The following steps will get you up and running to contribute to Chakra UI:
-
Fork the repo (click the Fork button at the top right of this page)
-
Clone your fork locally
git clone https://github.com/<your_github_username>/chakra-ui.git
cd chakra-ui
- Setup all the dependencies and packages by running
yarn
. This command will install dependencies and bootstrap the repo usingpreconstruct
If you run into any issues during this step, kindly reach out to the Chakra UI React team here: https://discord.gg/chakra-ui
To improve our development process, we've set up tooling and systems. Chakra UI uses a monorepo structure and we treat each component as an independent package that can be consumed in isolation.
- Preconstruct to manage the development and production build of the packages.
- Many Pkg to lint our packages and execute global or package specific commands.
- Storybook for rapid UI component development and testing
- Testing Library for testing components and hooks
- Changeset for changes documentation, changelog generation, and release management.
yarn
: bootstraps the entire project, symlinks all dependencies for
cross-component development and builds all components.
yarn storybook
: starts storybook server and loads stories in files that
end with .stories.tsx
.
yarn build
: run build for all component packages.
yarn test
: run test for all component packages.
yarn release
: publish changed packages.
Build components in isolation with Storybook. When using Storybook, the build
process needs to be run separately. Run yarn build && yarn preconstruct watch
in one terminal and then yarn storybook
in a second terminal.
Please conform to the issue template and provide a clear path to reproduction with a code example. The best way to show a bug is by sending a CodeSandbox link.
You may wish to use our starters to help you get going:
- JavaScript Starter: https://codesandbox.io/s/chakra-ui-javascript-lzzg9
- TypeScript Starter: https://codesandbox.io/s/chakra-ui-typescript-pomi8
Please provide thoughtful comments and some sample API code. Proposals that don't line up with our roadmap or don't have a thoughtful explanation will be closed.
Pull requests need only the 👍 of two or more collaborators to be merged; when the PR author is a collaborator, that counts as one.
Before you create a Pull Request, please check whether your commits comply with the commit conventions used in this repository.
When you create a commit we kindly ask you to follow the convention
category(scope or module): message
in your commit message while using one of
the following categories:
feat / feature
: all changes that introduce completely new code or new featuresfix
: changes that fix a bug (ideally you will additionally reference an issue if present)refactor
: any code related change that is not a fix nor a featuredocs
: changing existing or creating new documentation (i.e. README, docs for usage of a lib or cli usage)build
: all changes regarding the build of the software, changes to dependencies or the addition of new dependenciestest
: all changes regarding tests (adding new tests or changing existing ones)ci
: all changes regarding the configuration of continuous integration (i.e. github actions, ci system)chore
: all changes to the repository that do not fit into any of the above categories
If you are interested in the detailed specification you can visit https://www.conventionalcommits.org/ or check out the Angular Commit Message Guidelines.
-
Fork of the chakra-ui repository and clone your fork
-
Create a new branch out of the
main
branch. We follow the convention[type/scope]
. For examplefix/accordion-hook
ordocs/menu-typo
.type
can be eitherdocs
,fix
,feat
,build
, or any other conventional commit type.scope
is just a short id that describes the scope of work. -
Make and commit your changes following the commit convention. As you develop, you can run
yarn pkg <module> build
andyarn pkg <module> test
to make sure everything works as expected. Please note that you might have to runyarn boot
first in order to build all dependencies. -
Run
yarn changeset
to create a detailed description of your changes. This will be used to generate a changelog when we publish an update. Learn more about Changeset. Please note that you might have to rungit fetch origin main:master
(where origin will be your fork on GitHub) beforeyarn changeset
works.
If you made minor changes like CI config, prettier, etc, you can run
yarn changeset add --empty
to generate an empty changeset file to document your changes.
All commits that fix bugs or add features need a test.
Dear Chakra team: Please do not merge code without tests
That would be amazing! Reach out to the core team here: https://discord.gg/chakra-ui. We would love to support you any way we can.
Our docsite lives in a separate repo. If you're interested in contributing to the documentation, check out the docsite contribution guide.
By contributing your code to the chakra-ui GitHub repository, you agree to license your contribution under the MIT license.