Chakra UI

Chakra UI is a modular UI component for React apps. Building a website using this library is making devs lives much easier. To learn more

Chakra is growing quickly:

Installation:

npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^5

or

yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^5

After installation is time to set up, I'm using NextJs that's why my setup is MyApp, the ChakraProvider should be around your main project.

import type { AppProps } from 'next/app'
import { ChakraProvider } from '@chakra-ui/react';
import { theme } from '../styles/theme';
import "focus-visible/dist/focus-visible"

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ChakraProvider theme={theme}>
      <Component {...pageProps} />
    </ChakraProvider>
  )
}

export default MyApp

By improving your code you can create a Theme. Create a file Theme.tsthen you can customize the colours, fonts, size, etc...

import { extendTheme } from "@chakra-ui/react";

export const theme = extendTheme ({
  colors: {
    gray: {
      "dark": "#343a40",
      "light": "#6c757d"
    },
    white:{
      "light" : "#FFF",
      "dark" : "#f8f9fa"
    }
  },
  fonts: {
    heading: 'Roboto',
    body: 'Roboto'
  }, 
})

In case you don't want to create your theme, Chakra UI provides a default theme

Forms

As I said before this library makes your life easier, there are plenty of forms that you can simples use, such as Button, CheckBox, Input, Text Area. Even though all components come with default styles, you can customise the styles depending on your project.

import { Button, ButtonGroup } from '@chakra-ui/react'``

I want to talk more about Stack one of the components that I use a lot.

Stack is used to adding spacing between elements in the horizontal or vertical direction. It supports responsive values.

Responsive layout:

Let's talk about responsive layouts, one decade ago we didn't think about responsive websites, because most people used their laptops to access the website, however, it is not our reality anymore, a website needs to have the same layout whether it's opened by laptop or mobile. That's why is so important to have a responsive layout. Chakra components you can set up how you want that specific component behaviour.

example:

To set up a component using responsive between brackets the first (left) element is the mobile version and the second (right) element is the web version. In this example, in the mobile version, the box will be in a column and web version the box will be in a row.

Color Mode:

Dark or light mode is not so complicated as you thought. Most of Chakra UI components are compatible with dark mode. You can change the color mode by using the useColorMode hook.

Conclusion:

Chakra UI is a fantastic library, works well with NextJS. The documentation is easy to understand and the community is growing so fast by the time we will have more articles about this library.

ReactJS #NextJS #ChakraUI