Build Apps Faster with daisyUI Tailwind Components

now there's a lot of great Tailwind component libraries out there so why Daisy something that I personally like is that it's pure CSS it's framework agnostic that means you don't need JavaScript coming from Daisy in order for these components to work so for all these components like navbar I can get a really nice simple interface by being able to come over here find the component I want copying the code and pasting it in my app I can also customize these components exactly how I want because it's Tailwind I can just simply append Tailwind classes but not using JavaScript also has some trade-offs well this doesn't really matter for something like a card component that's just going to be to mail in CSS anyways other UI like an accordion for instance requires some kind of interactivity that usually uses JavaScript to achieve that now in my opinion this can be also a good or bad thing where being able to provide some basic functionality like the accordion is a really good example of this but other things like a carousel you can kind of start to see where that falls short and being able to provide an experience that someone might expect when trying to use components like this but later in this video we'll see what options we have when we want some of that more enhanced interactivity but we're going to start off inside of a fresh new nextjs application where I already have Tailwind installed and I'm going to go ahead and just get rid of everything inside of the project to start I'm even going to get rid of the default class names in there and just add test for now as well as just remove some starting CSS from the global file and we can see we have our simple page that just says test now heading to the daisy UI installation page we can see that we still need to actually install Daisy because what's going to happen is it's a plugin to Tailwind so through that Tailwind processing it's going to inject those styles that we can easily use throughout the site so I'm going to copy that dependency I'm going to paste it in and install I'm going to copy this requir statement and inside of my Tailwind config file I'm going to paste it in under plugins where now we're ready to go so let's start off with a simple thing let's just add a button if we start to look at the button page we can see that we have a lot of options for how we can actually style this and actually add it to the page now I personally don't like the outline version of buttons I just like a regular old button so I'm going to go ahead and just copy the simple one except maybe with the brand colors so let's go into the jsx and let's grab our primary and I'm going to replace test with that button and we can see once we reload the page we now have that primary button but let's take this a step further how about something like I like this hero component under the layout section so let's select hero and I'm going to scroll down and let's find I like this big one with all the different imagery in the background so I'm going to copy this jsx and I'm going to copy this entire block I'm just going to go ahead and replace that button with my hero and as soon as we reload the page we can see we now have this beautiful hero and we didn't really have to do much we were just simply copying that over now of course if I wanted to update this background image to actually my image not the daisy UI image I can replace that with whatever your that I want and I now have my beautiful space themed hero now let's think more about this layout usually when we have websites or web apps we have some kind of Navar and we have some kind of footer now as I showed earlier Daisy also provides a lot of options for different Navar Styles where I want to build an e-commerce site so how about I grab this Navar for e-commerce with a shopping cart I'm just going to Simply copy that snippet I'm going to go ahead and paste it above that hero and we can see that I immediately get this nice looking napar now hold up you might be thinking why would I want to paste my Navar inside of my homepage and you wouldn't so let's first get rid of that and instead open up our layout which is going to be able to have a better way to control Global Styles or Global layout features like a navbar so what I'm going to do is actually post that above any of the children which would actually be the content of the page so I'm going to paste in my Navar where once we refresh the page we can see that we still have this Navar but if I wanted to add a new page to my site such as if I create a new route for different products we can see that when I go to that page I still have that Navar in place so similarly if I want to add a footer and I think I like this design the best so I'm going to go ahead and copy that jsx and this time paste it below my children we can see not only do I get that footer on my homepage I get it on any route that uses that layout and just as a quick tip if I want to fix this issue where my footer is hugging my actual content I can set up a grid layout with this using Auto 1fr auto for my rows which will allow me to dynamically resize the inside of this so no matter what page I'm on whether it's on this route or the homepage it'll always work as expected so how about this product page though what if I want to start to show what a product actually looks like and the nice thing is a lot of these components can be repurposed for really whatever you want since we we have the ability to actually customize anything where probably makes sense to have an image with my the title of the product some information and a buy now button so I think this one works really well so I'm going to go ahead and copy the jsx in my product page paste that in right now I'm going to need to replace my image so I'm going to go ahead and replace this with my own so now when I look at the page we can see that I have my nice hero where I have the picture of what this product's going to be and I have some information but let's tidy this up a little bit but there's a few things here that I want to tweak so starting off I want a little bit more space between these elements so again because we're just simply using Tailwind I can come up to the wrapping parent which is a flex container and I can simply add gap of let's say 12 and we can see that it has some nice breathing room now but I also don't want this section to take up the entire width of the page so have I also add a Max W of let's say 5xl I want to also M add a MX Auto so that the X AIS gives a auto margin and I think that's looking a lot better now of course we can appropriately start to name these things like space suits I can even use chat jpt to give me a quick description where I can paste in update my button to buy now and we now have our product page for our space suit but I don't think we have enough details let's add a little bit more where we want a little bit more product information of course we can add a little bit more text to start to give some more description to our page but what I'm really looking for here is an accordion where I can start to add a lot more information to the page that doesn't really take up a ton of vertical space unless that person has interest in actually learning about that specific thing so how about this one with the plus and minus icons I can grab the jsx and paste it in we're dropping it in side I think this is looking pretty good and all we need to do now is customize that content which we can continue to use jpt and make sure on your checked input let's just change this to default checked where we have our product info our specifications and we can see that we also get a nice warning now for the most part this is how all the components are going to work and we can even customize some of the colors and the theme but what happens when we do want that enhanced interactivity now given we're in nextjs and react we can really use anything we want any kind of component library to drop in the components that we need but staying on the theme of Tailwind component libraries there's no reason that we can't mix and match all the different component libraries as long as we're trying to make sure we're maintaining a similar visual pattern for all the different components so for instance if this accordion is just not cutting it like one thing that bugs me is I can't close the same item I have to click another one to open it I can opt into something else like shed Cen and simply just use the accordion from there both of these libraries ultimately use Tailwind CSS so makes it easy to all filter that through the same Tailwind processing just a quick heads up though if you're installing Shad Cen after installing Daisy UI the automated installation will wipe out your plugins so make sure you go ahead and read add require Daisy UI or if I go ahead and install the accordion I can now copy the Imports drop them into my application and now whenever I want to actually add that accordion we can see that they're working happily together now you might be wondering why didn't I just use Shaden to begin with there's a lot of really nice things to like about Shaden it's a pretty amazing component Library I'm just really particular with how I write my code where while this sheet is pretty amazing and I really don't want to write that by hand so I want to go ahead and copy that into my app while the react hook form is pretty damn powerful it's just not really my cupy so for most of these components I'd rather just copy in the native HTML that I can then customize to my liking both including the Styles and being able to add the interactivity to it rather than being stuck with the opinionated way of doing it when I want to have an opinion for how those components are written even if that means giving up some of the out of the box features that makes Shaden so great but there's a lot of different Tailwind component libraries out there even an official one what's your let me know in the comments next up let's check out another component library that uses Tailwind under the hood where we'll use Tremor to build beautiful data visualizations in our app

Channel: Colby Fayock

Views: 5,197

Keywords: tailwind components, tailwind component library, tailwind components free, tailwind components nextjs, tailwind component library react, best tailwind component library for react, best tailwind components, tailwind ui components react, daisyui, daisy ui tutorial, daisyui tailwind, daisyui react, daisyui tailwind tutorial, daisyui vs shadcn, daisyui nextjs, nextjs components, next js component library, next js components tutorial, nextjs tailwind components

Id: PctfrkRo8Fg

Length: 7min 42sec (462 seconds)

Published: Wed Nov 22 2023