DEV Community

Leo Kalshteyn
Leo Kalshteyn

Posted on

Intro to 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

In your terminal:

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

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>
  )
}
Enter fullscreen mode Exit fullscreen mode
  • For Next.js, you need to set this up in pages/_app.js or pages/_app.tsx
  • For Gatsby, install the @chakra-ui/gatsby-plugin. It does it automatically for you.
  • For Create React App, you need to set this up in index.js or index.tsx

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>
  )
}
Enter fullscreen mode Exit fullscreen mode

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>
  )
}
Enter fullscreen mode Exit fullscreen mode

Global Style Example

By using ChakraProvider at the root of your application, we automatically render a GlobalStyle component. It reads the styles defined in theme.styles.global which can be a style object or a function that returns a style object. Then it processes the styles and passes it to the emotion's global component for handling the global style injection.

// 1. Using a style object
const theme = {
  styles: {
    global: {
      "html, body": {
        fontSize: "sm",
        color: "gray.600",
        lineHeight: "tall",
      },
      a: {
        color: "teal.500",
      },
    },
  },
}
// 2. Using a function
// NB: Chakra gives you access to `colorMode` and `theme` in `props`
const theme = {
  styles: {
    global: (props) => ({
      "html, body": {
        fontSize: "sm",
        color: props.colorMode === "dark" ? "white" : "gray.600",
        lineHeight: "tall",
      },
      a: {
        color: props.colorMode === "dark" ? "teal.300" : "teal.500",
      },
    }),
  },
}
Enter fullscreen mode Exit fullscreen mode

This is just a brief overview of Chakra UI and some of its features. On the official site, you can read more on color modes, gradients, global styles, and more.

References

Discussion (0)