Now let's go ahead and let's build our component library for buttons. Before we do that, I quickly want to show you how we are going to create routes inside of a Next.js application. So for all routes, be that an AVI route or a client-side route, we are going to use the app folder. So inside of the app folder, in order to create a new URL, you can create a folder and simply give it the name that you would wish the URL to be. So for example I'm gonna write buttons and in order to turn this into an actual route we have to use a reserved file name which you might have already guessed is page.tsx.
So once you create a new file page.tsx inside and if you attempt to go to localhost 3000 slash buttons you're going to get an error that the default export is not a React component in page slash buttons. So it recognized that this is a URL but it gave us an error. That is because besides page being a file convention which we have to follow, there is another convention which is quite important and that is that every page.csx needs to do a default export. So let's go ahead and write the following const buttons page the name does not matter The only thing that matters is the default export. So I'm just gonna write buttons page and then I'm gonna export default buttons page.
Once I save, there we go. We have the buttons page. So if you try and rename this into something else, for example, a component.vsx, you can see that now this is no longer a route. It is a 404 page. And if you change something from a page to a non-page you will most likely get this weird unsaved file inside of your .next folder.
You don't have to worry about unsaved or conflicted files inside of this .next folder because all that it does is cache. So feel free to simply click on this one unsaved if you even got this and you can just save this file. In case you think you did it wrong you can always remove this folder completely. So let me just demonstrate that to you in case it happens. So I'm gonna go ahead and shut down my application.
So make sure it's not running. So you should get the site can't be reached in your browser and I'm gonna go ahead and completely remove the .next folder and on my next npm run that folder will be generated again so there we go If I go back I have the .next folder again. Great. So now let's go ahead inside of our app folder buttons and I'm gonna turn this back into a page. There we go.
So if I refresh here again, I can see the buttons page. So just make sure you are on localhost 3000 slash buttons. So what I want to do in here is I want to render all buttons and all of the variants which we are going to have. So you already know how to import the button so I am repeating that here again. And first I'm going to go ahead and add a primary button.
Like this. So I'm just going to write that. Below that I'm going to go ahead and add a primary outline. Like this. And let's go ahead and give this a class name of padding4 and let's give it a space y4.
So I want them equally spaced out and let's also actually turn this into flex flex call. So I want them to be one below another and I'm simply going to limit their width. So max width is going to be 200 pixels. It really doesn't matter, what I'm trying to do here is just a demonstration of all the types of buttons which we are gonna have inside of our app. So this is probably what you are seeing because I'm working with my browser zoomed in.
Great, so we now have a primary button and we have a primary outline button but they look exactly the same. So let's go inside of the button which is located inside of our components UI folder and let's go ahead and modify it. The first thing I want to modify are these default classes right here. For example, I don't want to have rounded MD, I want to have rounded XL. So once I save this, you can see how both of my buttons just got a more rounded corner.
What I want to do next is I want to give it an uppercase value. So whatever I write, I want it to be uppercase. And I'm also going to turn on tracking wide. So my letters are more spaced out between. And one more thing I want to do is change from font medium to font bold.
There we go. So this is the baseline that I want to work with. What I want to do now before I change my variants is change my sizes. So the default size of my button is not going to be H10, it's going to be H11. I just want him to be a little bit bigger.
For the SM option, I'm going to remove a rounded MD. And for the large option, I'm going to change the height to go to 12. I'm going to remove a rounded MD. And for icon, we can leave it as it is and I'm gonna add just one more size which is gonna be rounded. Which is just gonna do rounded all.
Great! So now we have that prepared. What I wanna do now is I wanna go ahead and remove all of the variants except the default one. So let's go ahead and let's actually remove everything inside of the default and let's style it again from scratch. I'm just gonna go ahead and disable my copilot so it doesn't cause us any problems in this tutorial.
Let's give it a background color of white. Let's give it a text color of black. Let's give it a border slate 200. Border is gonna be 2. Border bottom is gonna be 4 pixels so we're going to use this specific value so you can always break from tailwind If it doesn't exist in your, for example, Border Bottom 3, Border Bottom 4, or you can write 4 pixels directly.
So it looks like our 4 actually exists, so we can use it like this. Border bottom 4. On active, border bottom is going to be 2. On hover, BG slate is going to be 100. And let's give this a text slate of 500.
There we go. So this is our default button. You can see that when I click on it, it kind of has a 3D effect because you can see how this border on the bottom gets evened out with the rest of the borders. So let's actually go ahead and change this to be our default button. Like that.
And then I'm just gonna go ahead and copy this and change this one to be primary. So now we're gonna develop this too. Primary and primary outline. For the default one we don't have to explicitly pass in the variant because if you take a look in here in our default variants the variant which will be chosen if no prop is passed is the default one which is the one we have just created. So now what I want to do is create a primary one.
So let's go ahead and write this one from scratch again and then the rest we are just going to copy. So for primary I'm going to give it a BG sky of 400 and here's the thing I want us to do. I want us to go into page and just give this button a variant of primary so that we can see exactly what we are doing. So primary is gonna have a BG sky of 400, a text primary foreground. It's gonna have hover BG sky 400 slash 90 like this.
Border Sky 500. Border Bottom 4. Active Border Bottom 0. So there we go. Now we have our primary button.
Now let's go ahead and create a primary outline. So primary outline is going to be quite simple. Background is going to be white. Text is going to be Sky 500. And on hover, BG is going to be Slate 100.
Let's go ahead inside of here and let's give our third button a variant of primary outline. There we go. So this is going to be our outline button. Not too much effects on that one. But you can see that this big buttons have a cool 3D effect.
Great. What we have to do now is do the same thing but for more variants that we are going to use throughout the app. So let's prepare those other variants. I'm going to copy our last two buttons here and I'm going to go ahead and call this secondary and call this secondary outline. So now we should have this which look exactly the same as primary but we are already gonna change this to be secondary here.
So you should have an error for these two variants and they should look completely naked. Now let's go inside of the button here and what we can do is copy this primary and primary outline because they're gonna be quite similar. So let's change this to be secondary and change this one to be secondary outline. And now let's change this from BG sky 400 to BG green like that. So if you want to you can leave it like this or you can go ahead and modify this even further.
So what I'm gonna do is change this to BG green 500 because I want it to be just a little bit darker. Then what I'm going to do is on hover I'm gonna use BG green 500 again and for the border I'm gonna use BG green 600 like this. There we go. And the rest is completely fine. And now what we can do here is simply change this from text sky 500 to green 500.
Or you can actually leave it like this and we can leave this to be slate exactly like that. Perfect. So if you want to you can you know play around and modify the colors a bit. I just want them to be as the app you saw in the demo. So now let's copy these two buttons and we're gonna create a destructive property here.
But we're gonna call that danger. So danger and danger outline. So I'm gonna change this to danger and danger outline. So again this two should be naked now but we're gonna go ahead and copy and paste our secondary inputs here. And let's replace this one to be our danger and danger outline.
So instead of using BG green here, we're gonna be using background rose. Like this. So we have danger and we can leave it exactly as it is and for the danger outline again change from text green to text rose. There we go! So you can see how our component library is very easy to create thanks to Shadzy and UI.
What I want to do now is go ahead and create a couple of extras here. So I'm gonna go ahead and prepare my super buttons which we're gonna use for our premium components right for pro users. So I'm gonna change this danger and this danger to say super. So let me just scroll down, they should be here at the bottom, and I'm gonna change this to be super and super outline. Let's go inside of the button, let's copy the last two here.
Don't forget to add a little comma here. And change this from Danger to Super. So instead of being a Rose, these are going to be Indigo. And text is going to be indigo as well and you can leave it as it is. Great.
And now I want to go ahead and I want to create one individual component here which is not going to have its matching outline and that's gonna be called a ghost button. So I'm just gonna give this a variant of ghost. It should be at the bottom and it should be completely naked. So I'm gonna write ghost and I'm going to give this a BG transparent. I'm gonna give it a text slate 500.
I'm gonna go ahead and give it a border of transparent, border of zero and hover BG slate 100. So just a very simple ghost button which we can use. This is technically an alternative to our default button so technically you could make it as a default outline if you want to. So I'm just going to create as many options as I'm going to need for my project here. And the last one I want to create is the sidebar ones.
So the sidebars are going to be kind of unique. Some would say they might not even fit here. Perhaps they could be custom components. But I found it to be useful to have those two variants as well. So I'm just gonna go ahead and do it.
I'm gonna go ahead and copy these two values from Super. And I'm gonna go ahead and change from Super to Sidebar. And I'm gonna change the variant as well. So Sidebar and Sidebar Outline. Let's take a look at them here at the bottom.
They are completely naked. So I'm gonna go ahead and create the sidebar one. So sidebar is gonna have BG transparent. It's going to have text slate 500, border 2, border transparent. Power BG Slate 100 and transition none.
So I want transition none because I want it to behave very fast inside of... I want it to behave very fast when it's in the sidebar. You're gonna see that later of course. So we have the sidebar and now let's go ahead and create a sidebar outline. So this is gonna be BG Sky 500 slash 15.
Text sky 500, border sky 300, border 2, hover BG sky 500 and the opacity of 20 and transition none again. There we go. So once in the sidebar and inactive it's gonna look like this. But once clicked and once we redirect to that route it's going to look like that. Great!
So I believe that is all we need for now. If I forgot something we're gonna come back to this and revisit later. But there we go, we just built our first component set using Shazzy and UI and you can already see how this changes the app completely. So now that we are gonna use this type of, these types of buttons, you can clearly see how we change the tone of the application into a playful, cartoonish and 3D style. Exactly what we were aiming for.
As always, you can visit my GitHub and you can find this exact source code if you think you did something wrong or you're having some problems. Great, great job.