Create React App

Automatic Installation#

Create React App allows users to create a project using a template, which determines the files and dependencies included with the generated project.

JavaScript Template#

To generate the starter template for a JavaScript project, run the command below:

npx create-react-app my-app --template @chakra-ui

yarn create react-app my-app --template @chakra-ui

pnpm create react-app my-app --template @chakra-ui

TypeScript Template#

To generate the starter template for a TypeScript project, run the command below:

npx create-react-app my-app --template @chakra-ui/typescript

yarn create react-app my-app --template @chakra-ui/typescript

pnpm create react-app my-app --template @chakra-ui/typescript

What's included#

The official templates are similar to the base create-react-app template, but they come with Chakra UI dependencies pre-installed and include Chakra-specific functionality.

Pre-install dependencies#

• @chakra-ui/react
• @chakra-ui/theme
• @chakra-ui/theme-tools
• react-icons

Chakra-specific functionality#

• ChakraProvider and CSSReset already connected to the default theme
• ColorModeSwitcher component, using Chakra's color mode management
• Animated Chakra UI logo instead of the React logo

Manual Installation#

1. Installation#

Inside your CRA project directory, install Chakra UI by running either of the following:

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

yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion

pnpm add @chakra-ui/react @emotion/react @emotion/styled framer-motion

2. Provider Setup#

After installing Chakra UI, you need to set up the ChakraProvider at the root of your application. This can be either in your index.jsx or index.tsx

Put in the following code:

import * as React from 'react'

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

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

ChakraProvider Props#

Boom! You're good to go with steps 1 and 2 🚀🚀🚀 However, if you'd love to take it a step further, check out step 3.

3. Optional Setup#

Customizing Theme#

If you intend to customise the default theme object to match your design requirements, you can extend the theme from @chakra-ui/react.

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

// 1. Import the extendTheme function
import { extendTheme, ChakraProvider } 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>
  )
}

To further customize components or build your own design system, the theme-tools package includes useful utilities. Install @chakra-ui/theme-tools.

Using Chakra Icons#

Chakra provides a set of commonly used interface icons you can use in your project.

If you want to use the icons from Chakra UI, install @chakra-ui/icons.

Follow this guide for customising Chakra Icons Using Chakra UI Icons.

Notes on TypeScript 🚨#

Please note that when adding Chakra UI to a TypeScript project, a minimum TypeScript version of 4.1.0 is required.

Increate-react-app project, you'll need to manually upgrade typescript to ^4.1.0.