Chakra UI - v1.6.10

πŸ•› Getting Started

Module Summary: Add Chakra UI to your website and write some code!

2 min read Β· 360 words

Installing Chakra UI

To install Chakra UI on your website (regardless of the framework), you will need to add the packages either viaΒ yarnΒ orΒ npm. Navigate to the root of your project.

Installing Chakra UI Via Yarn

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

Installing Chakra UI Via NPM

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

We are also installingΒ @emotion/react,Β @emotion/styledΒ andΒ framer-motion because Chakra UI depends upon them.

Chakra Provider

Now that we have the packages installed, we need to wrap our app with ChakraProvider. Please follow along with your framework below as each one is different.

React And ChakraProvider

  1. Navigate to the root of your react app.

  2. Add the following code:

    import * as React from "react";
    
    // 1. import `ChakraProvider` component
    import { ChakraProvider } from "@chakra-ui/react";
    
    function App({ Component }) {
      // 2. Use at the root of your app
      return (
        <ChakraProvider>
          <Component />
        </ChakraProvider>
      );
    }
    

Next.js And ChakraProvider

  1. Open _app.js

  2. Add the following code:

    import { ChakraProvider } from "@chakra-ui/react"
    
    function MyApp({ Component, pageProps }) {
      return (
        <ChakraProvider>
          <Component {...pageProps} />
        </ChakraProvider>
      )
    }
    export default MyApp
    

Gatsby And ChakraProvider

  1. Add the @chakra-ui/gatsby-plugin
npm i @chakra-ui/gatsby-plugin

...... or ......

yarn add @chakra-ui/gatsby-plugin

πŸŽ‰ Chakra UI is now ready to use! πŸŽ‰

Optional Packages

There are 2 optional packages you can install.

Chakra Icons

Chakra UI does have its own icon pack! Although it is small, it offers some common icons that look minimalistic. To use these icons we must install the icons.

yarn add @chakra-ui/icons

// or

npm i @chakra-ui/icons

Theme Tools

This package is meant to make it easier for you to customize components or build your own design system. This is an advanced feature and in most cases is not necessary. However, if you are so inclined, you can add the package, again via yarn or npm.

yarn add @chakra-ui/theme-tools

// or

npm i @chakra-ui/theme-tools

Using Chakra UI With TypeScript

According to the Chakra UI docs, when using TypeScript a minimum TypeScript version of 4.1.0 is required.

Last updated on October 20, 2021

Edit on GitHub

    Legal

    Terms

    Disclaimer

    Privacy Policy


    Carlson Technologies LogoΒ© Copyright 2021 - 2022, Carlson Technologies LLC. All Rights Reserved.