npmpackage.info

Gathering detailed insights and metrics for @chakra-ui/react

Other packages similar to @chakra-ui/react

@chakra-ui/textarea

2.1.2

Textarea React component for Chakra UI

@chakra-ui/react-utils

2.0.11

React utilities and helpers for Chakra UI

@chakra-ui/icon

3.2.0

A base React component for icons

@chakra-ui/accordion

2.3.1

A simple and accessible accordion component for React & Chakra UI

@chakra-ui/react

Chakra UI is a component system for building products with speed ⚡️

3.7.0

38,426

MIT

TypeScript

66.71 kB

76,674,104 4.6

Installations

npm install @chakra-ui/react

Developer Guide

BETA

Typescript

Yes

Module System

ESM

Node Version

22.13.1

NPM Version

10.9.2 Score

90.5

Supply Chain

Quality

96.2

Maintenance

100

Vulnerability

99.6

License

Pull Requests

Open

5

Total

3,607

Closed

974

Merged

2,628

Issues

Open

9

Total

3,937

Closed

3,928

Releases

3,431

@chakra-ui/panda-preset@3.7.0

Published on 04 Feb 2025

@chakra-ui/react@3.7.0

Published on 04 Feb 2025

@chakra-ui/cli@3.7.0

Published on 04 Feb 2025

@chakra-ui/react@3.6.0

Published on 02 Feb 2025

@chakra-ui/panda-preset@3.6.0

Published on 02 Feb 2025

@chakra-ui/cli@3.6.0

Published on 02 Feb 2025

View all 3,431 releases

Contributors

677

View all 677 contributors

Languages

TypeScript

MDX

JavaScript

CSS

HTML

Shell

TypeScript (82.79%)

MDX (16.4%)

JavaScript (0.66%)

CSS (0.08%)

HTML (0.07%)

Developer

chakra-ui

Download Statistics

Total Downloads

76,674,104

Last Day

114,221

Last Week

511,088

Last Month

2,277,572

Last Year

28,749,349

GitHub Statistics

38,426 Stars

10,445 Commits

3,347 Forks

202 Watching

12 Branches

677 Contributors

Bundle Size

296.20 kB

Minified

66.71 kB

Minified + Gzipped

Bundlephobia

Maintainers

Package Meta Information

Latest Version

3.7.0

Package Id

@chakra-ui/react@3.7.0

Unpacked Size

1.90 MB

Size

354.25 kB

File Count

1,270

NPM Version

10.9.2

Node Version

22.13.1

Publised On

04 Feb 2025

Total Downloads

Cumulative downloads

Total Downloads

76,674,104

Last day

-3%

114,221

Compared to previous day

Last week

-16.3%

511,088

Compared to previous week

Last month

2.3%

2,277,572

Compared to previous month

Last year

18.9%

28,749,349

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Versions

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?

https://chakra-ui.com

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 ThemeProvider provided 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!

Fuzzing

Determines if the project uses fuzzing.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

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

0

SAST

Determines if the project uses static code analysis.

Score

4.6

/10

Last Scanned on 2025-01-27

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

Other packages similar to @chakra-ui/react

@chakra-ui/react

Installations

Developer Guide

Yes

ESM

22.13.1

10.9.2

Score

Pull Requests

5

3,607

974

2,628

Issues

9

3,937

3,928

Releases

Contributors

Languages

Developer

Download Statistics

GitHub Statistics

Bundle Size

296.20 kB

66.71 kB

Maintainers

Package Meta Information

Total Downloads

76,674,104

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

Welcome to Chakra UI ⚡️

Looking for the documentation?

Installing Chakra UI

Getting set up

Contributing

Contributors ✨

10

10

10

10

5

3

0

0

0

0

0

0

4.6

/10