How to Use Chakra UI with Next.js and React

hey team today we're going to learn how to install and use chalkware ui i'm colby fayak and if this is your first time here make sure you hit subscribe for future updates chakra ui is a component library for react that makes building web apps easy they try hard to make all the components as accessible as they can be but also themeable and easy to use with style props using emotion they have a ton of different components whether it's a simple button or a ui for multiple tabs to get started learning chaka we're going to install it using xjs we're going to simply install the default project with create next app and that way we're going to start bringing in the chalker components to get started we're gonna open up our terminal and we're gonna go yarn create next app and let's call it my chakra app and once that's finished we can cd into our directory we can run yarndev and we can open up our local server and we can see our default page to install chakra we need to include both chakra itself and its peer dependencies so particularly we need to install emotion along with chakra so i'm going to go ahead and copy all these dependencies not specifically from npm only simply because i'm using yarn and i'm gonna go yarn add all those dependencies once it's done i can spin back up my development server now to get started with chakra the first thing we need to do is install the theme provider around the application this is gonna allow chakra to use its components in order to interact with and communicate the theme and anything else that chakra needs so inside my new nexjs project i'm going to go into the pages folder and i'm going to open up app.js where inside of that i'm going to import my theme provider using that theme provider i'm going to open up this component and i'm going to wrap component with our theme provider additionally in order to get chakra to work we also need to include a theme with it so we're going to start with the default chakra theme so i'm also going to import theme from chakra and i'm going to also pass that in right as a prop to the theme provider and if i open up my app it should look exactly the same at this point one last piece though before we actually move on we want to include a css reset which because chakra doesn't override all the styles for the browsers we might have some inconsistent looks from what we actually see in the chakra of documentation so inside my import i'm going to also include the css reset and then i'm going to include that as a child component right inside the theme provider now if we look back at the page we can see that it actually is changed up now but because of that css reset but we're going gonna try to recreate it for the most part using the chakra components so now we can open up the index.js file and we can get started actually adding the components starting at the top i'm gonna import the heading and the link components from chakra to get started i'm going to create a new component called heading and for now we'll just put it right next to our h1 and inside that we can copy the same headline now with the heading component we can set it what we want it to act as so we're going to say we want it as an h1 now if we look at this in our browser we can see that we have the headline but it's not quite as big as we need it to be and we also don't have a style blank so on our heading let's also add a size prop and let's say 2xl and we can see it looks kind of similar to the other headline and let's add some margin bottoms we're going to say m b for margin bottom and let's say two additionally we're gonna take our link component now and we're gonna replace the a element with that we can leave the href but we're gonna also apply color and let's call it teal 500. chakra comes with a color scheme by default which we imported with our theme into our theme provider so we can reference the teal color and we're going to grab the 500 of that shade now if we look at our browser we can see our headline with our next js so now we can get rid of that h1 and we have our heading next for our description we're going to need a paragraph tag and we're going to need a code tag so we're going to import the text component and the code component we're going to replace the paragraph tag with text we're going to get rid of that class name and we're going to replace code with the code component and get rid of the class name as well and we can see that that's starting to look good but we want to make it a little bit bigger so similar to before we can change the size of this but we're going to use the font size prop and we're going to say xl and we're going to also add a little bit of margin on top so mt from margin top two now if we look at our browser it's a little bit bigger and we can see that it's a little bit more spaced away from the title kind of similar to the default starter so next let's try to replace these cards this grid works by flexbox so we can use the flex component in order to apply flexbox to the child components so at the top let's import the flex component and then we're going to replace this div with the flex component and if we look at our page we can see that our pages are flexed but they're not wrapping like we want them to so i'm going to paste in a few props so starting at the left we have flex wrap we're setting to wrap that way the child components will actually wrap we have line item center that way it's centered vertically within the different rows we have justify content so that it's horizontally centered max width of 800 pixels and a margin top of 10. and once we save that and look in our browser we can see that it's back to our original cards now for our card components we're going to use something called a box instead of the link component that way we can represent the shape that we want at the top we're going to import the box component and since we should already have a gist of what these components do i'm going to paste in this snippet which we can use to replace our cards the snippet replaces the first one so we can see that we're first setting it as an a element so we can provide it as link we're going to set the href to the docs link we're going to add some padding and some margin some border width we're going to make the corners rounded and it flex basis of 45 that way it takes up about half a column and then inside of that we have our heading component replacing our h3 so we're setting that as h3 with a size of large and a little bit of a margin bottom and finally another text component where we're going to set the font size to large and we're going to set our copy right inside so now i can get rid of this first component and we can see that that card is starting to look like how we want it to and i can go ahead and replace these other three with the boxes and once i have the other three going to the right place we can see that our page and our cards now look pretty similar to the next js starter the cool thing is we can use all these components from chakra like boxed or text and then we can customize to how we want it with the style props one issue with how we're doing it though is those values are pretty static so while this looks good on desktop it's not collapsing down on mobile very nicely to fix this and make our styles responsive the chakra takes in a raise in its style props meaning we can pass in different values for different sizes so when it's on a mobile size or a small device we don't want the flex bases to be 45 we want it to be the full width so on our components we can select all of the flex bases which are the four of them we can change this into an array and we can set the first value to auto which will be the default and then we can set the second value to 45 which will be for 480 pixels and upwards now if we look at it in mobile we can see that it takes up the full width and if we turn off the mobile we can see that it's back at 45 the cool thing about chakra ui is not only do you get these awesome accessible components right out of the box you can really customize them to how you want using style props and if you follow along with me you learned how to install chakra ui into an xjs app if you like this video make sure you hit thumbs up and subscribe for future updates thanks for watching

Channel: Colby Fayock

Views: 22,147

Keywords: chakra ui next js, chakra ui next, chakra ui next js link, chakra ui not working, chakra ui, chakra ui tutorial, chakra ui responsive, chakra ui theme, chakra ui react, chakra ui react tutorial, next js chakra, nextjs chakra ui, react chakra ui, react chakra, chakra ui how to, chakra ui components, install chakra ui, chakra ui theme provider, chakra ui guide, chakra ui application, getting started chakra ui, chakra ui install, chakra ui intro, chakra react

Id: ubB5l-HVPgY

Length: 6min 50sec (410 seconds)

Published: Tue Oct 20 2020