Contributing to Chakra UI

Thanks for showing interest to contribute to Chakra UI 💖, you rock!

Overview

Here are a few ways you can help improve Chakra UI

• Improve the documentation: Add new demos, fix typos, or add missing information.
• Add new demos: Add new component demos to the website and storybook. Open a PR to apps/compositions/src/examples
• Fix bugs: Report bugs, fix bugs, or add missing features.
• Contribute to the code: Propose new features by opening a Github Discussion, or find existing bugs to work on.
• Improve the code: Improve the code, fix bugs, or add missing features.

Architecture

Chakra v3.x is a composition of two projects in the Chakra ecosystem, Ark UI and Zag.js. The goal is to maintain as little code as possible in Chakra UI, and delegate the heavy lifting to these projects.

Filing Issues

The mindset for filing issues on Chakra v3.x works like this:

• If the issue is a logic or accessibility bug, then it's most likely a bug in Zag.js. Consider opening an issue in the Zag.js repository.

• If it's a styling issue, then you can fix it directly in the Chakra UI repo.

Feature Requests

The mindset for filing feature requests on Chakra v3.x works like this:

• If the feature is a new component without logic, then it can go in Chakra UI or Ark UI. Start a discussion on the Chakra UI repository

• If the feature is a new component with logic, it belongs in Zag.js. Start a discussion on the Zag.js repository.

Local Setup

• Clone the repository

git clone https://github.com/chakra-ui/chakra-ui.git

• Install dependencies with pnpm

pnpm install

• Build local version of all packages

pnpm build:fast

• Start storybook

pnpm storybook

• Start documentation website

pnpm docs dev

• Run tests

pnpm test

Recommended Extensions

We recommend using the following extensions in your editor:

• ESLint
• Prettier
• EditorConfig
• MDX