Review of Chakra UI
Chakra UI is a modern component library for React created by Segun Adebayo. It provides a set of accessible, reusable, and composable React components that you need to build front-end applications. Its simplicity, modularity, and accessibility make it powerful. You can use it to build accessible React apps and to speed up the building process.
Chakra UI uses Emotion and Styled System. Style systems are great kinds of infrastructure that can be used to build a UI component library. They make so many things much easier.
Furthermore, Chakra UI is built with TypeScript, and it comes with 49 components and three utility hooks. Despite being an open-source tool, Chakra UI has great documentation. It has 10.3K GitHub stars and 678 GitHub forks.
You can find Chakra UI’s open-source GitHub repository here.
Tip: Share your reusable components between projects using Bit (Github). Bit makes it simple to share, document, and organize independent components from any project.
Use it to maximize code reuse, collaborate on independent components, and build apps that scale.
Bit supports Node, TypeScript, React, Vue, Angular, and more.
Features of Chakra UI
Chakra UI keeps its components fairly consistent based on the following principles.
Style Props
Because Chakra UI is based on styled systems, it is possible to override or extend all component styles using props. So, you rarely have to use stylesheets or inline styles.
You can find many shorthand variants of the style props in the Chakra UI component library. You can find the complete reference to style props in the official documentation.
Here are some of the commonly used style props. These style prop shorthands are used to space CSS properties.
- m is used for margin.
- mr is used for marginRight.
- mt is used for marginTop.
- p is used for padding.
- pr is used for paddingRight.
- pt is used for paddingTop.
- py is used for padding-top and padding-bottom.
Composition
Chakra UI breaks down components into smaller parts with minimal props to keep the complexity low and compose them together to ensure that the styles and functionality are flexible and extensible.
Accessible
Accessibility is vital when creating components. Chakra UI components follow the WAI-ARIA guidelines specifications and support accessibility by providing keyboard navigation, focus management, correct aria-* attributes, and focus trapping and restoration for modal dialogs. You can check the accessibility report of each authored component in a file called accessibility.md.
Themeable
Style systems have their own theme specifications. By following these specific theme specifications, you can theme your app into different themes, or you can download different themes.
You have to create a theme.js file and pass it as a JSON object. The theme object is where you can define the application’s color palette, font stacks, type scale, breakpoints, and so on with custom values.
The theme object also supports fonts and font sizes.
You can add a breakpoint array to your theme and configure the default breakpoints used in responsive array values. You can then use those values to apply responsive styles.
Dark Mode
Because Chakra UI supports dark mode out of the box, implementing dark mode using it is extremely simple. Most of the components provided in this library are dark mode compatible.
Chakra UI provides a hook called useColorMode, which you can use to change the application’s color mode.
You have to use ColorModeProvider to enable color mode within your app and wrap your application in a ColorModeProvider.
Responsive Design
Chakra UI supports mobile-first responsive styles out of the box. It stays performant on mobile devices. So you don’t have to manually add media queries and nested styles throughout your code.
The responsive design supports every style prop in the theme specification. You can also change the style of properties at given breakpoints.
Getting Started
You can install Chakra UI and its peer dependencies with npm or yarn. Because Chakra UI uses Emotion for handling component styles, you have to install Emotion, the CSS-in-JS library, as a peer dependency.
npm install @chakra-ui/core @emotion/core @emotion/styled emotion-theming
or
yarn add @chakra-ui/core @emotion/core @emotion/styled emotion-theming
You will need the ThemeProvider and optionally a custom theme. ThemeProvider is the component that includes all the appropriate styling for your components.
You can set up your custom theme to customize the UI. You can include custom colors, typography, and layout values. However, this step is optional. Chakra UI provides a default theme that is extendable.
You can easily handle the styles of components switching between dark and light theme modes using ColorModeProvider and useColorMode hook.
If you need, you can also apply CSS reset styles to your application. Chakra UI provides a CSSReset component that will remove browser default styles.
It is recommended to add the CSSReset component at the root of your application to ensure all components work correctly.
Then you have to wrap your entire application with theThemeProviderpassing in the theme object as a prop. It establishes all of the styles for our components.
After the basic setup is completed, you can use Chakra UI components in your application. Chakra UI provides 49 components including inputs, accordions, icons, tooltips, and so on.
For example, the following code adds two typography components Text and Heading, and a Button wrapped by a Stack component.
In the above example, you can see that Stack is the layout utility component that makes it easy to stack elements together and apply a space between them. The Spacing prop is used to define the spacing between components. It can accept all the valid Styled System props too.
Chakra UI Components
Chakra UI provides a large number of high-quality React components. Here are a few of them.
Input Components
Chakra UI’s input components consist of text inputs, number inputs, select inputs, checkboxes, radio buttons, and switch inputs.
Layout Components
With Chakra UI, you can easily add responsive layouts to multiple components. It consists of a set of layout components like Box and Stack that make it easy to style your components by passing props. So you can pass-in the properties like bg or justifyContent in CSS as props.
Stack can be used to group a set of components with equal spacing. Although it is vertical by default, you can override it with isInline.
You can use Box as a div element for receiving style props.
Grid can be used to wrap everything in a CSS Grid container.
Flex can be used to wrap everything in a Flexbox container. So you can use all the flex properties such as flexDirection, alignItems, justifyContent, and so on, on the wrapper as props.
This is an example of how you can use layout components.
Breadcrumb
You can use the Breadcrumb component to make routing between different pages easier. It enhances how users navigate to previous page levels of a website, especially if that website has many pages or products. Chakra UI provides 4 breadcrumb related components including Breadcrumb, BreadcrumbItem, BreadcrumbLink, and BreadcrumbSeparator.
Tabs
You can use the Tabs component to separate your views into multiple screens. The order is important with the Tab and TabPanel elements. None of these components should be empty wrappers. Each one should be associated with a real DOM element in the document. This gives you maximum control over styling and composition.
Drawer
Drawer is a component that is unique to Chakra UI. It is a mechanism that would be perfect for any side navbar. Drawer component uses Chakra UI’s custom useDisclosure hook that provides isOpen, onOpen, and onClose for controlling the state of the drawer.
How to create forms with Chakra UI
Chakra UI is a great library for creating forms. You can use it to build any kind of form. Here is how you can use it to build a simple “Contact Us” form. The final result from this demo will look like:
Dark Mode :
Light Mode :
The code for the “Contact Us” form is as follows:
In the code above, the ColorModeProvider allows the user to toggle between dark and light theme mode. Chakra UI handles the value of the current theme, which is stored in the localStorage of the browser by the key to darkMode.
Limitations of Chakra UI
Chakra UI is a powerful component library, but it has some limitations. One notable limitation is the lack of a Date Picker. So you have to use another React library for that. Also, there is no component for the search bar.
It is impossible to style some components with Chakra UI. For example, even though you can add styles to Switch, Checkbox, and a couple more components, you don’t have access to some of their underlying elements.
There is no way to theme some components. Chakra UI provides a few button styles and even the variant colors also have limits.
You have to pass hover/active styling using Pseudobox or a component deriving from it. So you need additional wrappers for the configuration of some components.
Conclusion
All in all, what makes Chakra UI unique is its highly customizable design system. It comes with the ability to switch between themes. It also provides style utilities to create your own design systems and Flexbox.
Chakra UI has recently gained a lot of traction. As a promising new library, it is constantly improving and the hype is building around the library. More components will probably be added soon. So you can consider using it for your next React project.
