Build faster with Premium Chakra UI Components 💎

Learn more
Skip to Content
DocsEnterpriseBlogShowcase
Sponsor

Contributing to Chakra UI

The guide to contributing to Chakra UI v3.0

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.
info
We welcome all contributions, no matter how big or small.

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.

Zag.js

Component logic modelled as a state machine

Ark UI

State machine from Zag.js converted to headless UI components

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

We recommend using the following extensions in your editor:

Previous

CLI

Next

Next.js (App)