RepositoryCurrent collected state Current
Observed since 20 Oct, 20:29 UTC
No superseded metadata states collected. Unchanged observations do not create new revisions.
Back to packageRELEASE DETAILS
2.8.3
npm586b6e81
Responsive and accessible React UI components built with React and Emotion. A fork of Chakra UI
Published29 Jan 2024
Direct dependencies59
Transitive dependenciesNot calculated
README
Current package documentationWelcome 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:
$ yarn add @chakra-ui/react
# or
$ 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
import { ThemeProvider, ColorModeProvider } from "@chakra-ui/react";
const App = ({ children }) => (
<ThemeProvider>
<ColorModeProvider>{children}</ColorModeProvider>
</ThemeProvider>
);
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!:
import { Button } from "@chakra-ui/react";
const 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):
This project follows the all-contributors specification. Contributions of any kind welcome!
Downloads & popularity
Awaiting observationsNo metric observations yet
Download counts and popularity will appear here as the collector receives them.
Declared dependencies 64
Native requirements59 direct targetsNot calculated transitive count
| Package / target | Requirement | Relationship |
|---|---|---|
@chakra-ui/accordionEnvironment{
"local_name": "@chakra-ui/accordion",
"alias": false,
"peer_metadata": null
} | 2.3.1 | runtime |
@chakra-ui/alertEnvironment{
"local_name": "@chakra-ui/alert",
"alias": false,
"peer_metadata": null
} | 2.2.2 | runtime |
@chakra-ui/avatarEnvironment{
"local_name": "@chakra-ui/avatar",
"alias": false,
"peer_metadata": null
} | 2.3.0 | runtime |
@chakra-ui/breadcrumbEnvironment{
"local_name": "@chakra-ui/breadcrumb",
"alias": false,
"peer_metadata": null
} | 2.2.0 | runtime |
@chakra-ui/buttonEnvironment{
"local_name": "@chakra-ui/button",
"alias": false,
"peer_metadata": null
} | 2.1.0 | runtime |
@chakra-ui/cardEnvironment{
"local_name": "@chakra-ui/card",
"alias": false,
"peer_metadata": null
} | 2.2.0 | runtime |
@chakra-ui/checkboxEnvironment{
"local_name": "@chakra-ui/checkbox",
"alias": false,
"peer_metadata": null
} | 2.3.2 | runtime |
@chakra-ui/close-buttonEnvironment{
"local_name": "@chakra-ui/close-button",
"alias": false,
"peer_metadata": null
} | 2.1.1 | runtime |
@chakra-ui/control-boxEnvironment{
"local_name": "@chakra-ui/control-box",
"alias": false,
"peer_metadata": null
} | 2.1.0 | runtime |
@chakra-ui/counterEnvironment{
"local_name": "@chakra-ui/counter",
"alias": false,
"peer_metadata": null
} | 2.1.0 | runtime |
@chakra-ui/css-resetEnvironment{
"local_name": "@chakra-ui/css-reset",
"alias": false,
"peer_metadata": null
} | 2.3.0 | runtime |
@chakra-ui/editableEnvironment{
"local_name": "@chakra-ui/editable",
"alias": false,
"peer_metadata": null
} | 3.1.0 | runtime |
@chakra-ui/focus-lockEnvironment{
"local_name": "@chakra-ui/focus-lock",
"alias": false,
"peer_metadata": null
} | 2.1.0 | runtime |
@chakra-ui/form-controlEnvironment{
"local_name": "@chakra-ui/form-control",
"alias": false,
"peer_metadata": null
} | 2.2.0 | runtime |
@chakra-ui/hooksEnvironment{
"local_name": "@chakra-ui/hooks",
"alias": false,
"peer_metadata": null
} | 2.2.1 | runtime |
@chakra-ui/iconEnvironment{
"local_name": "@chakra-ui/icon",
"alias": false,
"peer_metadata": null
} | 3.2.0 | runtime |
@chakra-ui/imageEnvironment{
"local_name": "@chakra-ui/image",
"alias": false,
"peer_metadata": null
} | 2.1.0 | runtime |
@chakra-ui/inputEnvironment{
"local_name": "@chakra-ui/input",
"alias": false,
"peer_metadata": null
} | 2.1.2 | runtime |
@chakra-ui/layoutEnvironment{
"local_name": "@chakra-ui/layout",
"alias": false,
"peer_metadata": null
} | 2.3.1 | runtime |
@chakra-ui/live-regionEnvironment{
"local_name": "@chakra-ui/live-region",
"alias": false,
"peer_metadata": null
} | 2.1.0 | runtime |
@chakra-ui/media-queryEnvironment{
"local_name": "@chakra-ui/media-query",
"alias": false,
"peer_metadata": null
} | 3.3.0 | runtime |
@chakra-ui/menuEnvironment{
"local_name": "@chakra-ui/menu",
"alias": false,
"peer_metadata": null
} | 2.2.1 | runtime |
@chakra-ui/modalEnvironment{
"local_name": "@chakra-ui/modal",
"alias": false,
"peer_metadata": null
} | 2.3.1 | runtime |
@chakra-ui/number-inputEnvironment{
"local_name": "@chakra-ui/number-input",
"alias": false,
"peer_metadata": null
} | 2.1.2 | runtime |
@chakra-ui/pin-inputEnvironment{
"local_name": "@chakra-ui/pin-input",
"alias": false,
"peer_metadata": null
} | 2.1.0 | runtime |
@chakra-ui/popoverEnvironment{
"local_name": "@chakra-ui/popover",
"alias": false,
"peer_metadata": null
} | 2.2.1 | runtime |
@chakra-ui/popperEnvironment{
"local_name": "@chakra-ui/popper",
"alias": false,
"peer_metadata": null
} | 3.1.0 | runtime |
@chakra-ui/portalEnvironment{
"local_name": "@chakra-ui/portal",
"alias": false,
"peer_metadata": null
} | 2.1.0 | runtime |
@chakra-ui/progressEnvironment{
"local_name": "@chakra-ui/progress",
"alias": false,
"peer_metadata": null
} | 2.2.0 | runtime |
@chakra-ui/providerEnvironment{
"local_name": "@chakra-ui/provider",
"alias": false,
"peer_metadata": null
} | 2.4.2 | runtime |
@chakra-ui/radioEnvironment{
"local_name": "@chakra-ui/radio",
"alias": false,
"peer_metadata": null
} | 2.1.2 | runtime |
@chakra-ui/react-envEnvironment{
"local_name": "@chakra-ui/react-env",
"alias": false,
"peer_metadata": null
} | 3.1.0 | runtime |
@chakra-ui/selectEnvironment{
"local_name": "@chakra-ui/select",
"alias": false,
"peer_metadata": null
} | 2.1.2 | runtime |
@chakra-ui/skeletonEnvironment{
"local_name": "@chakra-ui/skeleton",
"alias": false,
"peer_metadata": null
} | 2.1.0 | runtime |
@chakra-ui/skip-navEnvironment{
"local_name": "@chakra-ui/skip-nav",
"alias": false,
"peer_metadata": null
} | 2.1.0 | runtime |
@chakra-ui/sliderEnvironment{
"local_name": "@chakra-ui/slider",
"alias": false,
"peer_metadata": null
} | 2.1.0 | runtime |
@chakra-ui/spinnerEnvironment{
"local_name": "@chakra-ui/spinner",
"alias": false,
"peer_metadata": null
} | 2.1.0 | runtime |
@chakra-ui/statEnvironment{
"local_name": "@chakra-ui/stat",
"alias": false,
"peer_metadata": null
} | 2.1.1 | runtime |
@chakra-ui/stepperEnvironment{
"local_name": "@chakra-ui/stepper",
"alias": false,
"peer_metadata": null
} | 2.3.1 | runtime |
@chakra-ui/styled-systemEnvironment{
"local_name": "@chakra-ui/styled-system",
"alias": false,
"peer_metadata": null
} | 2.9.2 | runtime |
@chakra-ui/switchEnvironment{
"local_name": "@chakra-ui/switch",
"alias": false,
"peer_metadata": null
} | 2.1.2 | runtime |
@chakra-ui/systemEnvironment{
"local_name": "@chakra-ui/system",
"alias": false,
"peer_metadata": null
} | 2.6.2 | runtime |
@chakra-ui/tableEnvironment{
"local_name": "@chakra-ui/table",
"alias": false,
"peer_metadata": null
} | 2.1.0 | runtime |
@chakra-ui/tabsEnvironment{
"local_name": "@chakra-ui/tabs",
"alias": false,
"peer_metadata": null
} | 3.0.0 | runtime |
@chakra-ui/tagEnvironment{
"local_name": "@chakra-ui/tag",
"alias": false,
"peer_metadata": null
} | 3.1.1 | runtime |
@chakra-ui/textareaEnvironment{
"local_name": "@chakra-ui/textarea",
"alias": false,
"peer_metadata": null
} | 2.1.2 | runtime |
@chakra-ui/themeEnvironment{
"local_name": "@chakra-ui/theme",
"alias": false,
"peer_metadata": null
} | 3.3.1 | runtime |
@chakra-ui/theme-utilsEnvironment{
"local_name": "@chakra-ui/theme-utils",
"alias": false,
"peer_metadata": null
} | 2.0.21 | runtime |
@chakra-ui/toastEnvironment{
"local_name": "@chakra-ui/toast",
"alias": false,
"peer_metadata": null
} | 7.0.2 | runtime |
@chakra-ui/tooltipEnvironment{
"local_name": "@chakra-ui/tooltip",
"alias": false,
"peer_metadata": null
} | 2.3.1 | runtime |
@chakra-ui/transitionEnvironment{
"local_name": "@chakra-ui/transition",
"alias": false,
"peer_metadata": null
} | 2.1.0 | runtime |
@chakra-ui/utilsEnvironment{
"local_name": "@chakra-ui/utils",
"alias": false,
"peer_metadata": null
} | 2.0.15 | runtime |
@chakra-ui/visually-hiddenEnvironment{
"local_name": "@chakra-ui/visually-hidden",
"alias": false,
"peer_metadata": null
} | 2.2.0 | runtime |
@emotion/reactEnvironment{
"local_name": "@emotion/react",
"alias": false,
"peer_metadata": null
} | ^11.11.1 | development |
@emotion/styledEnvironment{
"local_name": "@emotion/styled",
"alias": false,
"peer_metadata": null
} | ^11.11.0 | development |
framer-motionEnvironment{
"local_name": "framer-motion",
"alias": false,
"peer_metadata": null
} | ^10.16.1 | development |
reactEnvironment{
"local_name": "react",
"alias": false,
"peer_metadata": null
} | ^18.2.0 | development |
react-domEnvironment{
"local_name": "react-dom",
"alias": false,
"peer_metadata": null
} | ^18.2.0 | development |
clean-packageEnvironment{
"local_name": "clean-package",
"alias": false,
"peer_metadata": null
} | 2.2.0 | development |
@emotion/reactEnvironment{
"local_name": "@emotion/react",
"alias": false,
"peer_metadata": null
} | 11.11.1 | peer |
@emotion/styledEnvironment{
"local_name": "@emotion/styled",
"alias": false,
"peer_metadata": null
} | 11.11.0 | peer |
framer-motionEnvironment{
"local_name": "framer-motion",
"alias": false,
"peer_metadata": null
} | >=4.0.0 | peer |
reactEnvironment{
"local_name": "react",
"alias": false,
"peer_metadata": null
} | >=18 | peer |
react-domEnvironment{
"local_name": "react-dom",
"alias": false,
"peer_metadata": null
} | >=18 | peer |
Distribution files
1 collectedDistribution 1
Source fileSource distribution
Checksums from source
{
"integrity": "sha512-XxIKqfnpeV209gZPCKoCvRXyQ1etSZrtUYEkBehXgI9Fm9KR17I2vhHLo4kuXInHwsqX3Bon8q2oRbVd0IelCg==",
"shasum": "d4d12631a840528b0bf52f944065e4ab2f404aad",
"tarball": "https://registry.npmjs.org/586b6e81/-/586b6e81-2.8.3.tgz",
"fileCount": 17,
"unpackedSize": 40333,
"signatures": [
{
"keyid": "SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA",
"sig": "MEQCIDKplV/aZKE/+XjdCFvNxd6dYhxj/19TmhvQJXhwSiE/AiB/Fv3KNf1lTvSrz+I5sBV6YNWd3kR8KjsHfWKa/D/VOg=="
}
]
}Repository
PENDINGMetadata history
Meaningful changesRecord identity
package_version:8553f710a2ab5b0de9997da2a4f9d11af8bb5c58e32489a3bfbd675360718d64