Chakra UI As A New Dev: The Odyssey

Coming into my next big project for Flatiron, I noticed a small but amazing detail about what we could do to handle styling for this project.

You can also incorporate a UI framework

I was ecstatic! I had heard about all of the magical things that frameworks like Bootstrap and Tailwind could do for styling! As I started to look and ask around about which I should try to use, I learned of Chakra UI. I started to look at their components and a lot of them seemed almost just like refactors of existing HTML elements thrown into a component ready to get dropped into your code. While that seemed convenient I was still curious, so how does this really work? That led me down the theming and styling rabbit hole.

Now, I knew I wanted to work with Chakra UI but how do I do that? I started looking through their documentation and I noticed it's actually really simple, or so I thought. As a new dev the only thing I have ever had to do as far as package management was

npm install
npm start
npm test
npx create-react-app

I look at their installation guide and it's like hey, run this npm command instead
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
Seems easy enough. I run the command, my terminal does it's magic, and boom I now have the Chakra UI library in my project but I still can't use it just yet. I have to wrap my entire project inside of their <ChakraProvider /> component first. So I head on over to my index file, I see where React has set up my render me and I just give that <App /> component a big Chakra hug.

root.render(
  <ChakraProvider >
      <App />
  </ChakraProvider>
);

Okay, now I can use it, right? Well, technically yes. I could start dropping Chakra's components into my code, but that is almost everything I could do. I could do some mild coloring and styling but this was nothing compared to what I had seen Chakra could do for web applications. I did some more research and I found out that a lot of styling will also require Tailwind CSS. I make my way to their documentation and see they have a nice and simple install guide too.

• Step 1: Run these commands

npm install -D tailwindcss
npx tailwindcss init

• Step 2: Make your tailwind.config.js file and put this in it (whatever this means, I thought)

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

• Step 3: Make your global CSS file this

@tailwind base;
@tailwind components;
@tailwind utilities;

