![]() All chakra components must be wrapped between ChakraProvider, which controls the theming of all children components. Install Chakra UI by running this command: yarn add chakra-ui/react 'emotion/react11' 'emotion/styled11' 'framer-motion4' For Chakra UI to work correctly, we need to set up the ChakraProvider at the root of our application src/pages/app.tsx. I tweet about my development journey as a Self-taught developer, so hit me up on Twitter. If this is your first time seeing a Chakra UI app, here is a refresher. Let's add Chakra UI to our project first. Usage To stack elements in horizontal or vertical direction only, use the HStack or VStack components. If you did like this article, share it with your co-workers. VStack: Used to add spacing between elements in vertical direction only, and centers them. Two of the templates I want to call out are Choc UI and Chakra-Templates.Ĭhakra UI also has a very active community on Discord. It's very flexible, the documentation is great, and there are a lot of pre-built templates to help you speed up the process. Now when you click the button the site should change to Dark mode, and toggle between the two icons.Ĭhakra UI has helped me boost my development process to another level. It uses a modified version of theCSS lobotomized owl selectorto add spacing between its children. Now let's bring in the icon button and give the component the following props: Stack is a layout component that makes it easy to stack elements together andapply a space between them. The hook is similar to the useState hook, except that toggleColorMode will set the theme of the site to dark or light mode globally, while colorMode will store the value "light" or "dark". ![]() You can also use the Stackcomponent as well and pass the directionprop. Usage To stack elements in horizontal or vertical direction only, use the HStackor VStackcomponents. Inside your respective directory, install ChakraUI using Yarn or NPMįor ChakraUI to get initialised you first need to add in your index.js file. VStack:Used to add spacing between elements in vertical direction only, and centers them. I started using Chakra UI because I wanted to focus on my back-end code more than being stuck on "How to center a div element?".Ĭhakra UI is extremely simple to use, especially when you are familiar with how to use ReactJs components. Have you ever struggled with whether to focus more on the back-end or front-end of your project? Well believe me, both are equally important. How Chakra UI affects your Lighthouse Score.How to get Started and Install Chakra UI.It is customizable and reusable, and most importantly it supports ReactJs, along with some other libraries too. It's made up of basic building blocks that can help you build the front-end of your web application. ![]() In this article, I'll talk about what ChakraUI is and why you should use it.Ĭhakra UI is a component-based library. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |