# @chakra-ui/react > Responsive and accessible React UI components built with React and Emotion Latest version **3.37.0** (published 2026-08-28) · MIT license · 0 weekly downloads ## Install ```sh npm install @chakra-ui/react pnpm add @chakra-ui/react yarn add @chakra-ui/react bun add @chakra-ui/react ``` ## Health **Score 70/100 (B)** — status: active. Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score; popular repo. Warnings: low downloads. ## Facts | | | |---|---| | Version | 3.37.0 | | Published | 2026-08-28 | | First published | 2020-11-13 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 7 | | Unpacked size | 2.6 MB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 40657 | | Author | Segun Adebayo | | Maintainers | segunadebayo, schroetier | | Keywords | react, ui, design-system, react-components, uikit, accessible, components, emotion, library, design-system | ## Links - npm: https://www.npmjs.com/package/@chakra-ui/react - Repository: https://github.com/chakra-ui/chakra-ui - Homepage: https://chakra-ui.com/ - npm.io page: https://npm.io/package/@chakra-ui/react ## Dependencies (7) - [csstype](https://npm.io/package/csstype.md) ^3.2.3 - [@ark-ui/react](https://npm.io/package/@ark-ui/react.md) 5.39.0 - [@emotion/utils](https://npm.io/package/@emotion/utils.md) ^1.4.2 - [@emotion/serialize](https://npm.io/package/@emotion/serialize.md) ^1.3.3 - [@emotion/is-prop-valid](https://npm.io/package/@emotion/is-prop-valid.md) ^1.4.0 - [@pandacss/is-valid-prop](https://npm.io/package/@pandacss/is-valid-prop.md) ^1.4.2 - [@emotion/use-insertion-effect-with-fallbacks](https://npm.io/package/@emotion/use-insertion-effect-with-fallbacks.md) ^1.2.0 ## Alternatives - [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads - [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads - [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads - [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads - [@mesalvo/react-ui](https://npm.io/package/@mesalvo/react-ui.md) — 1.7K weekly downloads ## Recent versions - 3.37.0 (latest) — 2026-08-28 - 2.10.10 (v2-latest) — 2026-06-04 - 3.0.0-next.32 (next) — 2024-10-22 - 0.0.0-dev-20240521164950 (dev) — 2024-05-21 - 1.8.9 (v1-latest) — 2022-09-16 - 0.0.0-next-dev-202241614737 (next-dev) — 2022-05-16 - 0.0.0-pr-202212011232 (pr) — 2022-02-20 - 0.0.0-canary-2021118164051 (canary) — 2021-12-08 - 3.36.1 — 2026-07-19 - 3.36.0 — 2026-06-10 - 3.35.0 — 2026-04-22 - 3.34.0 — 2026-03-03 - 3.33.0 — 2026-02-11 - 3.32.0 — 2026-02-03 - 3.31.0 — 2026-01-10 - … 905 more at https://npm.io/package/@chakra-ui/react/versions ## README # @chakra-ui/react [![npm version](https://npmx.dev/api/registry/badge/version/@chakra-ui/react)](https://npmx.dev/package/@chakra-ui/react) [![npm downloads](https://npmx.dev/api/registry/badge/downloads/@chakra-ui/react)](https://npmx.dev/package/@chakra-ui/react) [![types](https://npmx.dev/api/registry/badge/types/@chakra-ui/react)](https://npmx.dev/package/@chakra-ui/react) [![license](https://npmx.dev/api/registry/badge/license/@chakra-ui/react)](https://github.com/chakra-ui/chakra-ui/blob/main/LICENSE) Chakra UI is a component system for building products with speed. Accessible React components for building high-quality web apps and design systems. Works with Next.js RSC. - **Works out of the box.** A set of polished React components with sensible defaults. - **Flexible & composable.** Components are built on top of headless UI primitives ([Ark UI](https://ark-ui.com)) for endless composability. - **Accessible.** Components follow the WAI-ARIA guidelines and are tested against common accessibility issues. - **Themeable.** Customize every part of the components with design tokens, recipes, and semantic tokens. Dark mode included. ## Documentation https://chakra-ui.com - Latest: https://chakra-ui.com - v2: https://v2.chakra-ui.com - v1: https://v1.chakra-ui.com ## Installation Install the `@chakra-ui/react` package and its peer dependency: ```sh # with npm npm i @chakra-ui/react @emotion/react # with yarn yarn add @chakra-ui/react @emotion/react # with pnpm pnpm add @chakra-ui/react @emotion/react # with bun bun add @chakra-ui/react @emotion/react ``` ## Getting started 1. Wrap your application with the `ChakraProvider` component: ```tsx import { ChakraProvider, defaultSystem } from "@chakra-ui/react" export const App = ({ children }) => ( {children} ) ``` 2. Start using components: ```tsx import { Button } from "@chakra-ui/react" const Demo = () => ``` For framework-specific setup (Next.js, Vite, etc.), see the [installation guide](https://chakra-ui.com/docs/get-started/installation). ## Contributing Feel like contributing? That's awesome! Read the [contribution guide](https://chakra-ui.com/docs/get-started/contributing) to get started. ## License MIT © [Segun Adebayo](https://github.com/segunadebayo) --- _Source: https://npm.io/package/@chakra-ui/react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._