⚡️ Simple, Modular & Accessible UI Components for your React Applications
Installations
npm install @chakra-ui/reactDeveloper Guide
Typescript
Yes
Module System
ESM
Node Version
20.18.1
NPM Version
10.8.2
Score
79.9
Supply Chain
72.6
Quality
94.7
Maintenance
100
Vulnerability
95.8
License
Releases
@chakra-ui/react@3.2.3
Published on 04 Dec 2024
@chakra-ui/cli@3.2.3
Published on 04 Dec 2024
@chakra-ui/react@3.2.2
Published on 30 Nov 2024
@chakra-ui/cli@3.2.2
Published on 30 Nov 2024
@chakra-ui/react@3.2.1
Published on 26 Nov 2024
@chakra-ui/cli@3.2.1
Published on 26 Nov 2024
Contributors
Languages
TypeScript (82.48%)
MDX (17.22%)
JavaScript (0.15%)
CSS (0.09%)
HTML (0.05%)
Developer
Download Statistics
Total Downloads
74,191,900
Last Day
33,903
Last Week
410,643
Last Month
2,451,813
Last Year
28,509,476
GitHub Statistics
38,211 Stars
10,251 Commits
3,308 Forks
204 Watching
14 Branches
662 Contributors
Bundle Size
290.85 kB
Minified
65.62 kB
Minified + Gzipped
Maintainers
Package Meta Information
Latest Version
3.2.3
Package Id
@chakra-ui/react@3.2.3
Unpacked Size
1.85 MB
Size
342.58 kB
File Count
1,225
NPM Version
10.8.2
Node Version
20.18.1
Publised On
04 Dec 2024
Total Downloads
Cumulative downloads
Total Downloads
74,191,900
Last day
-70.3%
33,903
Compared to previous day
Last week
-32.4%
410,643
Compared to previous week
Last month
-5.6%
2,451,813
Compared to previous month
Last year
20.1%
28,509,476
Compared to previous year
Daily Downloads
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
no dangerous workflow patterns detected
Reason
30 commit(s) and 12 issue activity found in the last 90 days -- score normalized to 10
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
6 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-4wx3-54gh-9fr9
- Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
- Warn: Project is vulnerable to: GHSA-7gfc-8cq8-jh5f
- Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
Reason
Found 9/25 approved changesets -- score normalized to 3
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/pkg-pr.yml:1
- 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
dependency not pinned by hash detected -- score normalized to 0
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/pkg-pr.yml:11: update your workflow using https://app.stepsecurity.io/secureworkflow/chakra-ui/chakra-ui/pkg-pr.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pkg-pr.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/chakra-ui/chakra-ui/pkg-pr.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/quality.yml:14: 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:27: 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:40: 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:53: 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:66: 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
- Info: 0 out of 10 GitHub-owned GitHubAction dependencies pinned
- Info: 0 out of 1 third-party GitHubAction dependencies pinned
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 14 are checked with a SAST tool
Score
4.5
/10
Last Scanned on 2024-12-23
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