Chakra UI Crash Course #6 – Lists & List Icons

⭐⭐ Watch the whole course now (without ads) on Net Ninja Pro:

🐱‍💻 Access the course files on GitHub:
Course files –

🐱‍💻 React Tutorial:
On Net Ninja Pro –
On YouTube –
🐱‍💻 React Router in Depth Tutorial:
On Net Ninja Pro –
On YouTube –

🐱‍💻 CSS Flexbox Tutorial:
On YouTube –

🐱‍💻 CSS Grid Tutorial:
On Net Ninja Pro –
On YouTube –

🐱‍💻 Chakra docs –
🐱‍💻 VS Code –

Okay then so now we've got a simple Layout sorted and a space for a sidebar On the left over here next I want to Create a sidebar component to sit over Here on the left in that space and then Add a small list of links to the sidebar To the different pages we've got in the Application so that's to the dashboard Page which is this page the create page Where we can in the future add new tasks And the profile page and to do this we Can use the list component that chakra Provides us with which also lets us Easily add list icons as well so first Of all let's create the sidebar Component and that's going to go inside The components folder that we created Earlier And once we've done that we can then Boilerplate a new component Again by Tapping RFC and then hitting Tab and Again if you're using a version of react Which is at least version 16 I believe It is then you can delete this react Import at the top because it's no longer Needed all right then so let's start This by using the list component because That's what we want inside this sidebar A list of links so we'll say list and You can import that by clicking it right Here And inside the list in fact first of all We can declare a few things on here so We can say the color is going to be

White and that will style things inside The list to be white which is nice we Can also say the font size is going to Be a bit bigger and that would be 1.2 M's for example and we'll come back to The other props later on we'll leave it At that for now So inside the list component we can have Different list items so we have a Component for that list item click on That to Auto Import it and inside the List item I basically want some text Which is going to be a link to whatever Page the item is so dashboard or profile Or create or something like that and Also an icon Now we can have the text so for example Dashboard now I want this to be a link Chakra UI does have link components but I tend to stick with the default Navalink components provided by the React router Dom package that's what I'm Going to do if you want to use links From the chakra UI Library you can do You can feel free to read about those But you have to go through an extra Little bit of setup to kind of integrate It with the react router done package so I'm just going to use the standard nav Link components and then if I want to Add any Styles I can do to either text Components around this or to this does It really matter So let me do a nav link so say nav link

That is from react router Dom So let me place the text inside The nav link now So dashboard All right so We need to say where the link is going To so we can say two and remember this Is not a chakra component this is just React router done and this is going to Be two forward slash the home page for The dashboard Okay so what I'm going to do is copy This And paste it down here two more times so We want a link as well to the create Page and the text is going to be new Task And then we want a link to the profile Page and the text is going to be profile I'm going to say this we need to embed This into the root layout over here Otherwise we're not going to see it so Let's put it where the span is instead So side R click on this to import it at The top Like so save it and preview and now we Can see we have these three links if I Click on those they're all going to work Awesome Now we can add a spacing prop too if I Close this one off To the list right here And that's going to space them out a Little bit so spacing we set that equal

To something so take a look at it now The very kind of up against each other If I say spacing is four Come over here we can see now we have a Bit more Breathing Room between them Okay Awesome so that's all working the next Thing I want to do though is ADD list Icons now if we want to use chakra's Different icons we have to install the Icons as a separate package so if you Search for Icon and come down here you Can see this is how we install the npm Install chakra UI icon so let me copy That for now but also I want to scroll Down and show you the different icons we Have so all these things right here and These are all components so we're going To use the names of these components in A minute to create these list icons okay So if you need them just search for Icon And click on this right here scroll down And they're all going to be right here Okay so the first thing we need to do is Open up a terminal and install the icons Package so let's do that grab a new Terminal over here and then I'm going to Paste in npm install chakra UI forward Slash icons press enter to install those And now we should be able to use them in Our project now in order to use icons There's several different components That we can use we can use an icon Component we can use icons on buttons we

Can use icons in lists by using a list Icon component we're going to be using That list item or List icon component Rather so the way we do this is come to Wherever you want to Output the icon I Want it to be before the text on the Left so just before dashboard and then We're going to use a list icon component Click on this to import it up here And the list icon has a prop which is as So like we've seen as on other Components to Output the particular Element that you want to put in the Dom In this case we're going to pass in the Name of whatever icon we want to use now I just showed you the names of all those Icons now I want to use the calendar Icon for this one so I'm going to click On this and that's going to import it we Have to import the icons if we want to Use them all right Now we also want it to be white so I Will say the color is equal to White Like so so you can colorize these icons As well and I'm going to copy that And I'll paste it in each one and we'll Just change the icon each time around so The second one is going to be an edit Icon Oops edit Icon click on that to import it at the Top otherwise it won't work and the Third one is going to be at sine Icon this one okay so they're all

Imported and we're using those three Icons before the text down here so let's Save this and see if it works over here And we don't see them it might be that We have to restart the server because we Installed that new package so let me Open this up I'm going to cancel out of This and then I'm going to run npm run Dev once again Hopefully now if we refresh yet we can See those icons are on the page awesome So there we go my friends dead simple to Create lists and have icons in those Lists as well

You May Also Like

Leave a Reply

Your email address will not be published. Required fields are marked *