Basic Chakra UI Components

An overview of some basic Chakra UI components including Flex, Grid, Text, Heaiding, Button, and more.


When you were first learning html, you had to learn all the different tags. There are <p>, <h1>, <pre>, and many more. For most of these tags chakra ui has a corresponding component. On this page we will go over some common ones. Refer to the chakra ui docs for a complete list.

Before we begin, to use any of these components, simply import them from @chakra-ui/react:

import {
    someChakraUIComponent,
} from '@chakra-ui/react'

Layout Components

Layout components are essential for any webpage. Chakra UI gives us a large number of layout components. We will cover 5 of them here.

Box

From the Chakra UI website:

Essentially, it is a <div> element that allows us to pass in shorthand styles as props.

Import

import { Box } from "@chakra-ui/react"

Usage

<Box bg="tomato" w="100%" p={4} color="white">
  This is the Box
</Box>

Flex

Import

Usage

Grid

Import

Usage

Center

Import

Usage

Wrap

Import

Usage

Form Components

Data Display Components

Overlay Components

These are only some of the many components Chakra UI offers us.

Using Chakra UI Components

To use Chakra UI, simple import the components you want to use and use them just like any other html tag.

Inside of your website, open index.js and add the following code:

Let's take a look at each of the tags we used.

Flex

The flex tag renders as a div tag with the display: flex property.

<div style={{ display: "flex" }}></div>

is equal to

<Flex></Flex>

On top of this, we have shorthand properties for common flex properties. See the table below for some of them.

CSS Flex PropertyReact ShorthandChakra UI Shorthand
flex-directionflexDirectiondirection
flex-wrapflexWrapwrap
align-itemsalignItemsalign

The leftmost column is the standard css property. The middle column is the react shorthand. And the rightmost colum is the chakra ui shorthand.

We have this kind of shorthard for almost every css property. margin is m, width is w, maxWidth is maxW, and so on.

Heading

Text

Button

In the next module we will take a look at more common Chakra UI components.

Last updated on August 05, 2021


Legal

Terms

Disclaimer

Privacy Policy

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

Powered by

Vercel Logo