Chakra UI keeps its components fairly consistent based on the following principles.
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.
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.
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
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.
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
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.
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
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
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 the
ThemeProviderpassing 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
Heading, and a
Button wrapped by a
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.
Chakra UI’s input components consist of text inputs, number inputs, select inputs, checkboxes, radio buttons, and switch inputs.
With Chakra UI, you can easily add responsive layouts to multiple components. It consists of a set of layout components like
Stack that make it easy to style your components by passing props. So you can pass-in the properties like
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.
This is an example of how you can use layout components.
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
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 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
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
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.
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.