Introduction to Chakra UI
Chakra UI is a modern, modular and accessible design system for React. It provides a set of reusable, highly customizable and composable React components that make it easy to build user interfaces following the principles of the Material Design specification.
Installing Chakra UI dependencies
To use Chakra UI in your React project, you need to install the following dependencies:
1. @chakra-ui/react
This is the core package that provides the Chakra UI components and the theme provider. You can install it using npm or yarn:
npm install @chakra-ui/react
yarn add @chakra-ui/react
2. @emotion/core and @emotion/styled
Chakra UI uses emotion, a library for styling components with CSS-in-JS, under the hood. You will need to install @emotion/core and @emotion/styled to use the Chakra UI components. You can install them using npm or yarn:
npm install @emotion/core @emotion/styled
yarn add @emotion/core @emotion/styled
3. react and react-dom
Chakra UI is built with React, so you need to have it installed in your project to use the library. You will also need react-dom to render the components to the DOM. If you are starting a new React project, these dependencies should be installed by default. If you are adding Chakra UI to an existing project, you may need to install them manually. You can install them using npm or yarn:
npm install react react-dom
yarn add react react-dom
Optional dependencies for extending Chakra UI functionality
Chakra UI also provides a set of optional dependencies that you can use to extend the functionality of the library. These include:
@chakra-ui/icons: a package that provides a collection of SVG icons that you can use with the Chakra UIIconcomponent.@chakra-ui/transition: a package that provides components for animating transitions between different states.@chakra-ui/theme-tools: a package that provides utility functions for creating custom themes and modifying the default Chakra UI theme.
You can install these dependencies using npm or yarn:
npm install @chakra-ui/icons @chakra-ui/transition @chakra-ui/theme-tools
yarn add @chakra-ui/icons @chakra-ui/transition @chakra-ui/theme-tools
I’ll be writing a part two of this content and link it down here, stay tuned. :)