@chakra-ui/react

About

Responsive and accessible React UI components built with React and Emotion

What detecting @chakra-ui/react tells you about a site

@chakra-ui/react reveals a styled, themeable component library with a strong accessibility story and a style-prop API — chosen by teams that wanted a batteries-included design system without Material Design's visual opinion. Its presence signals a React app prioritising developer velocity and accessible defaults.

Why the exact @chakra-ui/react version matters

Chakra's styling engine and theming changed across major versions (and the v3 rework was significant); the exact version tells you which styling API and theme structure the app uses.

@chakra-ui/react in a real-world stack

When you find @chakra-ui/react in a bundle, it rarely travels alone. @emotion/react (its style engine in earlier versions) and framer-motion for the animated components.

Quick facts

This package powers Chakra UI

The @chakra-ui/react package is the canonical implementation of Chakra UI. Sourcemap Explorer uses this exact npm package as the framework-level fingerprint when it flags Chakra UI on a page — both via the bundled node_modules/@chakra-ui/react/ source paths and via the embedded package.json inside the JavaScript sourcemap.

Common pairings

Packages this one expects to find in the same project. Each is also a Sourcemap Explorer detection target.

What @chakra-ui/react pulls in

@chakra-ui/react declares 7 direct dependencies — each one also rides into any bundle that ships @chakra-ui/react, so they are detection targets too. Reading them is a quick way to understand the package's real footprint .

How Sourcemap Explorer detects @chakra-ui/react

@chakra-ui/react ships as v3.36.1, published 2026-07-19 and carries 7 direct dependencies, 3 peer dependencies (react, react-dom, @emotion/react), 919 versions on the registry. Those exact numbers are the footprint Sourcemap Explorer matches when @chakra-ui/react rides inside a deployed bundle — here is how the detection works.

We catch @chakra-ui/react from two complementary signals: bundled source paths and the embedded package.json. Modern bundlers (webpack, Vite, esbuild, Rollup, Turbopack) preserve the original node_modules/@chakra-ui/react/ paths inside the JavaScript sourcemap's sources[] array — that's the canonical signal. When the matching package.json is also captured in sourcesContent[], we read the exact version field — patch number included. No regex guessing, no version inference.

1. 1

   Confirm the site exposes sourcemaps

   In DevTools Network, check the response headers of any application script for `SourceMap` or `X-SourceMap`. Failing that, fetch the script's last 4 KB and look for a `//# sourceMappingURL=` comment — that map is where the `@chakra-ui/react` paths live.

2. 2

   Find the package in the bundle

   Open DevTools → Network → reload. Click any application script and look at its sourcemap. Inside, search `sources[]` for entries matching `node_modules/@chakra-ui/react/` — every match confirms the package is bundled. The matching `sourcesContent[i]` for `node_modules/@chakra-ui/react/package.json` gives you the exact installed version.

3. 3

   Read the version directly from package.json

   Run `jq -r '. as $m | $m.sources | to_entries[] | select(.value | endswith("node_modules/@chakra-ui/react/package.json")) | $m.sourcesContent[.key] | fromjson | .version' bundle.js.map`. Sourcemap Explorer automates the same query in the popup.

Major releases of @chakra-ui/react

When each major version first landed. Major bumps are where breaking changes live, so this timeline is the fastest way to date the @chakra-ui/react version a site actually ships against the ecosystem.

Recent versions

@chakra-ui/react README

Live mirror of the GitHub README, for reference. Updated whenever the repo's default branch changes.

# 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

import { ChakraProvider, defaultSystem } from "@chakra-ui/react"

export const App = ({ children }) => (
  <ChakraProvider value={defaultSystem}>{children}</ChakraProvider>
)

import { Button } from "@chakra-ui/react"

const Demo = () => <Button>I just consumed some ⚡️Chakra!</Button>

FAQ

Keep reading on Sourcemap Explorer