There are numerous CSS frameworks out there; all have their own uses, advantages and disadvantages. Here I delve into Chakra UI and look at some of the features which sets it apart from the others.

What is Chakra UI?

Chakura UI is a CSS framework, much like TailwindCSS/Bootstrap/Material-UI

Set Up

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

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

import * as React from 'react'

import { ChakraProvider } from '@chakra-ui/react'

function App() {
  return (
    <ChakraProvider>
      <TheRestOfYourApplication />
    </ChakraProvider>
  )

Features

Style Props

There are a number of style props you can use within different elements of Chakra. For example you can add margins and padding to boxes. Various different background colours and gradients.

Below are the props for various different elements (for reference)

Margin and Padding

Margin

m, margin: margin
mt, marginTop: margin-top
mr, marginRight: margin-right
me, marginEnd: margin-inline-end
mb, marginBottom: margin-bottom
ml, marginLeft: margin-left
ms, marginStart: margin-inline-start
mx, marginX: margin-inline-start + margin-inline-end
my, marginY: margin-top + margin-bottom

Padding

p, padding: padding
pt, paddingTop: padding-top
pr, paddingRight: padding-right
pe, paddingEnd: padding-inline-end
pb, padingBottom: padding-bottom
pl, paddlingLeft: padding-left
ps, paddingStart: padding-inline-start
px, paddingX: padding-inline-start + padding-inline-end
py, paddingY: padding-top + padding-bottom

Colour/Background

color: color
bg, background: background
bgColor: background-color
opacity: opacity

Layout/Width/Height

w, width: width
h, height: height
minW, mindWidth: min-width
maxW, maxWidth: max-width
minH, minHeight: min-height
maxH, maxHeight: max-height
display: display
boxSize: width, height
verticalAlign: vertical-align
overflow: overflow
overflowX: overflow-x
overflowY: overflow-y

Flexbox

gap: gap
rowGap: row-gap
columnGap: column-gap
alignItems, *align: align-items
alignContent: align-content
justifyItem:justify-items
justifyContent, *justify: justify-content
flexWrap, *wrap: flex-wrap
flexDirection, flexDir, *direction: flex-direction
flex: flex
flexGrow: flex-grow
flexShrink: flex-shrink
flexBasis: flex-basis
justifySelf: justify-self
alignSelf: align-self
order: order

Position

pos,position: position
zIndex: z-index
top: top
right: right
bottom: bottom
left: left

Shadow

textShadow: text-shadow
shadow, boxShadow: box-shadow

Filter

filter: filter
blur: filter
brightness: filter
contrast: filter
hueRoate: filter
invert: filter
saturate: filter
dropShadow: filter
backdropFilter: backdrop-filter
backdropBlur: backdrop-filter
backdropBrightness: backdrop-filter
backdropContrast: backdrop-filter
backdropHueRotate: backdrop-filter
backdropInvert: backdrop-filter
backdropSaturate: backdrop-filter

Components

Chakra has numerous components which come out of the box. Below are a few examples.

Visually Hidden

const Example = () => {
  return (
    <Box>
      <Heading>Title and description</Heading>
      <VisuallyHidden>This will be hidden</VisuallyHidden>
    </Box>
  )
}

Spinner

import { Spinner } from '@chakra-ui/react'

const Spinner = () => {
  <>
    <Spinner
      thickness='4px'
      speed='0.65s'
      emptyColor='gray.200'
      color='blue.500'
      size='xl'
    />
  </>
}

Modal

import {
  Modal,
  ModalOverlay,
  ModalContent,
  ModalHeader,
  ModalFooter,
  ModalBody,
  ModalCloseButton,
} from '@chakra-ui/react'

const BasicUsage = () => {
  const { isOpen, onOpen, onClose } = useDisclosure()
  return (
    <>
      <Button onClick={onOpen}>Open Modal</Button>

      <Modal isOpen={isOpen} onClose={onClose}>
        <ModalOverlay />
        <ModalContent>
          <ModalHeader>Modal Title</ModalHeader>
          <ModalCloseButton />
          <ModalBody>
            <Lorem count={2} />
          </ModalBody>

          <ModalFooter>
            <Button colorScheme='blue' mr={3} onClick={onClose}>
              Close
            </Button>
            <Button variant='ghost'>Secondary Action</Button>
          </ModalFooter>
        </ModalContent>
      </Modal>
    </>
  )
}

Tooltip

🚨 Note from docs: If you’re wrapping an icon from react-icons, you need to also wrap the icon in a span element as react-icons icons do not use forwardRef.

import { Tooltip } from '@chakra-ui/react'

<Tooltip hasArrow label='Search places' bg='gray.300' color='black'>
  <SearchIcon />
</Tooltip>

Close button

import { CloseButton } from '@chakra-ui/react'

const CloseButton = () => {
  <>
    <CloseButton />
  </>
}

Show/Hide

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

<Show breakpoint='(max-width: 400px)'>
  <Box>This text appears only on screens 400px and smaller.</Box>
</Show>

Hooks

useBoolean

useBreakpointValue

useClipboard

useMediaQuery

useMergeRefs

useOutsideClick

useTheme

useDisclosue

useCheckbox

useCheckboxGroup

useRadio

useRadioGroup

Integration into Frameworks/Packages

There are a number of different frameworks Chakra can integrate into, their docs cover create-react-app, next.js, gatsby, remix and vite to name a few.

…But what about TailwindCSS, Material UI or Bootstrap?

The Chakra documentation does speak about the comparsion to these different CSS frameworks. Of course it’s biased and tells you why it’s better than the rest. My personal view is they all have their use cases. What I like about Chakra is the documentation is very good, it covers popular frameworks and libraries, and a lot of it comes out of the box.