Tech Stack ‐ Chakra UI

What is Chakra UI?

ChakraUI is a React UI component library and framework.

See installation instructions here

What is a component library?

• a collection of pre-styled and pre-existing UI elements that are ready to use
• used mainly for front-end UI development

Popular React UI Component Libraries

Benefits of Component Libraries

• access to pre-built, pre-styled UI components
• speed – can easily mock up webpages instead of building from scratch
• reliable – components are well-tested, well-documented
• consistent look
• less duplicate code
• accessibility

Downsides of Component Libraries

• learning curve – each library works differently
• limitations to style and design (however, Chakra UI provides many ways to customize components, more so than many other libraries)
• libraries may receive updates or change over time – may cause compatibility issues with existing code

Chakra UI Components

See the full list here

Easy Component Customization with Chakra UI

• Customize default Chakra theme
• Customize a Chakra UI component using Style Props

Example of a Component

• must include an import statement to use the component
• below is an example of a Heading component

import { Heading } from "@chakra-ui/react";

export default function Dashboard() {
   return (
      <div>
         <Heading>Chakra UI Components</Heading>
      </div>
   )
}

As you can see, the Heading component text is automatically styled as an h2 element with the predetermined fonts and styles.

Example of Customizing Components Using Style Props

Before Adding Style Props

import { Container, Heading, Text } from "@chakra-ui/react";

export default function Dashboard() {
   return (
      <Container>
         <Heading>Chakra UI Components</Heading>
         <Text>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem, laudantium?</Text>
      </Container>
   )
}

After Adding Style Props

• Here we are customizing the Heading component by adding a margin in the Y direction of 30px and a padding of 10px
• We are adding a margin to the left of the Text component of 30px

import { Container, Heading, Text } from "@chakra-ui/react";

export default function Dashboard() {
   return (
      <Container>
         <Heading my="30px" p="10px">Chakra UI Components</Heading>
         <Text marginLeft="30px">Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem, laudantium?</Text>
      </Container>
   )
}