Jack HerringtonWedges is another component library built around Radix UI and TailwindCSS.
We'll be using Tailwind again for the layout, typography, margins, and padding. Since Tailwind is just using CSS classes, it's entirely compatible with React Server Components!
This video is going to focus on how to setup Wedges and build the blog entry form client component with it. If you're curious about how the blog app works make sure to watch the previous video!
Wedges is another component library built on top of Tailwind. Definitely has some fantastic components. We'll take a look at them now. As you can see, it's got a huge set of components, including our standards like input, and it's compatible with a whole bunch of frameworks, including our favorite, Next.js. All right, let's go take a look at how to build our blogging system using Wedges from LemonSqueezy.
I'll use our Create Next App at latest to create a Wedges test directory. Again, I'll use Tailwind CSS, That's a really important thing here outside of using the App Writer. And I'll bring that up in VS Code. Now from here I'm going to follow their instructions a little bit. We'll go down here to the manual installation and I'll add in our wedges library.
Alright, looks good. Let's go and configure our tailwind. So to do that, we're gonna bring in the wedges plugin from LemonSqueezyWedges. We'll add that to the plugins. What else do they want us to do?
Well, they want us to go and add in the Lemon Squeezy Wedges content. That's so that it picks up all the Tailwind styling from the directory of components. And they also want us to depend on the dark mode for class. There is one little extra thing that they want us to do is optional for PMPM, which we use. There's a go and set up our MPMRC file locally with LemonSqueezy.
Let's go and do that. .Mpmrc file with their suggested content. And I need to do a reinstall and then we'll bring it up. All right, we haven't made any changes yet, so we're just getting our stock template. It's messed up a little bit because it's brought in some extra styling.
Next we're gonna do is bring in our blog and types as we do in every one of these examples. Blogs has our server actions and types defines our types for our blog. And then we're gonna build out the blog component that's going to show our blogs. Just like with any component library that uses Tailwind, we're just going to use Tailwind to do the typography or the layout or any margins or padding. So of course that's going to be RSC compatible since it's just classes.
Now we can bring that into our page and replace our entire page with a React server component. So it's an async component. It does the get entries to get the list of blog entries, gets that blog component that we just created, and then it creates a two column layout using flex. Each column is a half and then there's a little bit of padding on it. Let's take a look.
All right, that looks good except we're getting this big dark patch down here. Let's see if we can get rid of that by going over to our layout and then doing dark. Give ourselves a little extra padding. Okay that's not working. All right let's go over to our global CSS and I'm just gonna add in that we want a black background and white color for the text.
All right, that's looking good. I like that. All right, let's go build out our form to see what our input and button controls look like. Go back over to our terminal. We're going to use React Hook Form again.
So add React Hook Form and let's go bring in our form. We'll call it blogform.tsx because it's gonna include the blog form. And let's take a look at our code. We're gonna bring in our React Hook form. So we're going to bring in useForm and controller.
That's the basics of React Hook form. And for our components we're going to use for display we'll bring in input in button from LemonSqueezy. After that it's the usual. We're going to use that useForm hook to define our form. The onSubmitHandler is the same as we always use.
It's going to call that server action and reset the form. And then inside of our form we're going to use those controllers to connect to the input component from Lemon Squeezy, give a nice title and content, and then a beautiful button at the bottom. Let's hit save here and bring that into our page. All right, let's launch. All right, that looks really nice.
Okay, let's add something and then there we go. It's as easy as that. So if you're looking for some really nice, clean enterprise style UI components that sit on top of Tailwind. Think Lemon Squeezy is a good way to go with that. The interesting thing is that unlike ShadCN, it's not actually copying any code into your project.
You're just using the components that are in that library. So if they find bugs and fix things up, then you're going to get those because you're connected to a library, you're not actually copying in code as you would with Shad CN.
Wedges is another component library built on top of Tailwind. Definitely has some fantastic components. We'll take a look at them now. As you can see, it's got a huge set of components, including our standards like input, and it's compatible with a whole bunch of frameworks, including our favorite, Next.js. All right, let's go take a look at how to build our blogging system using Wedges from LemonSqueezy.
I'll use our Create Next App at latest to create a Wedges test directory. Again, I'll use Tailwind CSS, That's a really important thing here outside of using the App Writer. And I'll bring that up in VS Code. Now from here I'm going to follow their instructions a little bit. We'll go down here to the manual installation and I'll add in our wedges library.
Alright, looks good. Let's go and configure our tailwind. So to do that, we're gonna bring in the wedges plugin from LemonSqueezyWedges. We'll add that to the plugins. What else do they want us to do?
Well, they want us to go and add in the Lemon Squeezy Wedges content. That's so that it picks up all the Tailwind styling from the directory of components. And they also want us to depend on the dark mode for class. There is one little extra thing that they want us to do is optional for PMPM, which we use. There's a go and set up our MPMRC file locally with LemonSqueezy.
Let's go and do that. .Mpmrc file with their suggested content. And I need to do a reinstall and then we'll bring it up. All right, we haven't made any changes yet, so we're just getting our stock template. It's messed up a little bit because it's brought in some extra styling.
Next we're gonna do is bring in our blog and types as we do in every one of these examples. Blogs has our server actions and types defines our types for our blog. And then we're gonna build out the blog component that's going to show our blogs. Just like with any component library that uses Tailwind, we're just going to use Tailwind to do the typography or the layout or any margins or padding. So of course that's going to be RSC compatible since it's just classes.
Now we can bring that into our page and replace our entire page with a React server component. So it's an async component. It does the get entries to get the list of blog entries, gets that blog component that we just created, and then it creates a two column layout using flex. Each column is a half and then there's a little bit of padding on it. Let's take a look.
All right, that looks good except we're getting this big dark patch down here. Let's see if we can get rid of that by going over to our layout and then doing dark. Give ourselves a little extra padding. Okay that's not working. All right let's go over to our global CSS and I'm just gonna add in that we want a black background and white color for the text.
All right, that's looking good. I like that. All right, let's go build out our form to see what our input and button controls look like. Go back over to our terminal. We're going to use React Hook Form again.
So add React Hook Form and let's go bring in our form. We'll call it blogform.tsx because it's gonna include the blog form. And let's take a look at our code. We're gonna bring in our React Hook form. So we're going to bring in useForm and controller.
That's the basics of React Hook form. And for our components we're going to use for display we'll bring in input in button from LemonSqueezy. After that it's the usual. We're going to use that useForm hook to define our form. The onSubmitHandler is the same as we always use.
It's going to call that server action and reset the form. And then inside of our form we're going to use those controllers to connect to the input component from Lemon Squeezy, give a nice title and content, and then a beautiful button at the bottom. Let's hit save here and bring that into our page. All right, let's launch. All right, that looks really nice.
Okay, let's add something and then there we go. It's as easy as that. So if you're looking for some really nice, clean enterprise style UI components that sit on top of Tailwind. Think Lemon Squeezy is a good way to go with that. The interesting thing is that unlike ShadCN, it's not actually copying any code into your project.
You're just using the components that are in that library. So if they find bugs and fix things up, then you're going to get those because you're connected to a library, you're not actually copying in code as you would with Shad CN.