Chakra UI Pro

In this guide we will explain how you can seamlessly integrate Chakra UI Pro Components into your project. We 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 low.

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, we 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, we 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.

Configure the theme

The Chakra UI Pro theme is build on top of the Chakra UI default theme. To set everything up, you need to extend the base theme and set a brand color. In the example below we use blue as our brand color. This setp is mandatory.

import { theme as proTheme } from '@chakra-ui/pro-theme'
import { extendTheme, theme as baseTheme } from '@chakra-ui/react'

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

Basically all color palettes from Chakra UI are supported, but we recommend you to use on of the suggested color palettes from the component preview. The only thing left is to pass the theme to the ChakraProvider.

import { ChakraProvider } from '@chakra-ui/react'
import { theme } from './path-to-theme'

export const App = () => {
  return (
    <ChakraProvider theme={theme}>
      { /* your app */}
    </ChkaraProvider>
  )
}

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 configure your theme.

import { theme as proTheme } from '@chakra-ui/pro-theme'
import { extendTheme, theme as baseTheme } from '@chakra-ui/react'
import '@fontsource/inter/variable.css'

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

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 { extendTheme, theme as baseTheme } from '@chakra-ui/react'
import '@fontsource/fira-code/variable.css'

export const theme = extendTheme(
  {
    colors: { ...baseTheme.colors, brand: baseTheme.colors.blue },
    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, we recommend you to read the variable fonts guide on mdn.

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.