Chakra UI Pro

Welcome to Chakra UI Pro! This guide will assist you in integrating Chakra UI Pro components into your project seamlessly. We assume you're already familiar with Chakra UI basics.

If you're a beginner, follow the first steps guide on Chakra UI and choose a framework to your liking.

Initial Steps

We've limited additional dependencies to maintain simplicity, apart from those inherent to Chakra UI.

One exception is react-icons, which we use to boost the visual aesthetics of many components. Feel free to use your own icons, or stick with the ones we've suggested. Ensure react-icons is installed in your project:

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

Additional dependencies, if needed, are noted in the component source code. We regularly update dependencies and tweak source code as required.

Chakra UI Pro Theme

Motivation

Chakra UI Pro began with unique components, displaying various techniques for component building. But this approach had downsides—components couldn't mix, and customization required copious code, leading to complex code snippets and difficult integrations. Thus, we transitioned to using the Chakra UI Pro Theme, implementing a design system strategy.

We're currently refactoring components to the Chakra UI Pro Theme. Components that have made the switch are marked with a 'themable' badge.

What is the Chakra UI Pro Theme?

The Chakra UI Pro Theme amplifies the base Chakra UI theme by introducing extra component variants, sizes, and a collection of semantic tokens and text layer styles. Harmonizing with the original Chakra UI theme, the Pro Theme elevates your user interface without disrupting your current setup. If your custom variants share our names, minor changes might occur. For a smooth Pro Theme experience, consider checking our comparison here.

Installation

Before installing the Chakra UI Pro Theme, ensure Chakra UI is set up in your project. If not, follow the installation guide on Chakra UI's website.

To install the Pro Theme, use yarn:

yarn add @chakra-ui/pro-theme

Or npm, if you prefer:

npm install @chakra-ui/pro-theme

Setting Up the Pro Theme

Setting up the Pro Theme is simple. It extends the base Chakra UI theme and can be integrated in a few steps:

import { theme } from '@chakra-ui/pro-theme'
import { extendTheme } from '@chakra-ui/react'

Next, extend the Pro Theme with the Chakra UI default theme and set a brand color:

const proTheme = extendTheme(theme)
const extenstion = {
  colors: { ...proTheme.colors, brand: proTheme.colors.teal },
}
const myTheme = extendTheme(extendedConfig, proTheme)

Finally, wrap your application within the

ChakraProvider

and apply the custom theme.

return (
  <ChakraProvider theme={myTheme}>
    <App />
  </ChakraProvider>
)

Font Configuration

The Pro Theme uses Spline Sans for headings and Open Sans for the body by default. To use these, install and import the fonts:

yarn add @fontsource-variable/spline-sans @fontsource-variable/open-sans

import '@fontsource-variable/open-sans'
import '@fontsource-variable/spline-sans'

Note: Font installation methods might vary based on your platform/framework.

Using a Different Font

To switch to another font like Inter,

install and import the font, then adjust the fonts key in your theme configuration:

yarn add @fontsource-variable/inter

import { theme } from '@chakra-ui/pro-theme'
import { extendTheme } from '@chakra-ui/react'
import '@fontsource-variable/inter'

const proTheme = extendTheme(theme)
const extenstion = {
  colors: { ...proTheme.colors, brand: proTheme.colors.teal },
  fonts: {
    heading: "'Inter Variable', -apple-system, system-ui, sans-serif",
    body: "'Inter Variable', -apple-system, system-ui, sans-serif",
  },
}
const myTheme = extendTheme(extenstion, proTheme)

Generating Theme Typings

Enhance your development experience with theme typings. This provides your IDE's intellisense access to theme tokens, making development faster and more precise.

First, install the Chakra CLI as a dev dependency:

yarn add --dev @chakra-ui/cli

Next, generate theme typings using the following command (replace './path-to-theme.ts' with your theme file path):

yarn chakra-cli tokens ./path-to-theme.ts

You might need to "Restart the TS Server" in VSCode to observe changes.

For more information on Chakra CLI and theme typings, visit the Chakra CLI documentation.

Getting Started