Build a Website with React & DaisyUI - Tailwind's Top Component Library

Hello whats up guy today in this video I will show you how you can create dej ui8 library for tail win cs so dej ui8 library for tail css so I would like to tell you in a simple language and our video will be very short and simple that is if You remember in earlier times when we used to work on CSS we had a boo sp right boop pe kya hai guys let me tell you quickly let's go to boop If you go to Bust then here you have to see that use the Guy CDL link and then we have a templates or components, you say suppose I have to create a form now, okay if I go to form control then create the form for me. You get a blank, you have to copy it, paste it and this is what you see, it is ready, I do n't have to do anything, right in the same way, we have different components like audio, it is done, like this is edian, so I If I wanted this addition, what would I have done? I copied it. What I mean to say is that it was built on top of CSS and basically it has its own already complete pre-defined code which we can copy. Used to work by pasting, but in today's time, if you remember, like the whole world is crazy about this Talon CSS, everyone is using it, okay, so now when you have to use DG UI then Daisy. What did you say clearly? This is a component library whose lovin CSS means based on Talon CS. I mean, it is built on top of that. It means that if you have to use Deez UI, you need to have Talon CS installed in your application. Okay. There was boop for CSS, in the same way boop of Talon CSS is your Daisy UI, just understand that like anything in boo sp, you need button group, okay I want a button like this, copy paste is pasted here, P button, primary button, this button, that same in Daisy UI, you will get all the same things here on the P button, okay, I will tell you, but a little first, I like this website. I would like to introduce you a little and you will enjoy it, so see what is simple here, it is very clear on their website, guys, you can see it on the left side here, at this place on the left. side I am seeing this part, so what is it here, guys, this is automatic, we had to write so many classes with the help of tail wind sessions, oh my God, this is it, so many things, I had to write just to make a button, but Whereas now see what happens if we use Daisy UI and or this is it end, what was there a little while ago has become just empty button button primary guys same boo strap boop too So this was the button button primary secondary warning don't know what was what but same this is the same and I have already uploaded the complete video on B5 if you still use then you must check out ok ok a little bit And let's take your tell tale victory to the next level. Okay, now look at this particular part that you can see over here. Yes guys, this is how we created it. So guys, here you can see very clearly that I had to write so much code, I have to write so much code, oh my God, I will show it by zooming, then you will think, my God, what is this but the same if the same thing if I now get DG UI Plus Teln If you had to do it with the help of SAS, then here you can see that what was there a little while ago, like Click and Boom Guys, has become something like this and by the way, by default, its opacity is only so much that you can see a little. It might be looking a bit dark but it means you are seeing all the classes here. Class toggle class button button neutral. This means this is your DG UI. I hope it is also telling you look. In class name lovin, if you have to write the name of 107 classes. Had it been written in Lavin Plus Daisy UI, it would have been in 14 lines, you can see the same here, it is fine in this way and here also the size of ATML was the same, so it would have been this much here. There are a lot of things that you mean, look at it, you will enjoy it, I also found their website very awesome but I hope you got it, now understand that this is a problem but not a description of CSS, CSS is simple, it is fine and many things are useful. We could not customize it in such a proper way but here we can fully customize it, okay, so this is an advantage and how to use it, now you have to come, okay, so you can see something. It is like this and here also see the same button, if I go to this, guys, see, the doubt is cleared, if you want, guys, you can stop the video here and try it yourself, but don't worry, wait a little. Let me tell you how to use React, first install React, then Talon Sass, then you have to install it, then Atlast is this thing, till there first see one or two things, then you try it yourself. Do it, I will not take much time C button button If you have to add the property of the button, basically tell the class name, here you will have to write b1, then in that type also the same was given button's neutral primary secondary accent info success warning, then you understand. Go guys, this is just your color change, look at the rest, neutral, it will look like this, okay, given button here, neutral primary secondary accent, so here, no, there is just difference of color, yes. There is a difference in color, everything else is the same, look, it is even ghost, we have this link also and if you want the code of ATML, then you will get it. If you have a JS, basically in React, you will get its code. Empty copy paste drop down. If you want, then come here, open and close, see this way, let me know in the comment section, are you seeing this or not because they have taken the dark theme to some next level. I have gone extra dark, I guess I am feeling like this but whatever it looks, it is very awesome, this is not the meaning which is good isn't it, then we have a model if you remember what is model right so here you can see Yes, if I click on it, the model appears in this way, that is, you are seeing JS, it is just finished, how much trouble you must have had in creating the model, Teln is written in CSS in your React application, but now just simply copy and paste. And you 're done right Phir bhare padhe yaar arn look here also here also oky mil raha hai na we have over here ok look at this you can see here ok one at a time wala this is ok no problem Here you can see so many of them are filled, my only main thing was that I thought that now something new has to be done on Thapa Technical Channel, okay, so Jitan also knew the days, let me know in the comment. Section what do you like best and which is your best here component which you use is mostly ok so guys now without any delay let's start the video before that guys if you like the video my end very soon I am going to bring the official series of Node and Express, very up to date, please like the video and do not forget to subscribe the channel. A red colored bell icon will appear on the right side. Hit and click so that Don't miss the daily awesome videos and end one more thing guys here is the official page of Git Hup here is your repo basically end here if you go to discussions you will get many things whatever you want just check it out here You can discuss and just be friendly, nothing is superfluous, discuss only what the main person has said, okay but here you can see that he is the creator. And awesome, okay, here you will know whatever is there, okay guys, so see how to do it, so you can see that I am in my VS code audit, here I go, so take a look, there is something clear inside it. No, it's okay, so you can open one of your base code editors and I hope you have understood how to work in Daisy UI, it is a simple copy paste job, okay, so first of all let's create npm, so let's go with. Create Rate Latest When you write this, it is okay for you here, give any project, react ako Daisy itna likh daa hoon, let's go with react, let's go with JavaScript and we are done, okay, so CD, not CD, we need to go with npm install. ok while it's installing i would like to come here tail win ssss its ok here i come look guys give you now tail win latest version So no lovin a ko I have to install for wit ok come here so we have this particular video I am not video is their official page and here tell how to do through wit how to do this how to do that how to do that Okay, here you can see that it is clearly visible, so you have to copy it. Alright, sorry, we are already done with our React project, now you have to install this Tailwind CSS. Okay, although their latest version has come that is four and I have already uploaded the video on it, please check it out, but it is not stable yet, we do n't know when it will be, then we will see it, but as of now, it is not the same. Let's copy paste and make it clear. I go here and give it a second CD or perfect. Okay, I am inside the same. I guess yes, okay. Come here, you have to paste this. When it is pasted, then this one which There is a particular code, this also has to be copied so that your confit file gets created, okay, let me show you something like this, okay, right now there is no cuffing file here, but when you come here, one second went wrong, that's fine. Now it will be done, okay come here, if you have a confession file or we have this confession file, now in this confession file, we need to do this particular two lines, so basically copy all the lines. Yes, this is it, so you have to add this particular line, okay, once this is yours, then you have to come to the Ink CS file, this is the code Ink CS file, I mean DC, okay, copy it. ok ok ok my work is done hit the edge shoot oh sorry not this app.css ok ok so we are done now clear it once I run it and show you npm run And then Deb I have already told all this on react version 19 please check out ok my main today is to show you Daisy UI so I don't want to waste time on this what is once a second it is running on 5174 ok So we have a 5174 and you are seeing something like this which is fine nice okay so this is yours okay here we are done but Obviously here I have not given anything so that you can know whether it is working here or not but what I can do, I go here, class name and text, here we can give some color. I do one thing, whatever color it is, I do n't know which color it is, but I give this color, okay, it's working, my tail is working on Win Sese React, okay now, what do I have to do now, here on Days UI. So how to install days UI it's super easy days UI will pay how to use and so on. Otherwise you can use CDN and content delivery network and directly plugin but NPM is PNPM and I am already ready to install it. I have told about all this, it is the best but I know for many it can be a bit difficult so let's go with this particular npm install. Dependency days u@ latest Okay copy here let 's close it okay let's clear it come here let me paste so I hit enter so this is how we can install days in our react Application and one more thing, now all that is left is that if you use javascript like tv.con, then else you can go with a basically expo import export system, whatever this system is, we use the same. Basically we are talking about export import here, so first of all we have to import the Days UI from a, whatever we have installed Days UI, now this Days UI is inside the plugins. I have to add in this way CV We are done with our installation of DG UI also ok first with the help of beat react tell suss now we are done with Daisy UI, my work is done, now it is just copy paste work, I will not take much time from you, I just want to show you how you can work because everything is already ready these days, right, so I am here, for now something is happening here too. Because again I have not done copy paste, now I do one thing quickly, let's go let's go with button and primary button, let's go to one, we have one thing, let's copy all this. Tax So we have this button over here, click the button, click the button, I do n't know which button it is, but whatever, I put everything under it, let's find out what is happening, oh sorry, I have to run it. You will have to run NPM and then Deb, okay, we have written this now, run and boom, guys, you just installed Deez UI, they changed the color of your entire background, and you have to create so many buttons. How much time does it take to do it but with the help of Daisy UI like this is done ok button you have done the work lets let's you want such buttons so you do one thing pick up a secondary one ok pick up a secondary one I will remove it and paste it instead. Just you can see that I have completely changed our app.js file and I have already written some code which if you look carefully, it is nothing of yours. HTML and Talon are CSS and I am assuming that you know it, it is okay, it is not a big deal, I have kept it simple, I just want to show you that what you are seeing right now is something like this. When I use Dez UI, how does it look? If you see, if I go here, it will look kind of the same to you, but still you will know some things that yes, how with Dez UI. I can do one thing, okay, okay, let's do one thing, let's go with our Daisy UI, okay, I came here, okay, now let's do one thing, let's search here, brother, I need a bar, let's take a look at their What is the scene of the bar, so it looks something like this, you just scroll whatever you like, just go to JS one page, copy paste, okay, I am just seeing which one I like and somewhere I like it. is this This one is going to do one thing, this one is going to be pasted, so I'm going to j6, I'm copying and I'm going to go here, okay, so this particular nab, if I remove it and I keep this nab, copy paste. So let's see what happens, okay, how does it happen if I go here, okay see this, how is it feeling, guys, you just do n't do anything, copy paste is fine, although it is different here, but here I have kept this took copy paste I am doing it is fine and yes one more thing I want to tell you that whenever you will work with Daisy UI so what is this guys this is the component library of tail win suss only so it is not that everything is here. You just have to copy paste na na na what do you have to do that you have got this right so now it must be coming in your mind that I need a little gap from here, a little gap from there, I need a little gap in between these, I need the font. If you want to increase a little or if you want to decrease, then you have to use whatever property of Teln Sass you call it or call the class name, but at the moment I am not doing it because you and I want you to do it yourself, okay simple but Let me show you the butt one by one, okay, do n't like this place, everyone, if you look, there is a space on the left and right, but the butt is not here, so what can we do, here we have a particular nab, start, okay, you can see the base. remained Yes, one thing can I do, this is the particular code that is visible, here I will come, take a deep, on the class name, first of all, I place the container, okay, I have placed the container, I am removing it, now this Particular, let's do one thing on this, let's go to this, all right, whatever it is, it should have been there somewhere, but I have placed it here, okay, so if I do this, then guys, you can see something like this. visible from ok Maximum, whatever container we have written is the property of Stellan and not the property of DG UI. You just have to share this mix whenever you are working. Are these the properties of Days UI? Basically I say class name. Is this the property of Days UI? class name is or talon sass has its own class name so for the time being container your own guys talon's same and we have a max a auto okay a mx50 pe aa gaya but Now this is your task to figure out how I can bring it here but I showed you what I wanted. Okay, this is your hero section, so in the hero section, guys, most of the time we use carriages. No, there are many things, one is on the left, one is on the right, one is working, is there a hero section here, something like this, okay oh my God, we have a hero section, oh my God, look, this is it, right? Okay, this looks cool, I would have put it at 100, look guys, look at your hero section, there is Spiderman somewhere, Spiderman, okay, let's grab this one, copy it and now okay, you are seeing it, guys, I just I am doing the work of copy paste, this was the part, I delete it, I do one thing, here I go, D hero, okay D hero, this part is fine, right now I am commenting, here I paste it. I am giving it to you guys, now let's go here, look, this is awesome, no, I don't know, still see the whole thing, this is not complete, I agree, I agree, this is not complete, but my main motive today is that brother has come. Although it came a long time ago and I know many of you would have an idea about Set Sun and that too is very popular, I will write on that too but for now that's all, we don't go into it that much, it does such a good job. I don't feel like it As simple as it may seem, I keep it as simple as this particular part over here, I keep it in this way, okay guys, I am moving here, okay, you see, how was it before, how is it now? Okay, now it's about us, now let's see what is about us here, there is no about us, so there is nothing like that, okay, but yes, you can make it about us somewhere, this particular one in it You have put your photo, right, container h2, okay, I come here, I wait, look in this way and I guess somewhere, the minimum height of the screen is there, I would like to remove it, okay, now this is how your about us is. This is and I guess there was one thing here that I wanted to keep about us but if I paste it here then about us something like this now on this this which is minimal Whatever is the height screen, remove it, okay, it's double quote, okay, don't you understand? And yes, by the way, here you can do one more thing, if you want to give a margin, then margin a wa and let's go with 10. Okay, basically from top and bottom, we have a gap like this. See, it is okay from top and bottom. And I guess guys, giving a gap here will not be right. We do one thing, we give a gap inside it, something like this, it is perfect. See now there is a good gap right now you see guys I have not done anything yet I am just copy pasting and I am taking a little of your time I know I can understand but but I Just want to show the wonders of copy paste. Now after seeing our services, I am getting to know that this is a card, isn't it, it does not work, what is the card here, oh my god, we have a cards, just look, oh ho ho dami. she looks so amazing Cards, your mind, whatever card you want, I have to stick this for now because somewhere I am feeling good, so let's go with, copy, I am the only one, we have this particular service one, okay, I will stay with this only, now if I Here I go oh my God what is happening guys look at this now one thing I would like to do is this code is not working here for now if I paste it outside then what happens to it okay outside so I can find has been out So I got it, think for yourself how much hard work I had to put in even to make this one card, let's do one thing, don't put it here, let's do one thing, we have this our services and then Dave, okay and oh my God we have A grid over here let's do one thing, remove it, it is necessary to keep the grid, isn't it perfect? ​​Now let me do one thing, isn't it a paste, isn't it, it's done, isn't it so easy? My work is over and here guys, you change the color of whatever it is, now I will change the color too, no baba, no, you yourself change the color, end color one, oh friend, okay, I will show one, you don't have to do anything, and by the way. No color, no color somewhere, I guess they have given it, how can such dark and blind law appear? Card body is fine, text has become white or gray, can you see it or not, but you can see very clearly, over here, we don't have any. text Two we have text but that is not visible but here just I have written the text white I can see it okay so you see yourself na your na bar your hero section your about us your this and at the end we have this footer Okay so ya guys this is it that's it for this video today and I hope you like the atelist now a new new so I mean well it's old but not that old it's the latest days ui and set sun By doing maintenance like this, I did not have to fill the address but I thought that I should show you the athlete, there are so many here, there are collex, there are countdown ones, you see, there is this, there are ratings, there are file inputs, oh man, you will find many here. You will get a lot of things on it, you just have to check out what is right, there is a footer too, look here we have a footer also let's do one thing, let's take the footer also, which footer will be right, let's do one thing Whatever seems right to you, it seems a bit over complicated but I copy only this and this one which is the footer, I remove it and put it here, I am fine, I am doing something like this here. I come over here and at the end we have this footer also so how did you like this, isn't it very awesome so ya guys this is it today that's it for this video I just wanted to show that this is also and this learning You don't have to break any mountains for this, if you know CSS it means you will tell us CSS will come and if you know CSS it means it is a child's play for you then it is just look at the things written in it. If I tell you, he told about himself, how he started it, isn't it simplicity, sorry, I don't want to pronounce it, but whatever it is, I am the guy here. There will be a special part of their blocks, read it or we have a block over here, okay, so here you will get a lot of blocks, what is it, how is it, and he gave his opinion as to why I made Daisy and all those things, okay, so you You can read it but I hope you know what it is and how you can work with it. So guys, how did you like the video? Let me know in the comment section and please let me know by commenting. If you have used Daze Eye, what did you like best or if you prefer using something else instead of Daze Eye, then please do comment so that whoever reads the comment gets help, I also know what is going on brother, it is finally No but yes, I would like to do this work quickly and that is that here I will go to the theme, no, I am coming and pasting it, okay, I prefer Urbanist a lot, so I wrote Urbanist, now let's say. That I don't want urbanist here, so what will I do, which is the topmost part of mine and I know which is at the very top, but whatever it is, I don't care about that but I would like to write the font urbanist, so now guys, now you can see that our Look at this font, it looks so cute, is n't this website? Now you can see how awesome it is looking, isn't it? Look, this font has changed, it is here, is n't it? Guys, this is it, so guy itna. hee I wanted to show and if you want a complete in depth absolutely awesome website using DG UI DG UI DG UI whatever you want or DG UI DG UI then write like this if even that much why If you want to type, it's okay, but please share the video with your friends so that they know that these days people are also using it, okay and my react version. Do check it out on 19th and very soon you can see the note that I am going to bring. Resume vs. So guys please if you haven't subscribed yet then please do so. We are very close to 7 lakh subscribers and a red colored bell icon will appear on the right side. Hit it and click on it. Do n't miss such awesome videos daily so I will meet you in next video till then guys thank you so much take care