Gathering detailed insights and metrics for @chakra-ui/react
Gathering detailed insights and metrics for @chakra-ui/react
Chakra UI is a component system for building SaaS products with speed ⚡️
Installations
npm install @chakra-ui/reactDeveloper Guide
BETA
Typescript
Yes
Module System
ESM
Node Version
22.16.0
NPM Version
10.9.2
Releases
3,516
@chakra-ui/cli@3.22.0
@chakra-ui/cli@3.22.0
Updated on Jul 07, 2025
@chakra-ui/panda-preset@3.22.0
@chakra-ui/panda-preset@3.22.0
Updated on Jul 07, 2025
@chakra-ui/react@3.22.0
@chakra-ui/react@3.22.0
Updated on Jul 07, 2025
@chakra-ui/charts@3.22.0
@chakra-ui/charts@3.22.0
Updated on Jul 07, 2025
@chakra-ui/panda-preset@3.21.1
@chakra-ui/panda-preset@3.21.1
Updated on Jun 28, 2025
@chakra-ui/charts@3.21.1
@chakra-ui/charts@3.21.1
Updated on Jun 28, 2025
Languages
6
TypeScript
MDX
JavaScript
CSS
HTML
Dockerfile
TypeScript (82.19%)
MDX (16.96%)
JavaScript (0.71%)
CSS (0.07%)
HTML (0.06%)
Dockerfile (0.01%)
Developer
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
39,347 Stars
10,957 Commits
3,443 Forks
201 Watchers
10 Branches
694 Contributors
Updated on Jul 11, 2025
Maintainers
1
Package Meta Information
Latest Version
3.22.0
Package Id
@chakra-ui/react@3.22.0
Unpacked Size
2.32 MB
Size
396.88 kB
File Count
1,333
NPM Version
10.9.2
Node Version
22.16.0
Published on
Jul 07, 2025
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Welcome to Chakra UI ⚡️
-
Works out of the box. Chakra UI contains a set of polished React components that work out of the box.
-
Flexible & composable. Chakra UI components are built on top of a React UI Primitive for endless composability.
-
Accessible. Chakra UI components follows the WAI-ARIA guidelines specifications.
-
Dark Mode 😍: All components are dark mode compatible.
Looking for the documentation?
Installing Chakra UI
⚡️Chakra UI is made up of multiple components and tools which you can import
one by one. All you need to do is install the @chakra-ui/react package:
1$ yarn add @chakra-ui/react 2# or 3$ npm install --save @chakra-ui/react
Getting set up
To start using the components, please follow these steps:
- Wrap your application in a
ThemeProviderprovided by @chakra-ui/react
1import { ColorModeProvider, ThemeProvider } from "@chakra-ui/react" 2 3const App = ({ children }) => ( 4 <ThemeProvider> 5 <ColorModeProvider>{children}</ColorModeProvider> 6 </ThemeProvider> 7)
ColorModeProvider is a context that provides light mode and dark mode values
to the components. It also comes with a function to toggle between light/dark
mode.
- Now you can start using components like so!:
1import { Button } from "@chakra-ui/react" 2 3const App = () => <Button>I just consumed some ⚡️Chakra!</Button>
Contributing
Feel like contributing? That's awesome! We have a contributing guide to help guide you.
The components to be built come from the Aria Practices Design Patterns and Widgets.
Contributors ✨
Thanks goes to these wonderful people (emoji key):
 Segun Adebayo 💻 🚧 📖 💡 🎨 |  Tioluwani Kolawole 📖 💡 🚧 |
This project follows the all-contributors specification. Contributions of any kind welcome!
No vulnerabilities found.
Reason
30 commit(s) and 15 issue activity found in the last 90 days -- score normalized to 10
Reason
no dangerous workflow patterns detected
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
no binaries found in the repo
Reason
7 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
- Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-67mh-4wv8-2f99
- Warn: Project is vulnerable to: GHSA-f7f6-9jq7-3rqj
- Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
Reason
Found 5/25 approved changesets -- score normalized to 2
Reason
dependency not pinned by hash detected -- score normalized to 2
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/issue-stale.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/chakra-ui/chakra-ui/issue-stale.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/quality.yml:43: update your workflow using https://app.stepsecurity.io/secureworkflow/chakra-ui/chakra-ui/quality.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/quality.yml:56: update your workflow using https://app.stepsecurity.io/secureworkflow/chakra-ui/chakra-ui/quality.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/quality.yml:69: update your workflow using https://app.stepsecurity.io/secureworkflow/chakra-ui/chakra-ui/quality.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/quality.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/chakra-ui/chakra-ui/quality.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/quality.yml:30: update your workflow using https://app.stepsecurity.io/secureworkflow/chakra-ui/chakra-ui/quality.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/chakra-ui/chakra-ui/release.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:33: update your workflow using https://app.stepsecurity.io/secureworkflow/chakra-ui/chakra-ui/release.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yml:46: update your workflow using https://app.stepsecurity.io/secureworkflow/chakra-ui/chakra-ui/release.yml/main?enable=pin
- Warn: containerImage not pinned by hash: sandbox/react-router/Dockerfile:1
- Warn: containerImage not pinned by hash: sandbox/react-router/Dockerfile:6
- Warn: containerImage not pinned by hash: sandbox/react-router/Dockerfile:11
- Warn: containerImage not pinned by hash: sandbox/react-router/Dockerfile:17: pin your Docker image by updating node:20-alpine to node:20-alpine@sha256:fa316946c0cb1f041fe46dda150f3085b71168555e5706ec0c7466a5bae12244
- Info: 0 out of 8 GitHub-owned GitHubAction dependencies pinned
- Info: 0 out of 1 third-party GitHubAction dependencies pinned
- Info: 0 out of 4 containerImage dependencies pinned
- Info: 2 out of 2 npmCommand dependencies pinned
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: topLevel 'actions' permission set to 'write': .github/workflows/issue-stale.yml:10
- Warn: no topLevel permission defined: .github/workflows/quality.yml:1
- Warn: no topLevel permission defined: .github/workflows/release.yml:1
- Info: no jobLevel write permissions found
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 11 are checked with a SAST tool
Score
4.4
/10
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More