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

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

@chakra-ui/react

⚡️ Simple, Modular & Accessible UI Components for your React Applications

3.2.3

38,123

MIT

TypeScript

65.62 kB

73,173,472 4.6

Installations

npm install @chakra-ui/react

Developer Guide

BETA

Typescript

Yes

Module System

ESM

Node Version

20.18.1

NPM Version

10.8.2 Score

83.5

Supply Chain

72.6

Quality

94.9

Maintenance

100

Vulnerability

95.8

License

Pull Requests

Open

4

Total

3,514

Closed

964

Merged

2,546

Issues

Open

8

Total

3,833

Closed

3,825

Releases

3,400

@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

View all 3,400 releases

Contributors

657

View all 657 contributors

Languages

TypeScript

MDX

JavaScript

CSS

HTML

Shell

TypeScript (82.49%)

MDX (17.21%)

JavaScript (0.15%)

CSS (0.09%)

HTML (0.05%)

Developer

chakra-ui

Download Statistics

Total Downloads

73,173,472

Last Day

113,783

Last Week

619,493

Last Month

2,702,581

Last Year

28,305,909

GitHub Statistics

38,123 Stars

10,230 Commits

3,293 Forks

205 Watching

14 Branches

657 Contributors

Bundle Size

290.85 kB

Minified

65.62 kB

Minified + Gzipped

Bundlephobia

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

73,173,472

Last day

-4.5%

113,783

Compared to previous day

Last week

6.2%

619,493

Compared to previous week

Last month

6.3%

2,702,581

Compared to previous month

Last year

20%

28,305,909

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: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/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/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 2024-12-09

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

Other packages similar to @chakra-ui/react

@chakra-ui/react

Installations

Developer Guide

Yes

ESM

20.18.1

10.8.2

Score

Pull Requests

4

3,514

964

2,546

Issues

8

3,833

3,825

Releases

Contributors

Languages

Developer

Download Statistics

GitHub Statistics

Bundle Size

290.85 kB

65.62 kB

Maintainers

Package Meta Information

Total Downloads

73,173,472

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