OSS Tanbou
View on GitHubProject website

Chakra UI — use accessible React components and theming from one design system

OSS scale score 307.3OSS health 96Update pace 35 commits/30d
About these scores

OSS scale score is an unbounded metric that log-compresses and weights Stars, Watchers, Forks, and Contributors. Discovery score is the current OSS scale score minus the score at discovery. Update pace is commits in the last 30 days, growth momentum is the OSS scale score difference within the recent observation window, and OSS health is a 0–100 rating based on available recency, Community Health, and release data.

Stars
40,661
Primary language
TypeScript
License
MIT
Repository last updated
Sep 15, 2026

Overview

Chakra UI is a React component system combining accessible UI components, design tokens, and theming. It provides ready-to-use pieces while remaining composable through headless primitives derived from Ark UI.

Features and best fit

Based on official documentation; not hands-on tested · Content checked:

Use accessible React components through a shared API

Components such as buttons and dialogs are designed around accessibility expectations including WAI-ARIA practices.

Sources: [2][3]

Unify themes with tokens, recipes, and semantic values

Design tokens, semantic tokens, recipes, and dark-mode support provide a shared system for product styling.

Sources: [3][4]

For SaaS and business application design systems

It fits React teams that want forms, navigation, dialogs, and other application surfaces to share accessible components and theme infrastructure.

Sources: [2]

Do not mix v2 setup examples with the v3 provider model

Current v3 usage supplies a system such as defaultSystem to ChakraProvider. Verify examples against the major version actually installed rather than following older tutorials blindly.

Sources: [3][4]

Official sources

  1. [1]chakra-ui/chakra-ui repository(2026-09-21)
  2. [2]Chakra UI README(2026-09-21)
  3. [3]@chakra-ui/react README(2026-09-21)
  4. [4]Chakra UI documentation(2026-09-21)
  5. [5]@chakra-ui/react package(2026-09-21)
  6. [6]Chakra UI MIT license(2026-09-21)
Supplemental curator note

Chakra UI provides both polished components and composable UI built on Ark UI primitives. The current `@chakra-ui/react` package is 3.37.0 and requires React/React DOM 18+ plus `@emotion/react`. Setup differs from v2 and earlier, so current v3 documentation should be used as the baseline.

Try it in 3 steps

  1. 1

    Install Chakra UI

    Add the v3 package and peer dependency using the current package README.

    npm i @chakra-ui/react @emotion/react
  2. 2

    Configure ChakraProvider

    Provide defaultSystem at the application root to enable the Chakra UI system.

    <ChakraProvider value={defaultSystem}>{children}</ChakraProvider>
  3. 3

    Render the first component

    Render a Button or another component and verify the base theme and accessible component behavior.

    <Button>I just consumed some Chakra!</Button>
Check the official README

Growth

Growth trends · Last 30 days

40,661 Stars

Trend data is still being collected.

Development activity

Last 90 days · weekly

Commits (last 30 days)
35
Open PRs
12

Development activity is still being collected.

Built with

Categories and tags

Categories

Tags

GitHub data

GitHub dataView detailed GitHub data
View on GitHub

GitHub Topics

  • chakra-ui
  • react
  • uikit
  • react-components
  • accessible
  • a11y
  • wai-aria
  • reactjs
  • dark-mode
  • ui-components
  • ui-library
  • ark-ui
Stars
40,661
Forks
3,646
Watchers
203
Open issues
2
Contributors
413
Primary language
TypeScript
License
MIT
Repository last updated
Sep 15, 2026
Write a related article

Share a guide or use case for this OSS in Markdown. Articles are published after administrator approval.

Report incorrect information

Tell us if any listing information is incorrect or outdated.