Chakra UI: Everything You Need To Know
Chakra UI has become very popular because it is flexible, easy to work with, and you can change it to fit in any front-end application. In this article, we explore the features of Chakra UI and why you should use it in creating a responsive design using its straightforward settings.
What is Chakra UI?
Chakra UI is a complete collection of React components designed to simplify the process of building user interfaces. Unlike standard libraries, Chakra UI offers unique and flexible movable elements that prioritize ease of use and adaptability.
Developers can make stylish, up-to-date interfaces using Chakra UI and still have the flexibility to adjust designs for specific project needs.
The library provides many pre-made components like buttons, forms, and navigation parts. This helps developers begin work quickly but also lets them make many custom changes.
Why Should You Use Chakra UI?
Every component of the Chakra UI can be accessed through WAI-ARIA standards, which I think is an important subject for many of us.
- Components are easy to customize, expand, and theme.
- Many libraries and frameworks exist to support you in accomplishing greater tasks with fewer efforts and within a shorter period of time.
- Changing from one color mode to another, like light or dark ones, or maybe different sets of colors, will be very easy.
- Although the community is relatively small, it is quite active.
How to Get Started and Install Chakra UI
Install ChakraUI in your respective directory using Yarn or NPM.
yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4For React:
To start using ChakraUI, you must first include <ChakraProvider> in your index.js file.
import React from "react"
// 1. import `ChakraProvider` component
import { ChakraProvider } from "@chakra-ui/react"
function App({ Component }) {
// 2. Use at the root of your app
return (
<ChakraProvider>
<Component />
</ChakraProvider>
)
}For Next.js
Go to pages/_app.js and add these lines of code:
import { ChakraProvider } from "@chakra-ui/react"
function MyApp({ Component, pageProps }) {
return (
<ChakraProvider>
<Component {...pageProps} />
</ChakraProvider>
)
}
export default MyAppChakra UI Key Features and Customization
All components in Chakra automatically use values from the standard theme. Sometimes, you might have to change these theme tokens to fit your design needs.
Composition
Chakra UI breaks down components into simpler parts with fewer properties to reduce complexity and then puts them together again so that the styles and functions can be flexible and expanded.
Accessibility
While creating parts, it's very important to make them accessible. Chakra UI parts stick to WAI-ARIA guidelines, allowing for use with the keyboard, managing where the focus goes, using correct aria-* attributes, and making sure modals capture and return focus properly. A file called accessibility.md contains the accessibility report for each authored component.
Responsive Design
Chakra UI supports mobile-first responsive designs. On mobile devices, it maintains its performance. Consequently, there will be no need for you to manually insert media queries and embedded styles into your code.
The theme definition supports all style properties for responsive design, and you can change the property styles at specific breakpoints too.
Style Props
Since Chakra UI uses style systems, you can change or add to the styles of components using props. This means that there is often no need for separate stylesheets or direct in-code styling.
In the library of Chakra UI components, many style properties have shorter forms. For these style properties, you can find a complete guide in the official documentation.
Here are some common style shortcuts. With these abbreviations, CSS properties can be set with less space.
- 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.
Dark Mode
Setting up dark mode using the Chakra UI is quite simple since it includes this feature from the start. Most elements within this toolkit are compatible with dark mode.
The useColorMode hook in Chakra UI lets you change the application's color mode.
To turn on color mode in your application, you need to use ColorModeProvider and surround your application with a ColorModeProvider.
import React from "react";
import { ThemeProvider, ColorModeProvider } from "@chakra-ui/core";
import customTheme from "./theme";
function TurnOnColorMode({ children }) {
return (
<ThemeProvider theme={customTheme}>
<ColorModeProvider>{children}</ColorModeProvider>
</ThemeProvider>
);
}Thematic
Style systems come with specific theme rules. To alter your app's appearance or to get new themes, you must adhere strictly to these detailed theme guidelines.
First, create a file named theme.js. This file should be provided as an object in JSON format. Inside the theme object, you can define your own settings for things like color schemes, fonts used throughout the app, sizes of text elements, points at which layout changes happen, and so on.
import { theme } from "@chakra-ui/core";
Adding custom colors
const customTheme = {
...theme,
colors: {
...theme.colors,
brand: {
900: "#1d4044",
800: "#234e52",
700: "#285e61",
},
},
};Exploring the Chakra UI React Components
Chakra UI provides many excellent React components; here are a few examples.
Layout Components
With Chakra UI, you can easily use responsive designs for many elements. It includes layout parts like Box and Stack, which help in adjusting your components through properties. Thus, you can employ CSS properties to input features such as background and justify content.
To arrange a group of elements so they have the same space between them, you should use the stack command. It normally lines up things from top to bottom, but if you want it in a row instead, you can alter it with isInline.
- For giving style props, you can use Box as a div element.
- Everything may be wrapped in a CSS Grid container with Grid.
- Everything can be wrapped in a Flexbox container with Flex.
Subsequently, you can use all of the flexibility features on the container as properties, like direction of flex, alignment of items, justifying content and more.
Input Components
Chakra UI offers various input forms such as text fields, numerical entries, selection options, tick boxes, circular choice buttons and toggle switches.
BreadCrumb
You might apply the Breadcrumb component to simplify navigation across different pages. It enhances the way users go back to earlier page layers on a website, which is particularly helpful when there are numerous pages or items. Breadcrumb, BreadcrumbItem, BreadcrumbLink, and BreadcrumbSeparator are four breadcrumb-related components in the Chakra UI.
Drawer
Chakra UI's Drawer is a unique component that functions effectively in any side navigation bar. To manage how the drawer is, the Drawer part uses a special thing from the Chakra UI called the useDisclosure hook. It has isOpen, onOpen, and onClose inside it.
Integrations
Chakra UI is very interesting because it works well with different frames. We can use all its features, like hooks and components, together with the functions of that framework.
Refine provides a special integration kit for the Chakra UI framework, which has many components and hooks that are ready to use. These make it easy to connect Refine with the elements of the Chakra UI.
You can check out the Chakra UI documents in Refine here. You can also read the complete tutorial on how to integrate Chakra UI with Refine here.
Let us consider Refine, a framework based on React, for this example. We shall create one more basic application from the beginning. Open your terminal, then copy and paste the code below.
npm create refine-app@latestWhen you pick "Chakra UI" for your user interface framework, it will handle the installation of all required dependencies and set up a beginning template on its own.
Here is an example component that uses Refine and Chakra UI together.
import { Box, Flex } from "@chakra-ui/react";
import { DateField, List, TagField, TextField } from "@refinedev/chakra-ui";
import { useList } from "@refinedev/core";
type ProductProps = {
id: number;
title: string;
status: string;
publishedAt: string;
status_color: string;
};
export const RefineWithChakraUIComp = () => {
const { data, isLoading } = useList<ProductProps>({
resource: "posts",
});
const posts = data?.data;
return (
<Box>
{isLoading ? (
<TextField p="2rem" value="Fetching posts..." />
) : (
<List title="7. Refine With Chakra UI">
{posts?.slice(0, 6).map((item) => (
<Box
key={item.id}
bg="brand.white200"
border="1px solid"
borderColor="brand.green100"
borderRadius="1rem"
mb="1rem"
overflow="hidden"
p="1rem"
>
<Flex>
<TextField fontWeight="700" mr="1rem" value="Title:" />
<TextField value={item.title} />
</Flex>
<Flex>
<TextField fontWeight="700" mr="1rem" value="Status:" />
<TagField
bg={item.status_color}
color="brand.white100"
value={item.status}
/>
</Flex>
<Flex>
<TextField fontWeight="700" mr="1rem" value="Published Date:" />
<DateField value={item.publishedAt} />{" "}
</Flex>
</Box>
))}
</List>
)}
</Box>
);
};
In the code we discussed before, we have constructed a basic program that employs Refine capabilities like the DateField, List, TagField, TextField, and useList functions.
DateField: This component takes care of formatting data on its own, and there's no need to use another library like moment.js or day.js. It works without extra rules.
List: It serves as a structure and gives standard space for elements such as text fields. It also supports the inclusion of a title property, which can accept various values.
TagField functions like a label, offering a standard boundary for words and the option to include additional customizations like color choices.
TextField: It works like text, allowing you to render any text.
An intriguing aspect is the setup of data fetching through the useList hook.
This hook, provided by the Refine framework, lets us fetch data in a dynamic way and also filter, sort, and paginate the data we get from an API.
Inside the system, it operates with react-query, which normally needs a lot of preparation and settings in an application to work as expected. But since Refine has taken care of this, we are able to use features such as useList without having to deal with complicated setups.
Refine stands out and becomes trustworthy because it offers a user both possibilities: the choice to work with any UI library they like or the option to take advantage of Refine's hook and additional functionalities all in one app.
It contains two separate properties: data and loading. Data is what we get back from an API call, and loading is useful for showing information to the user while waiting for the results. This has the standard react-query features.
The argument called resource in the function useList refers to a name that says "posts.". This is taken from the base part of our application, where we set up Refine.
From the output shown above, when we use Refine components and hooks, it all works in the same manner.
Conclusion
Chakra UI stands out because you can change its design a lot. You have the choice to switch among various themes.It also contains Flexbox and style utilities so you can create your own design systems.
Chakra UI is a user interface that is getting more popular these days. It keeps getting better as a possible new library, and more people are talking about it. There is a good chance that new parts will be added soon, so consider using this in your upcoming React project.
How much is a great User Experience worth to you?
Browsee helps you understand your user's behaviour on your site. It's the next best thing to talking to them.
