Building a Website Builder: Create Custom React Components With Chakra UI

I’m trying to be super DRY (don’t repeat yourself) about my styling for my website builder. I want a single source of truth for colors, fonts, sizing, breakpoints, etc. so it’s easy to make quick style changes

Eventually, I’d even like to be able to customize my website’s style from the UI

With this in mind, I’m trying to take my time to read through Chakra UI’s documentation and experiment with the different options before I make any final style decisions.

Last night, I learned about recipes and they’re pretty dang cool! With recipes, you can create multi-variant styles and bake them directly into a React component. You define the component’s base style and its possible variants in a simple JSON recipe and then let Chakra bake it into a component for you

I made a Heading component to test it out and I’m pretty pleased! I have three main Headings in my website builder design: the company name in the header, optional page headings, and section headings.

Since I don’t have any pages or sections yet, I just tested out two variants: header and page. Here’s the code and the results!

What do you think?!

Want to develop your codings skills and network with other developers? Join the Coding with Callie community!

Coding with Callie – https://coding-with-callie.com/
LinkedIn – https://www.linkedin.com/company/coding-with-callie/