# @chakra-ui/core
> Responsive and accessible React UI components built with React and Emotion
Latest version **0.8.0** (published 2020-05-16) · MIT license · 0 weekly downloads
> **Deprecated.** This package is deprecated.
## Install
```sh
npm install @chakra-ui/core
pnpm add @chakra-ui/core
yarn add @chakra-ui/core
bun add @chakra-ui/core
```
## Health
**Score 10/100 (F)** — status: deprecated.
Negative: deprecated.
## Facts
| | |
|---|---|
| Version | 0.8.0 |
| Published | 2020-05-16 |
| First published | 2019-08-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 16 |
| Unpacked size | 869.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 40673 |
| Author | Segun Adebayo |
| Maintainers | codebender828, segunadebayo, tiolukaka |
| Keywords | react, ui, design-system, react-components, uikit, accessible, components, emotion, library |
## Links
- npm: https://www.npmjs.com/package/@chakra-ui/core
- Repository: https://github.com/chakra-ui/chakra-ui
- Homepage: https://chakra-ui.com/
- Issues: https://github.com/chakra-ui/chakra-ui/issues
- npm.io page: https://npm.io/package/@chakra-ui/core
## Dependencies (16)
- [color](https://npm.io/package/color.md) 3.1.2
- [exenv](https://npm.io/package/exenv.md) ^1.2.2
- [popper.js](https://npm.io/package/popper.js.md) ^1.15.0
- [aria-hidden](https://npm.io/package/aria-hidden.md) ^1.1.1
- [react-spring](https://npm.io/package/react-spring.md) ^8.0.27
- [styled-system](https://npm.io/package/styled-system.md) 5.1.5
- [toasted-notes](https://npm.io/package/toasted-notes.md) 3.2.0
- [use-dark-mode](https://npm.io/package/use-dark-mode.md) 2.3.1
- [@reach/auto-id](https://npm.io/package/@reach/auto-id.md) 0.10.2
- [body-scroll-lock](https://npm.io/package/body-scroll-lock.md) ^3.0.1
- [react-focus-lock](https://npm.io/package/react-focus-lock.md) ^2.2.1
- [copy-to-clipboard](https://npm.io/package/copy-to-clipboard.md) 3.3.1
- [@styled-system/css](https://npm.io/package/@styled-system/css.md) 5.1.5
- [@types/styled-system](https://npm.io/package/@types/styled-system.md) 5.1.9
- [react-animate-height](https://npm.io/package/react-animate-height.md) 2.0.21
- [@styled-system/should-forward-prop](https://npm.io/package/@styled-system/should-forward-prop.md) 5.1.5
## Alternatives
- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@progress/kendo-vue-listbox](https://npm.io/package/@progress/kendo-vue-listbox.md) — 932 weekly downloads
## Recent versions
- 0.8.0 (latest) — 2020-05-16
- 1.0.0-rc.8 (next) — 2020-10-29
- 0.4.1-next.977 (canary) — 2020-06-21
- 1.0.0-rc.7 — 2020-10-25
- 1.0.0-rc.6 — 2020-10-25
- 1.0.0-rc.5 — 2020-09-27
- 1.0.0-rc.4 — 2020-09-25
- 1.0.0-rc.3 — 2020-08-30
- 1.0.0-rc.2 — 2020-08-09
- 1.0.0-rc.1 — 2020-08-06
- 1.0.0-rc.0 — 2020-07-26
- 1.0.0-next.7 — 2020-07-26
- 1.0.0-next.6 — 2020-07-15
- 1.0.0-next.5 — 2020-07-15
- 1.0.0-next.4 — 2020-07-01
- … 31 more at https://npm.io/package/@chakra-ui/core/versions
## README
# Welcome to Chakra UI ⚡️
[](#contributors-)
- 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/core` package:
```sh
$ yarn add @chakra-ui/core
# or
$ npm install --save @chakra-ui/core
```
# Getting set up
To start using the components, please follow these steps:
1. Wrap your application in a `ThemeProvider` provided by **@chakra-ui/core**
```jsx
import { ThemeProvider, ColorModeProvider } from "@chakra-ui/core";
const App = ({ children }) => (
{children}
);
```
`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.
2. Now you can start using components like so!:
```jsx
import { Button } from "@chakra-ui/core";
const App = () => ;
```
# Contributing
Feel like contributing? That's awesome! We have a
[contributing guide](../../CONTRIBUTING.md) to help guide you.
The components to be built come from the
[Aria Practices Design Patterns and Widgets](https://www.w3.org/TR/wai-aria-practices-1.1).
## Contributors ✨
Thanks goes to these wonderful people
([emoji key](https://allcontributors.org/docs/en/emoji-key)):
This project follows the
[all-contributors](https://github.com/all-contributors/all-contributors)
specification. Contributions of any kind welcome!
---
_Source: https://npm.io/package/@chakra-ui/core · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
