Get started with Chakra-UI
Tags: javascript, programming, react, webdev
Published: 2022-11-28 17:03:32

## **What is Chakra-UI?**
Chakra UI is a modular component library that contains a simple API which gives the ability to make apps without having to worry about building the components themselves. It uses Emotion for styling and customization which allows developers to style inside the components with style props. The components are dark mode compatible as well and use a Box and Stack layout.

## **Installation**

- I will use nextjs.

```
yarn create next-app <my-app>
```

- Install packages:

```
cd <my-app>
yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6
```

## **Usage**
You also need to setup ChakraProvider in your app's root:

```
import * as React from "react"

// 1. import `ChakraProvider` component
import { ChakraProvider } from "@chakra-ui/react"

function App() {
  // 2. Use at the root of your app
  return (
    <ChakraProvider>
      <App />
    </ChakraProvider>
  )
}
```

## **Setup Chakra-UI with next**

- Wrap the Component component with the ChakraProvider component.

```
import { ChakraProvider } from '@chakra-ui/react'

function MyApp({ Component, pageProps }) {
    return (
        <ChakraProvider>
            <Component {...pageProps} />
        </ChakraProvider>
    )
}

export default MyApp
```
Now we can use chakra-UI components.

## **Theming Example**
Chakra UI provides an extendTheme function that deep merges the default theme with your customizations.

```
// 1. Import the extendTheme function
import { extendTheme } from "@chakra-ui/react"

// 2. Extend the theme to include custom colors, fonts, etc
const colors = {
  brand: {
    900: "#1a365d",
    800: "#153e75",
    700: "#2a69ac",
  },
}

const theme = extendTheme({ colors })

// 3. Pass the `theme` prop to the `ChakraProvider`
function App() {
  return (
    <ChakraProvider theme={theme}>
      <App />
    </ChakraProvider>
  )
}
```

## **How to import components**
Always import the components and utilities as a named import from the @chakra-ui/react package.

```
import { Button, Text, Heading, Box, Link, useTheme } from '@chakra-ui/react'

const Index = () => {
    return <Heading>Heading 1</Heading>
}

export default Index
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r8xulti7xzkisl7a1ugp.png)

## **Custom styles**
There are two ways to customize the styles.

- Style Props: With style props, you can use almost any CSS property as props. [See all the available style props.](https://chakra-ui.com/docs/styled-system/features/style-props)

```
const Index = () => {
    return (
        <Heading color='red' fontSize='5rem'>
            Heading 1
        </Heading>
    )
}
```

- SX prop: With sx prop, you can use any custom style as an object. All the property name has to be camelcase.

```
const Index = () => {
    return (
        <Heading
            sx={{
                color: 'red',
                fontSize: '5rem',
            }}
        >
            Heading 1
        </Heading>
    )
}
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n6yi0ykxrzzvtn6hfjt3.png)

## **Color Mode Example**
ChakraProvider automatically uses color mode when used at the root of the app. By default, most of Chakra's component are dark mode compatible. To handle color mode manually in your application, use the useColorMode or useColorModeValue hooks.

useColorMode:

```
function Example() {
  const { colorMode, toggleColorMode } = useColorMode()
  return (
    <header>
      <Button onClick={toggleColorMode}>
        Toggle {colorMode === "light" ? "Dark" : "Light"}
      </Button>
    </header>
  )
}
```

## **Light mode**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xpdzlqn977mvrthu1jxq.png)

## **Dark mode**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tyxepngnjo34hxg757y1.png)

## **Commonly Used Components**
Here are some of the components that I use most.

- [Box](https://chakra-ui.com/docs/components/layout/box)
- [Aspect Ratio](https://chakra-ui.com/docs/components/layout/aspect-ratio)
- [Flex](https://chakra-ui.com/docs/components/layout/flex)
- [Grid](https://chakra-ui.com/docs/components/layout/grid)
- [Stack](https://chakra-ui.com/docs/components/layout/stack)
- [Button](https://chakra-ui.com/docs/components/form/button)
- [Input](https://chakra-ui.com/docs/components/form/input)
- [Textarea](https://chakra-ui.com/docs/components/form/textarea)
- [Text](https://chakra-ui.com/docs/components/typography/text)
- [Heading](https://chakra-ui.com/docs/components/typography/heading)
- [Link](https://chakra-ui.com/docs/components/navigation/link)
- [Icon](https://chakra-ui.com/docs/components/media-and-icons/icon)
- [Image](https://chakra-ui.com/docs/components/media-and-icons/image)

This is just a brief overview of Chakra UI and some of its features. On the official [site](https://chakra-ui.com/docs/getting-started/), you can read more on color modes, gradients, global styles, and more.

By the way, I am looking for a new opportunity in a company where I can provide great value with my skills. If you are a recruiter, looking for someone skilled in frontend web development and passionate about revolutionizing the world, feel free to [contact me](https://Devsuite.tech). Also, I am open to talking about any freelance project.

## Contacts
Twitter: [@Dev_suite](https://twitter.com/dev_suite)
Instagram: [@Dev_suite](https://www.instagram.com/dev_suite/)