3 minute read

Getting started

Everything you need to get up and running with Chakra UI Pro.

In this guide I will explain how you can seamlessly integrate Chakra UI Pro Components into your project. I assume that you already know Chakra UI and are familiar with the basics.

If you are starting from scratch, follow the first steps guide on Chakra UI an and choose a framework of your choice.


First steps

Besides the dependencies that Chakra UI brings by itself, we tried to avoid additional dependencies to keep the complexity small.

However, we use react-icons in many components to enhance the visual appearance. Decide for yourself if you want to replace these icons with your own or keep the suggested icons. To be able to work with react-icons, please make sure that they are installed as a dependency in your project.

yarn add react-icons # or npm install react-icons

In case we needed an additional dependency, we highlighted it in the component source code. Please note that dependencies are updated regularly and the source code is adjusted if necessary.

Chakra UI Pro Theme

When we launched Chakra UI Pro, every component was different. This way, we could show different approaches and techniques on how to build components.

However, this solution also brought some disadvantages. For example, different components could not be combined and we had to write a lot of code to customize simple components, which made the code snippets unnecessarily complex and difficult to integrate. So we moved that part into the Chakra UI Pro Theme or in other words, we use the idea of a design system.

At the moment, we are refactoring the remaining components to use the Chakra UI Pro Theme. Look for the themable badge to verify that the component is based on the Chakra UI Pro Theme.

Initial setup

You have two options to integrate the Chakra UI Pro Theme into your project. If you are happy with the look and feel of the base components or want to quickly build a prototype, I recommend installing the Pro Theme directly via npm.

yarn add @chakra-ui/pro-theme # or npm install @chakra-ui/pro-theme

If you want to have more flexibility and customize the theme according to your requirements, I recommend you to download the theme as a zip file directly from our website. To do this, log in with your account. You will find the download link in your user menu.

Set a brand color

In the Chakra UI Pro Theme blue is set as default color. The following example shows how to change the default color to purple.

import { theme as proTheme } from '@chakra-ui/pro-theme'

export const theme = extendTheme(
  {
    colors: { ...proTheme.colors, brand: proTheme.colors.purple },
  },
  proTheme,
)

Basically all color palettes from Chakra UI are supported, but I recommend you to use the suggested color palettes from the component preview.

Generate theme typings

To make the tokens used in the Pro theme available in your IDE's intellisense, you can generate the theme typings.

# install chakra cli
yarn add --dev @chakra-ui/cli

# generate theme typings
yarn chakra-cli tokens ./path-to-theme.ts

After you run this, you might need to "Restart the TS Server" in VSCode to see the changes.

To learn more, check out the Chakra CLI docs.

Set a font family

The Chakra UI Pro Theme uses Inter as the default font family. Since we want to give you the option to use other fonts as well, we decided not to bundle Inter into the library. If you want to use Inter as your default font, you just need to install it.

yarn add @fontsource/inter # or npm install @fontsource/inter

We recommend that you load the font at the same place where you import the ChakraProvider.

import { ChakraProvider } from '@chakra-ui/react'
import { theme } from '@chakra-ui/pro-theme' // when using npm
import '@fontsource/inter/variable.css'

export const App = () => {
  return (
    <ChakraProvider theme={theme}>
      <MyAwesomeProject />
    </ChakraProvider>
  )
}

In the following code snippet you can see how to use a different font, in this particular example Fira Code.

import { theme as proTheme } from '@chakra-ui/pro-theme'
import '@fontsource/fira-code/variable.css'

export const theme = extendTheme(
  {
    fonts: {
      heading: "'Fira CodeVariable', -apple-system, system-ui, sans-serif",
      body: "'Fira CodeVariable', -apple-system, system-ui, sans-serif",
    },
  },
  proTheme,
)

If you are not familiar with the concept of variable fonts, I recommend you to read the variable fonts guide on mdn.

Join our newsletter

Don't miss any more news and subscribe to our newsletter today.


© 2022 Chakra UI Pro. All rights reserved.