Gathering detailed insights and metrics for @chakra-ui/react
Gathering detailed insights and metrics for @chakra-ui/react
Gathering detailed insights and metrics for @chakra-ui/react
Gathering detailed insights and metrics for @chakra-ui/react
β‘οΈ Simple, Modular & Accessible UI Components for your React Applications
npm install @chakra-ui/react
Typescript
Module System
Node Version
NPM Version
79.9
Supply Chain
72.6
Quality
94.7
Maintenance
100
Vulnerability
95.8
License
@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
TypeScript (82.48%)
MDX (17.22%)
JavaScript (0.15%)
CSS (0.09%)
HTML (0.05%)
Total Downloads
74,191,900
Last Day
33,903
Last Week
410,643
Last Month
2,451,813
Last Year
28,509,476
38,211 Stars
10,251 Commits
3,308 Forks
204 Watching
14 Branches
662 Contributors
Minified
Minified + Gzipped
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
Cumulative downloads
Total Downloads
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
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.
β‘οΈ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
To start using the components, please follow these steps:
ThemeProvider
provided by @chakra-ui/react1import { 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.
1import { Button } from "@chakra-ui/react" 2 3const App = () => <Button>I just consumed some β‘οΈChakra!</Button>
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.
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
Reason
no binaries found in the repo
Reason
6 existing vulnerabilities detected
Details
Reason
Found 9/25 approved changesets -- score normalized to 3
Reason
detected GitHub workflow tokens with excessive permissions
Details
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Score
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