Wait, my npx create-react-app gives me two CSS files? Oh well, I'll delete this App one and just keep my index one. If it's the only one it's got to be my global one. I do a little className test for Tailwind with a <Box /> I grabbed from Chakra and by some miracle it's styled. At this point, I was feeling pretty confident in myself and I started coding away. I'm throwing variants on this component, hovers over that one, and making this <Button /> white... wait, why's my button not white? I looked through Chakra's documentation and I see that they have this whiteAlpha color, I assume that's what I want and I throw it on my component. Now it's opaque? Okay, let me try the hex for white. I set my background to #FFFFFF and still nothing. Well, that's strange I guess I'll just make yet another component red and move on. As I am working through this project I learn about Chakra UI templates. Now if you are reading this and somehow haven't seen these things, to my baby dev self, they are the most amazing things I have ever seen. (Here if you haven't seen them)

I was looking at fully structured, 'styled', and sometimes even animated components. I grabbed one of these templates, dropped it in my code, and morphed it into what I needed. I follow this pattern of finding what I need, dropping it in, and morphing it. Did they always have what I needed? Of course not, but that's when I brought in my handy Chakra components myself and just made what I needed. I was getting to the point where my project was getting closer to finished and I decided I didn't just want these default default black, white, and whatever random bright color I chose scheme for my project. I started researching the color issue again and that's when I fell down the real Chakra UI rabbit hole - custom themes.

Truthfully, before this project, I was not ready for this. I started looking through the documentation, looking at guides, and learning about color palettes. It all started with creating this theme you wanted and passing into that big <ChakraProvider /> hug from earlier, okay simple enough.

root.render(
  <ChakraProvider theme={customTheme}>
    <BrowserRouter>
      <App className="overflow-y-auto no-scrollbar" />
    </BrowserRouter>
  </ChakraProvider>
);

I started setting up my color pallet:

export default extendTheme({
  colors: {
      primary: {
        50: '#EDF6F9',
        100: '#D1E9F0',
        200: '#B5D9E6',
        300: '#99C9DC',
        400: '#7DB9D2',
        500: '#83C5BE',
        600: '#68A09B',
        700: '#4D7B78',
        800: '#326654',
        900: '#1B412F',
      },
      secondary: {
        50: '#FFDDD2',
        100: '#FFD3C0',
        200: '#FFC9AE',
        300: '#FFBF9D',
        400: '#FFB58B',
        500: '#E29578',
        600: '#BF745E',
        700: '#9C5444',
        800: '#79332A',
        900: '#561311',
      },
      neutral: {
        50: '#F7FAFC',
        100: '#EDF2F7',
        200: '#E2E8F0',
        300: '#CBD5E0',
        400: '#A0AEC0',
        500: '#718096',
        600: '#4A5568',
        700: '#2D3748',
        800: '#1A202C',
        900: '#171923',
      },
    },
});

Now I'm using these colors and surprisingly it starts looking pretty nice! Wait, I can do dark and light mode? Just requires another color pallet and some config object? Alright, let's do it!

export default extendTheme({
  config: {
    initialColorMode: 'light',
    useSystemColorMode: false,
  },
  colors: {
    light: {
      primary: {
        50: '#EDF6F9',
        100: '#D1E9F0',
        200: '#B5D9E6',
        300: '#99C9DC',
        400: '#7DB9D2',
        500: '#83C5BE',
        600: '#68A09B',
        700: '#4D7B78',
        800: '#326654',
        900: '#1B412F',
      },
      secondary: {
        50: '#FFDDD2',
        100: '#FFD3C0',
        200: '#FFC9AE',
        300: '#FFBF9D',
        400: '#FFB58B',
        500: '#E29578',
        600: '#BF745E',
        700: '#9C5444',
        800: '#79332A',
        900: '#561311',
      },
      neutral: {
        50: '#F7FAFC',
        100: '#EDF2F7',
        200: '#E2E8F0',
        300: '#CBD5E0',
        400: '#A0AEC0',
        500: '#718096',
        600: '#4A5568',
        700: '#2D3748',
        800: '#1A202C',
        900: '#171923',
      },
    },
    dark: {
      primary: {
        50: '#001C24',
        100: '#003039',
        200: '#00434E',
        300: '#005763',
        400: '#006D77',
        500: '#3073F8',
        600: '#6097FA',
        700: '#90BBFC',
        800: '#C0DFFE',
        900: '#F0F7FF',
      },
      secondary: {
        50: '#561311',
        100: '#79332A',
        200: '#9C5444',
        300: '#BF745E',
        400: '#E29578',
        500: '#FFB58B',
        600: '#FFBF9D',
        700: '#FFC9AE',
        800: '#FFD3C0',
        900: '#FFDDD2',
      },
      neutral: {
        50: '#171923',
        100: '#1A202C',
        200: '#2D3748',
        300: '#4A5568',
        400: '#718096',
        500: '#A0AEC0',
        600: '#CBD5E0',
        700: '#E2E8F0',
        800: '#EDF2F7',
        900: '#F7FAFC',
      },
    },
  },
});

Oh, I am cruising now! I start to set my light mode / dark mode with Chakra's useColorMode hook, I'm throwing in some more Tailwind to allow scrolling and I'm even making custom styles for certain components (after stumbling and tripping my whole way through Chakra's documentation) like this one to let me standardized how my <Heading /> component looked anywhere else in my project.

export const HeadingStyle = defineStyleConfig({
  baseStyle: (props) => ({
    textTransform: 'uppercase',
    fontWeight: 900,
    color: mode('secondary.800', 'secondary.500')(props),
  }),
  sizes: {},
  variants: {},

  defaultProps: {},
});

I noticed though not all of my files were letting me use Tailwind. Now, why was that? Well, outside of the default files React had made for me the rest of my file structure was using .jsx, not just .js files. A quick update to my config file

  ...content: ['./src/**/*.{html,js,jsx}'],

And I was good to go again. I had done it. With much stumbling, tripping, and painful debugging I was able to make a beautiful, custom, and interactive web application as my first remotely "larger" React project. I had many humbling moments during this journey, but I am proud to say, as a new dev, that I was at least somewhat able to showcase the strength of Chakra and also build a decent competency with it. To those of you curious, yes I did manage to learn how to use white and black in my application and you can see it live as my first deployed project as well!

The product of this odyssey

(Or if you want to see the meat and potatoes behind this project)