Shadcn Component Library Course for Beginners

Key Takeaways

Shad Cen is a unique collection of reusable react components designed for modern web development in this course you'll learn how to integrate beautifully designed accessible and customizable UI elements into your nextjs projects Matthew will teach you the process of copying and pasting these components directly into your codebase allowing for full customization and ownership hey guys what's up and welcome it's Matthew here the hybrid the designer and a developer the best of both world and the greatest this is a series on shed CN without wasting time let's just jump straight into it uh we are going to use um nextjs so we can just come here and click on nextjs obviously um you can create a nextjs app here I've already done that and then let's install shed CN UI so we we going to copy this command we are going to use npm okay and then let's go back here as you can see guys this is my nextjs application the only files that are here is this app okay you are not going to have this app and you are not going to have this dashboard because this um project um is just a tutorial from my um I have used it on my previous uh tutorial okay so let me just delete this um and then try to create a new one my apologies about that terminal new terminal okay so um you are going to have a template like this without this app and dashboard so as you can see guys we are inside this folder next dashboard okay um this app so let's um paste this um npx shed CN UI so as a beginner let me just take you through what's going to happen shed CN will create a folder here which is components in small letters this is where shed CN will put all of its components okay it is advisable to always install shed CN like at the beginning of your development process don't install shed CN later when you are halfway through the reason is you might have your own components folder here which is a small letter and shed CN will come Maybe shetan Might override all the files that you have there for instance if you have the same naming uh Convention as shed CN in that folder let's say in the folder components you've got a button and you are installing a shed CN button shed CN will go to your component folder it will overwrite the button that is there and it will delete it and it will install its own so it's very important to install like shed CN like from the the start okay so if I can be honest with you I didn't press enter here so maybe that happens um by mistake but that's not much of a problem okay let's just quickly answer this which sty do you want to use here I'm just going to click default use slate enter we'll do CSS variable enter and that is it okay as you can see guys sheden has created um this components folder and I think also this lip folder with uh utils more about this later so we are done installing shed CN so we are done with the installation and we are going to get into the first component which is the accordion the best way to go about shed CN is just to follow exactly what they are telling you here and then from then we are going to make some minor twixs in the UI should we feel like there's something that we don't like as I've just noticed that um there some things that I don't like about shed C and UI these things are not bad but it's a personal preference so what is an accordion an accordion it's a component like this it's more like a list um that has got a drop down list I can say okay as you can see this shows more about this item and this shows more about this item as you can see guys it has got some nice animation so we are going to create our own following this uh step by step this is how the code looks like Okay so let's see what they are advising us to do I already installed a shed CN so the first um stage or the first step is to install specifically the accordion how do you do that you just copy this I'm using npm I've already a have a nextjs application running and it has got some sort of a blank page so let's get back to it as you can see this is the next sh application okay and I've already installed shed CN and shed CN has installed these components folder so as you can see this folder is empty because we don't have any component so what we are going to do we are going to open another terminal okay I'm going to split the screen so this is another terminal I'm going to paste the command and click enter so suppose um this accordion component will appear here inside here okay what while it's busy installing let's just go back here and see what is the next step from shed CN okay we're done with this installation update the twiin config um I don't think this is necessary unless we are facing some issues we'll come back and implement this okay um let's check on the usage so how do you use it okay so you first import all of this okay and then from there you paste this and then you are done okay so what we are going to do we are going to create our own components okay meaning that we're not going to paste these in one file okay this is what I mean okay as you can see here we've got UI okay and we've got the accordion cool we're not going to disturb that we just going to go to our app and then create a folder let's name this folder shed CN okay just shed CN and then we are going to create our own um components okay so what we are going to do here um on shed CN we are going to create our own accordion so the naming I'm just going to type my accordion okay so that we can separate our own accordion from the shedan accordion so the first thing that we do we import all of these in fact let's just go back here and type RFC okay as you can see this is just a react functional component if you might want to know how I did that you can just search for this extension and install it okay so let's go up here and import all of these go back to shed CN and um let's copy this and paste it right here we can even remove this okay and paste this right here okay and then click save so what we are going to do here here we are going to come here okay first let's let's run this and see how it looks so on that blank page we can go and import my accordion where is my blank page here so we can uh just come here and um input my accordion okay as a self closing check save and then go back and see how it looks okay as you can see guys this is our accordion my apologies about that obviously for now it fills the entire area and this is not what we want okay um let's try to look at sh and how this one is okay as you can see this one it's a little bit smaller okay um so let's try to create something like this okay um so we're going to go back here not in this page we're going to go back to our accordion component we're going to minimize this for now and what we will do um let's create a container here okay so that this can be inside a container okay as you can see this is inside a container and we're going to style this container class name let's create a width of let's say a width of 200 pixel and let's see let's go back to as you can see guys now we have controlled this okay I'm happy with this okay let's just change uh the title okay let's just type here coded design okay and let's also change the description here let's type thank you for subscribing okay I mean this in a true sense of the word thank you for subscribing okay so now let's go back and check first um let me save go back and check as you can see guys thank you for subscribing I'm happy with this and then what if maybe we want to add um let's say one more okay let's see so the accordion has got um it's like a compound components okay meaning that we've got the um the parent and we've got the children and we've got some other children nice design okay so what we want to do let's look at the children okay at the components okay at the inner components let's say we've got an accordion item okay this is an accordion item so this is how um sheden has been designed okay it has got some meaningful component so as you can see here okay we can just copy this whole item okay and paste it here because it's an item we don't want something that is inside a trigger or something we want the whole item okay so you can um give some values to your item as you can see here this is item one let's just say this is item two okay so I've got another UI Channel where I teach figma which is coded UI okay like this if you might want to learn figma then you can um visit that channel so let's just Ty here Len figma from Matthew okay and then let's click save let's go back here as you can see guys okay this is what we have exactly um what we want to do we are done with the accordion now we want to check the alert okay so this is the alert to be honest when I first click here I was like what is this and was hoping that maybe when I'm clicking it's going to alert something or show something or something will pop I think I have mistaken this with the alert dialogue this one okay so this one doesn't do that okay so as you can see it's just a plain um box outline with a message okay it looks like here you can also have some variation okay or more or less like a variant you can have like um a red one okay so since this this is a very simple uh component I have decided to some sort of give you more knowledge about how can it be used and I'm also going to throw a little bit of nextjs because if you can implement this as it is we will just install copy and paste code and then that is it okay so let's get into it okay let's uh first copy this and add um the alert okay as you can see here we we've got um our nextjs application so we are going to add the allet okay we're going to add the alert then it's supposed to be added here okay as you can see guys here it is okay and then what we are going to do we are going to create our own alert um where is our folder our folder shed in as you can see the first one is my accordion so let's create my aler as a file okay my alert. TSX as usual we are going to use RFC just to create a normal react functional component we're going to go back to shed CN and input everything that we are supposed to import so that we can use this alert as you can see guys and then what we're going to do we are going to copy this code as it is um maybe we can just uh copy this one the one one with uh a variant destructive as you can see let's just copy this one okay let's see okay maybe we can even copy the one that we've been given and change the what can I say and change the variant for instance here let's see do we have a variant maybe we'll add a variant here and it's it's going to be descriptive okay so my apologies about that let's go back here this is a let let's copy this as they are telling us to do okay terminal is not defined let's see what mistake have I done okay alert alert alert and then uh terminal let's see do we have to install any before we create this let's see okay terminal okay um what is this component let's go back here so the first approach to solve this problem is to press control and press space to see okay as you can see this is a an icon okay so let's just click here so that we can import it as you can see guys now everything works well we can click save here so what we are going to do we want to display this on our main page okay so let's go and display this my uh allet okay and then um it's a self closing tag let's click save and go back and let's check here okay suppose it shows up here okay um as you can see it's refreshing and then here is the alet okay as you can see guys obviously um the alet is too big okay like it's um spreading across the screen what we can do okay what we can do we can uh surround the aler with um something like this okay as you can see guys um maybe we can make our lives easier and don't uh surround these in all of these div okay in all of these components what we can do we can surround these like all of them okay I hope you do get what we are doing here we are trying to control all of these okay so meaning that if we trick place if we click save as you can see now we have controlled the alert okay including the um including the accordion okay I'm happy with this so what we need to do now um let's go let's say we want to change the icon okay let's go to Lucid the react okay lucd the icon um let's search for warning my apologies about that let's search for warning and then we're going to copy this and then we're going to change it here okay we're going to change this let's see okay as you can see so let's just copy this and replace this terminal and delete this okay and then let's import it so what I'm going to do I'm going to press control and space then I input this so the other thing that I'm going to do I'm just going to okay guys I'm back my apologies about that there was a sudden disturbance so I had to quickly pause the video so I hope I am going to continue from where I have left so let's just click save so that I can see where we are in terms of the project okay we have managed to change the icon and I was about to make this content small okay that's what I was about to to before the dispense okay so as you can see guys that's about it so let's just come here on the alert and let's type A variant let's see suppose here I get an intelligence okay something like this so that it can show us um the different types of options I think this is because of typescript okay so as you can see guys um this is um a variant and I let okay so as I've told you that this is more like a simple copy and paste kind of a code so as a bonus I'm just going to teach you something on nextjs on maybe how this can be used in most platform or in most applications like um I think even Tik Tok YouTube and I haven't seen it on WhatsApp okay so when you open the application let's just make an example with um with what okay let's just go here okay when you open the application okay um um the company itself wants to send some messages to you okay so usually when you open your dashboard there will be a message here okay more like an alert like this one guys okay more like something like this maybe it's telling you that your account is not um up to dat or maybe they are telling you that we have changed our terms and condition so that is their own way of communicating directly to you depending on certain circumstances so this is what I'm going to show you as an extra bonus so what we are going to do based on the parameters on the URL parameters let's say we were um what can we say we were a banking uh company so it's important that your account um money the money that you have it needs not to be zero okay so if it's zero that means you don't have money on your account we need to show some sort of an alert to tell you that um please top up your your account okay your your your account balance is too low but we are going to use um search parameters or yes query parameters here okay the parameters from this URL so this just a added nextjs bonus okay so um this is how it works let's say we are going to have um a parameter which is uh balance okay something like this uh balance equal to zero if balance is equal to zero when you um visit this website with balance equal to Zer it needs to show you this warning but if your balance it's more than that or there is no query parameter at all then it's not going to show this I hope you do get what I'm trying to say and I also hope it's helping you to learn how to use things okay so what we are going to do now um let's here um where we are let's come here on this page um must we do that yes let's just do that on the main page okay first of all with nextjs let's make this um a client component not a server side component so how are you going to do that you just type here use client and click save and then um here let's make sure that we stick to uh react best practices our components must start with capital letters and I'm happy with that and then with next J yes we are going to use um we are going to use a hook which is um I think it's used search parameters okay so let's try that let's say const um param param is equal to use search parameters okay or search params okay this is a hook okay and then from then I'm not a big fan of memorizing code okay I make use of typescript and also the program itself to help me and understand what's going on in a particular function or hook so what I'm going to do here I'm just going to type this params as it is this one okay I'm just going to type dot to see what do I get there what are the option okay so let's check here get okay and then let's get um balance because the query is going to be balance and then from there let's just alert this okay let's just alert this balance okay let's just alert this balance okay so let's go back here okay as you can see guys we don't have balance so this is alerting null okay as you can see it's alerting n now let's just click onto here now we've got balance of five so let's see as you can see guys this is giving us the balance okay as you can see so we are winning we are managing to get this um query parameter okay so what we're going to do based on this query parameter we need to make some decision okay so let's just type here con balance equal to Let's copy this as it is okay let's remove this alert and then let's put that five inside here okay and then um let's come here to the Aller okay we are going to render the aler conditionally so we need to open a block of code and then move this alert to here okay and then what we are going to do um let's ask is this balance true we are going to use a tenary operator so we are asking is it true if it's true true meaning that it's not null okay yeah let's say if it's not null then let's um alert this if it's null um let's click this if it's n let's just alert an empty string as you can see guys okay so what this going this code is going to do it's going to check uh do we have the balance as you can see for now we have it so we are displaying this alert but if we don't have it here okay this uh disappears okay so obviously even though I didn't check if your balance is zero or it's not zero I hope you do get what we are trying to do here in case you really really want to check if the balance is zero you can just come here and change your condition for instance if balance it's um let's say balance is equal to zero okay my apologies about that if balance cannot balance okay sorry okay this is a we need to do this why this com Reon because the type of string and okay [Music] cool okay obviously for now that is a string okay so we are asking is this balance zero which is equal to zero as a string okay so let's just quickly check here guys before we close um this okay as you can see guys it's not zero okay but once you've got a balance of zero then we can show the message here then let's just customize our message so that it can make sense so let's just go to aler and um okay this is a bank balance okay let's just type bank balance okay and then our message will be bank balance okay um what can I say cannot be zero okay cannot be zero and that's about it and then let's check here okay if your bank balance is zero it's going to tell us bank balance cannot be zero if you've got money in your own account then that is not much of a problem so um let's just click this okay as you can see now bank balance is not zero so we don't show this um message now we are on the alert dialogue okay let's just check what an alect dialogue is okay as you can see guys this is an elect dialogue very simple right you just uh click and something uh pop up obviously this is a simple tutorial we can just follow this copy and paste and then we are done and it will show up but I don't think that will give you U more value on um shed CN itself and also how to use it so here at coded design we are going to take it a step further so how are we going to do that what we are going to do we are going to design this component in such a way that it becomes reusable and some sort of so that we can it can contribute on creating a clean and a scalable code for instance instead of this becoming a modal dialogue that you can use like this um or um an alert that you can use like this what we are going to do we are going to make this name Dynamic this content Dynamic um these buttons for now we are going to leave them as they are have so what does that mean this means that whenever you want to use this okay you can just use the same code but just change these props and change this content okay so without wasting time let's just jump straight into it what's the next step from here we just need to follow exactly what shed CN is telling us okay we just copy this on mpm and then we go to our terminal and then we paste this I don't know why it's like this but let's PR enter and see and then this is supposed to appear on our list of Shar CN UI components okay Shar cnii components somewhere here okay it's going to be an alert dialog box and then in the meantime um let's just copy whatever that we have to copy so as you can see guys the next step is to copy this so we have to create our own um what can I say our own alert dialog okay so this is our folder for our own component so we just type my okay my alet dialogue okay as you can see guys do TSX and then we are going to use um the the snippet RFC okay and then we are going to import everything that shed CN is asking us to input as you can see guys we can just click save and then what we are going to do we are going to go back and we're going to copy this code as it is as you can see this is a bit of a heavy code okay and then what we want to do we want to copy this and let's just paste it maybe here as it is okay okay as you can see guys cool beans everything work so if we were just like um beginners we were going to take this as it is change here and create whatever that we want what if maybe you want to create another comp component similar to this one we were going to create a new component copy and paste all of this code then change this this is what we are going to change and do it differently but before that let's just import this um this components in our main page and see how it looks like okay um as you can see don't mind about this I'm just rendering this conditionally okay so let's just go here import this as a self using tag and then we need to I'm going to press control on Windows and space and then I can import this and then click save let's go back and check what's there guys okay as you can see here is open when we click here this pops up okay as you can see what we can do from here now we can go back to my alert dialogue and then we can type here coded design okay and then when you click here okay let's say are you okay are you sure you want to subscribe okay obviously I'm hoping that your answer to this question is 100% or absolutely okay so are you sure you want to subscribe okay let's just go back and see how it looks like the now coded design is an alert and then are you sure you want to subscribe okay click okay and it disappears okay so if we want we can just uh type here I have already subscribed okay okay hoping that you already subscribed okay so let's check here as you can see guys so if we want we might stick to this whenever we want to create a new one we can always copy this code but this is not how we want to do things we need to um make this some sort of a reusable component so what we can do we can receive some props here remember we're using typescript so we can just say this is a title uh we can just make small letters for Simplicity okay we're going to receive a title and a Content okay now we need to type these okay so in terms of the title it's going to be a string it's guaranteed but in terms of the content guys let's not make it a string because as much as here it looks like this is a string we are going to have um sorry um here okay as much as it looks like this content okay it's going to always be a string okay it might be something else okay you might want to put a form here or a button okay I'm going to show you that later okay so what we are going to do instead of putting a string here okay we are going to put this Aller okay so I'm going to show you that flexibility so let's make this um uh content let's make this content a react dot react node okay so that it can accommodate a lot of things okay as you can see now if we want we can pass a string here if we want also we can pass another react component so let's just quickly test this guys let's take title and change this coded design and open some block of code and then we put the title here and then let's copy the content paste the content here and then obviously typescript is telling us that we didn't pass the props here now um the props here in terms of title okay is going to be coded UI okay if you might be asking yourself what is coded UI coded UI is my other design uh Channel where I teach people how to use figma I will suggest that you try the the channel because figma is a very important skill most especially if you are a beginner you are going to work in a company that wants to save money so it maybe they don't have funds for paying a designer and a developer if you come and say Matthew has taught me both of the skill I am able to work on figma and become a developer as well maybe you might be preferable and you might learn a job so in terms of the content for now let's type um let's type Matthew okay Matthew and then let's go back and see now as you can see guys this is dynamic this is uh this is Matthew and I have already subscribed is is this what I wrote there let's just double check guys I think I'm missing something on my alert alert is this alert a lot of things are going wrong here let's first fix that okay my alert dialogue okay cool not my alert my alert dialogue okay let's change this first okay number two let's see I've got a title and I have put a title on trigger this is a problem okay let's just go back here okay the trigger must be coded design okay I think the title is supposed to appear my mistake guys okay the title is supposed to be here and the content is supposed to be here on I have already subscribed okay okay cool now let's see I received this I received this let's check here what's going on what is this guy complaining about my alert is not def finded obviously let's import it okay let's see check here um as you can see here we are not importing the aler dialog box let's check here guys okay let's I'll import it again is not Define okay cool obviously that's my mistake let's go back to my alert dialog box my apologies about this guys okay as you can see this is still not what we are looking for now it's my alert okay let's export it as my alert okay and then let's go back here and check press control and press space now we've got my allet dialog box let's go back and check let's click here as you can see now we've got coded UI and we've got Matthew this is interesting okay so meaning that now let's say now we want another component okay that will do the same thing but for coded design okay as you can see now the code is starting to be reusable okay just like that now we've got another trigger which has got coded with the wrong spelling coded design and reusable okay as you can see guys so that means we are reusing the code okay now as you can see this is called Design This is coded UI but the trigger is the same okay meaning that we also need to put a trigger okay we need to supply a trigger okay so let's see what we can do where is our main page that means here we need to supply a trigger as well cool let's just go back here and and type trigger okay let's just copy this content copy and paste because trigger is going to be the same type as that one okay let's just change this to trigger okay as you can see now we can take this trigger and substitute it with this one okay that means here we must put a trigger okay now um let's say the trigger will be the first one it's coded UI and the second one it's Cod a design or we can save where is that design the wrong spelling all right as you can see guys we've got um Cod UI and we've got coded design okay coded design as you can see now um now that we've got this flexibility check here guys so we cannot only pass strings here these strings we can also pass another components this our flexible this is so let's make an experiment on that on the other one let's pass the accordion uncoded um coded what on coded UI let's pass a trigger no not the content okay the content of coded UI must be an codon okay no no no this is title my apologies okay the content of coded UI must be an accordion and the content of coded design must be an Aller okay must be an alert let's come back here let's click save and let's go back and see okay as you can see guys we just have an accordion so I think this is the best way in which you can think about shed CN and also making like the most out of our shed CN we are done with an aler dialog box now we are getting into the aspect ratio let me be honest guys I don't have more information about practicality of applying this okay but I am just thinking if you are creating a a video application let's say um since um the aspect ratio is more like popular in videos 16x9 and 1920 and all those things you might use it let's say there's a certain video um that you need to display but it must have a certain aspect ratio maybe even in pictures okay but since this is going to be a very simple tutorial meaning that we just going to copy and paste what shed Cen is telling us I am going to um fix something in nextjs an error that we are going to okay so instead of collecting everything fixing the error without even showing you how do you go about it I'm just going to fix the error when I get there hoping that I want as an added bonus or added value to this simple tutorial if I can just keep it like this it's just going to be simple only copy and paste so without wasting time let's just get into it my apologies about that so I'm just going to copy this okay as an npm I've got already a react um sorry nexts application going on or running so I'm just going to press enter to install this component and then from then as you can see this is our project okay we've got an we've got um an alert and we've got an alert dialog box it's highly reusable if you have not watched it please check the playlist to watch it now we are creating um the aspect ratio okay I hope it's done installing the aspect ratio so let's just go to shed CN and check how to implement it as you can see guys um we're importing image from next this will give us some issues and I will show you how to fix them okay so let's copy this and then what we're going to do in our um library of component we are adding another one which is my aspect okay my aspect ratio. TSX okay and then we're going to type the reactor snippet RFC and then we are going to import the aspect ratio and then what we are going to do we are going to use use it let's just click here let's just copy all of this and just paste it here okay just like that we've got um the as ratio working okay and then what we want to do we want to go and look for an image on Google okay um I meant Trevor Noah but uh I can even take this guy's pict it's not a trans smes I don't really it doesn't really have to be Trevor Noah okay let's just copy this image uh copy the URL image address this is what I want to copy so I'm going to paste this here okay as you can see guys okay so I'm just thinking um the other possibility that we might use an aspect ratio I'm not sure but let's just quickly check on dribble guys okay um the reason why I'm doing this I like to to be pragmatic okay to test the validity of ideas by their practical use okay I don't like like to learn something that I don't really know how to use it so that's why I'm doing this guys okay so let's say we are having um images that needs to be like this let's look at um when we are on the responsiveness okay let's let's see what happens on these in terms of responsiveness okay maybe we might want these to keep a certain aspect ratio this image I'm not sure okay I'm thinking that that image uh ratio component can also help us on um responsive design okay but please guys do your own research so that you can be more knowledgeable okay okay let's continue guys um we've got an aspect ratio let's just make sure that we have saved everything okay and also we need to take this aspect ratio let me just remove this this aspect ratio to our main page okay so that it can be displayed there okay so let's put it here as a self-closing tag and I am going to click here and I'm going to press control space so that we can import it okay let's see if we are not going to have an error from next of course we have an error from next it doesn't give us a link to go to okay usually it does that as and what okay let's see it's missing the required oh okay my apologies about that guys it looks like I'm ahead of myself my apologies about that okay this is not the error that I'm talking about this is an error but not the one that I'm talking about okay this is asking us for a width okay so let's just go to our image um my apologies about that okay um okay let's go here okay let's go here so next sh is once a width here let's make it 450 my apologies about that let's just make it 450 um with this is not Tailwind so this has to be the width okay as you can see guys let's make this it this 450 okay so this was the first error that we had okay let's see now what is it saying it's missing the height okay cool um I'm not sure if if we put the width and height here um isn't that nullifying the existence of this aspect ratio but for now let's just do what uh next sh is want we will see on the physical appearance of the image if there is something that we are missing okay okay the height will be on 450 let's make it 200 okay let's see okay inv VAR SRC prop um blah blah blah okay this is the era that I was talking about guys okay the one where we need uh the host name Okay cool so you can just copy this and uh paste on Google gole I think uh nextjs will be one of the options as a solution okay let's see I think suppose there's um a nextjs link here but if you don't have it don't mind guys I think nexts they also give us is the link okay they give us a link to the solution so you will just go here let's see possible ways to fix this okay on your nextjs config.js maybe it might also do TX this is what we have to do okay on the export module we need to put this images remote uh patterns and then we need to put this as it is instead here we just need to put our uh domain okay so before we do that let's go to the next JS config file okay where is it guys you can also help me I don't see it here is it next js. config okay it's a minified version we don't have the other one cool okay let's see and then here we've got our next config and we've got these craes so let's see does this code looks like this one okay here we've got our module. export and there we don't have okay let's check as you can see okay here we don't have so what we are going to do let's just apply our own mind okay let's just um what can we do what can we do what can we do um first let's just copy this as it is okay let's just copy this as it is next config okay let's try this let's see if it's not going to complain okay it's not complaining I'm happy with that okay I was about to put it inside this config okay but let's leave it like that it looks like it's going to work and then what we want to do we want to know where are we getting the image okay expect ratio what's the domain of that image okay um I think that error can highlight to us the domain specifically okay let's see invalid Sr prop blah blah blah blah blah okay uhuh next image host name okay here is the host name okay that it doesn't recognize so we can just copy this as it is to make our life easier okay and then we need to tell nextjs that on the config okay we are having this domain or this host name okay I don't think we need the path name okay I don't think we need the port okay we don't need those ones so we are telling njs that we are going to fetch the images from this domain if you might want to prefetch them and um cat them and uh crop and um um what can I say compress them so that they can be lightweight for better user experience you can go on and do that so after we are done with this let's just check here and see is next sh still complaining okay and remember guys um you must fall in love with errors okay when you see errors don't uh be afraid don't what can I say don't be discouraged okay it looks like our ser is not running I don't know why let me just type clear here and then npm run Dev okay maybe the server has stopped after noticing that we have changed the config file okay let's see okay let's see if um looks like we're having an error here guys okay the server didn't just stop remember I was like I think we can put this inside this config instead okay I think that's an error that's the reason why we are having this let's check again guys okay npm run let's be observant this time as you can see there's an error okay so let's do this so here this is our own what can I say a fidling okay I like to feedle a lot um token expected uh module export dot okay so let's just do this guys okay uh let's just do this let's just do this this is the config okay so if you might ask me Matthew do you know what you are doing to be honest I'm not sure I don't know what I'm doing so Matthew why are you doing this I like to test things guys okay I like to test things okay and see how they go okay so obviously if we are not winning here we are just going to go to next documentation and look um in details and copy and paste code exactly as it is okay okay so let's wait for it to finish and see as you can see guys it's um it's reloading okay and that's about it guys there's nothing much uh to this uh tutorial it's not that uh heavy okay it's just a it's just a what what can I say an aspect ratio and that's it so let's go back here to see okay as you can see guys it looks like everything is working our own fit link has worked but remember I said if we are able to give this a width and height okay isn't that nullifying the aspect ratio for instance okay an aspect ratio it's some sort of a certain width and height let me just show you guys okay okay and aspect ratio okay so I'm going to search for images images so an aspect ratio is more like a certain withth if the aspect ratio is 16 by9 it's supposed to almost look like this okay as you can see guys okay so now here okay let's see um do I want to be so here we've got an aspect ratio um let's see let's see we've got an aspect ratio of 16 by 9 as mentioned here but it looks like this shape as you can see guys at least if it was looking like this I was going to be convinced that the aspect ratio has worked okay so what might have happened here okay because of we have put the width and height here okay okay I think it has um nullified this okay so meaning that I'm trying to say these properties they are mutually exclusive okay they cannot exist both of them at the same time if you put your own width and height you are trying to say you don't need the aspect ratio if you put the aspect ratio suppose you don't need the width and height so let's also dive deep into our own feedlink way okay why am i showing showing you the fidling approach to things number one I'm showing you I'm not a guru I'm just exactly like you number two trust your own mind okay at least don't just jump to Google just on the C go okay so I'm going to delete this okay and then save it let's see is it giving us any errors or what looks like uh there's some sort of an error here but let's go back here and see it's telling us that this is missing the and height okay H so is shed CN um what can I say um I don't want to say is it fooling us okay but what's going on here why this is not working okay let's go back and see um do we have all everything that this ones all rounded object cover okay so there was a a property of an image that doesn't really need the width and height okay I forgot about it guys I'm going to be honest with you but I will find it I will find a way to find it okay um I think it was fil okay but now I don't know what I must I put inside fil I hope this will give me some possibilities um okay oh okay it's possible that you can cannot assign a property here and it works okay so what field does when you want your image to be controlled by the parent container okay you are you are you are saying that um this image needs not to Define its width and height okay exactly as it did here it must depend on its container for the width and height so let's save guys and see can't this help to solve the problem 100% we have just solved um what shed cn's errors or I'm not sure if this is a bu or what I'm not sure okay but for us it didn't work and we have to do something else in order for it to work which is we have to put this F here okay so as you can see guys you must always apply your own mindfest and um what can I say um be a a fan of fit link okay fit link helps a lot okay so as you can see guys now this is the aspect ratio as we want so let's go to the Internet let's try to balance this knowledge with uh shed CN okay so let's see if we can have a 3x2 aspect ratio are we going to get um a shape like this or let's say if we have one by one are we going going to get a square Let's test that okay here we are just using our own knowledge to see if is this working let's go back here as you can see guys okay it's working okay it's working so this aspect ratio is working then who controls the width okay I think now this width is starting to make sense let's make this with 200 okay let's save and see as you can see guys now this width is 200 okay and now we are doing the Avatar an avatar is just um a circle with an image which is usually it's a user profile and that's about it so let's quickly uh install the Avatar using npm I already got um a nextjs application here so I'm just going to install this and then as it's installing it will show up on shed CN component UI here okay after showing up here we are going to create as you can see here is it we are going to create our own avatar here on this folder okay components um I apologies about that where is my shed CN okay this one okay these are my own shed CN um components okay so let's just type here my avat okay do TSX all right and then press enter okay and then let's go back to the Avatar and see okay so after that we just need to import these okay so here we're going to press RFC okay react functional component and inside here we can my apologies about that this is totally wrong okay we need to First input everything here and go back and copy this code here and then from there paste it here as you can see guys this is our Avatar and then we need to take this component and display it on our main page as you can see this is the aspect ratio so we are going to display this and then um on Windows I'm just going to press control on my keyboard and press space so that I can import the Avatar and then from there let's go to um to our main page and see as you can see guys okay this is the the Avatar okay this is the Avatar and what we can do we can go to the aspect ratio and just use the same uh image um the reason why we are going to use this image is simply because the URL for that image okay has already been um added uh to let's say to sheds H sorry to nextjs my apologies guys okay this URL has already been added to nextjs so nextjs is not going to ask us a lot of things instead of taking an image from a different website so instead of this let's put our own image okay as you can see this is our own image okay I want you to observe what's going on here let's say empty okay this is more like a fall back um maybe in case this image is still loading or maybe it's null I think then it will use this and that's about it guys um let's go back here and test as you can see guys okay let's put enter as you can see it shows empty and then it shows this okay um let's say um as an added bonus you might want this to be a little bit bigger the first thing that we need to do let's check this Avatar does it have a prop of size okay does it have a prop of size it looks like there's no prop of size so let's see um do we have any class name that we can put here it looks like we have so let's just check the width to be 20 and the height to be 20 let's see what will happen and then I'm just trying to show you how you can change the width and height okay as you can see guys you can also uh change the width and height guys I'm not going to make this tutorial longer unnecessarily that's about it we are done with the avat it was a very nice short and sweet one I think also the badge is going to be a very quick nice and straight to the point okay so let me just give you a context first because some components you might see them but you don't really have an idea as to where can you use it okay my apologies about that so let me just open a new tab here and type shed CN recently I'm creating a real life application um for a client and I am making use of 10stack uh table obviously from sheds not necessarily from sheds and this is wrong 10stack table is from 10stack query but shed CN has got their own version of it okay it uses 10 stack table behind the scene but obviously you know sheden has got some beautiful components and a beautiful architecture so as I'm using the table okay I realize that I need a b my apologies about this let's go to example I'm looking for a 10 stack table here where can I get it uh not here task I think it's here okay so as I'm creating this table I'm realizing that um in terms of let's say statuses okay I need to have some badges here to quickly indicate maybe if this is inactive okay so a badge is nothing much like just like um let's say rounded button okay that you don't really have to click but it just shows you in terms of colors um uh this the status okay so I needed a quick way of showing different statuses and I have used a shed CN badge to do that so I was just giving you an idea of when can you use a badge because it looks so simple and you might miss the essence of it okay so maybe it might be something like this with a different color and it's useful guys okay my apologies about that so there are use case scenarios so let's get back to the topic at hand as you can see here's an example of a badge let's see what other examples do they have um as you can see this is a different one this is an outline one and this is a destructive one okay so let's just jump straight into it so what we are going to do we are going to install it first uh copy this and go to shed CN okay um let's see what do I want to do okay here here the code is running and here the code is not running so let me install just paste that guys nothing much there okay and then the the badge is going to install so first the badge is going to appear under shed CN UI components okay somewhere here first okay as you can see here it is so we are not going to use it from there what we usually do we are creating our own UI Library as shed and always advises okay my apologies about that so what we're going to do we're going to go here um let's just check something my apologies about that I'm done copying the padge okay okay let's first create our own component okay let's first create our own component let's see okay let's say this is my okay this is my badge. ts X okay and that's about it and then what I want to copy here I want to copy this okay I don't know what's going on with my Thro guys my apologies about that RFC okay just to create a component and I need to import the badge okay as you can see so how to use it simple guys just like this okay copy and then from there let me remove everything here and paste okay and that's it and then what else do I want to do I want to use my badge okay I want to use my bad on this page okay so as you can see okay I can use my batch here on my windows I'm just going to press control and press space so that I can import my badge and then from then I will save come back here let's see as you can see guys here is my badge okay so let's see what can we do with the pedge um let's go back where let's go back to the actual PGE um my about that okay variant outline let's see what other option okay equal and then there is a destructive let's see how destructive looks like as you can see guys okay a nice patch there which is a destructive one um um I think um that's all okay let's say this is um let's say inactive let's say this is an inactive component or a row or a what can I say a user and active inactive user okay so as you can see guys so as an added bonus I think what we can do here let's just make this component reusable okay my apologies about that so how can we make this component reusable we just need to pass props okay let me save here and save here so go back to my badge so what we need to do here we need to pass props okay um apologies about that okay so we need to pass props let's say we've got title okay and what else um then we're going to pass title and this is going to be the title okay can we have a class here yes we can have a class name here okay so what we can do as well we can have a class name here okay for customizing the the badge um what about this variant okay why don't I take this variant what about this variant okay let's see what we can do okay let's also accept a variant okay let's also accept a variant and let's just copy these as they are okay because we want to what can I say to type those okay using typescript the title is going to be a string okay the title is going to be a string we are done with it the class name is going to be a string the class name is