Another UI kit on top of Tailwind is Park UI. Park UI is interesting in that it can sit on top of two different frameworks. One is Panda, the other is Tailwind CSS. It itself is built on top of Arc UI, thus the Park. P plus Arc gives you park.
Let's give it a try. All right, so it's got some installation instructions, you got panda and tailwind, we're going to follow the panda instructions. You could just go with Next.js here, it's going to give you a boilerplate app, but we're going to do the setup ourselves. Okay, let's go over here to our tabby, create our ParkUI test. We are going to use Tailwind, built on top of Tailwind.
All right, what's next? Let's go over here to our instructions. We will install ArcUI React, as well as the Tailwind plugin. All right, let's go down here. We're gonna want to install this.
So let's copy that. You know what? I really don't like that you can't select inside of here. I don't know which documentation generator this is, but it doesn't allow selections inside of it. And I find that just Really annoying.
All right, let's go over here to our Tailwind because some of this stuff is not going to work. Like for example, I need to import that as opposed to require it because we're in an MJS file now. And let's see, the plugins need to go down here. The content seems odd. Okay.
Dark mode is a class. Cool. I don't know why though. This okay. I'm just going to take that as is.
I would figure that I'd have to add the node modules park UI stuff. Not sure why I don't. All right now we need to alter our TS config. Oh that's amusing. Okay.
All right let's go bring that over here. So base URL, we don't have defined. And paths, we kind of have defined. So let's do that. Okay.
That's interesting. Kind of the same thing. Okay. And include source and styled system. All right.
Okay, include styled system. Hope that ordering is important. All right, I'm not using Vite, And we'll add a first component. So let's do this, npm park CLI. Okay, let's give it a go.
Let's hit that. Yes. We're on Tailwind. We're on React. Sure, sure.
Yes. Yes. Okay, cool. And we need input and button, so let's do that. Let's go ahead and add button and input.
I wonder if they have form. Let's add form. Don't know form. Okay, so form isn't a thing. Okay, cool.
All right, so let's get into our app. I don't think I need to do any other upgrades in the layout except for, I wanna make this dark mode. Okay, that seems good as we always do. Awesome, cool. Let's go and use a Tailwind version of blog.
That's gonna work. TSX. We know we have Tailwind, so that should work just fine. All right, one last thing we gotta do is go over to our page, and then we'll get our entries from blog. We'll bring in our blog component that we just created.
We'll get those entries and then we'll format them using basic Tailwind layout. So, so far we really haven't used any of this ParkUI stuff at all. We've just been using Straight Tailwind. So let's take a look. And that looks like straight tail end of me.
Okay, so let's go and create our form now. So to create our form, we need React Form. So let's go and add that. Let's launch the server again. And we'll create a blog form file.
And I'm just writing this stuff from the ShadCN example because I'm lazy, but we don't have a form. You need to get rid of that. So just have input at this point. So let's go down here and we'll get rid of form. I don't think we need that anyway.
And, goodbye. And then inside of here, we only really need the inputs. Okay, that actually looks really good. Looks like it seems to be happy. Let's go over here to our page and we'll bring in the blog form.
Hit save. Hit save. Interesting. Okay. Tailwind variants.
All right. So we haven't got that. Let's go and add that. Oh, okay. A little iffy on the fonts there.
Okay, so let's go fix that. I don't know why that is, but that should be okay. But I guess we could just upgrade these. Last name, text white, I name text white, I think. Okay, cool.
Oh, there you go. Nice, okay. The Selection's not so great, but yeah, perfect, awesome. So yeah, okay, some pretty nice components built on top of this Arc UI system. Okay, let's go take a look at some other components just to see.
Okay. So we scroll down here to components, we can see everything we've got. So this is, I would say your standard enterprise set. Just looking at it right now, it seems like pretty much everything is in here that you need. Some interesting stuff like file upload.
That's a cool one. All right, That's nice to see. Skeleton, that's going to be really good if you're using suspense stuff. Awesome. Splitter, ooh, check that out.
That's great. OK. Pin input's kind of a new one for me. Ooh, I like it. Yeah, really good.
And it's nice that they have a Figma template as well. That's going to be great for working with your designer.
lesson
Park UI
Jack Herrington
Park UI is a framework built on top of Ark UI and Panda CSS.
What makes it interesting is that it can actually sit on top of two different frameworks: Panda, and Tailwind. We'll be using the Tailwind version in this video.
Like with the other frameworks built with Tailwind, setting up the Blog component is made easy. No external components required to build the layout!
The form is less verbose than the one built with shadcn. It uses react-hooks-form as well. But, you don't need the Form, FormControl, or FormLabel components. All you need is Input
Beyond forms, Park UI has a great selection of components including a PinInput and Skeleton.
Transcript
Another UI kit on top of Tailwind is Park UI. Park UI is interesting in that it can sit on top of two different frameworks. One is Panda, the other is Tailwind CSS. It itself is built on top of Arc UI, thus the Park. P plus Arc gives you park.
Let's give it a try. All right, so it's got some installation instructions, you got panda and tailwind, we're going to follow the panda instructions. You could just go with Next.js here, it's going to give you a boilerplate app, but we're going to do the setup ourselves. Okay, let's go over here to our tabby, create our ParkUI test. We are going to use Tailwind, built on top of Tailwind.
All right, what's next? Let's go over here to our instructions. We will install ArcUI React, as well as the Tailwind plugin. All right, let's go down here. We're gonna want to install this.
So let's copy that. You know what? I really don't like that you can't select inside of here. I don't know which documentation generator this is, but it doesn't allow selections inside of it. And I find that just Really annoying.
All right, let's go over here to our Tailwind because some of this stuff is not going to work. Like for example, I need to import that as opposed to require it because we're in an MJS file now. And let's see, the plugins need to go down here. The content seems odd. Okay.
Dark mode is a class. Cool. I don't know why though. This okay. I'm just going to take that as is.
I would figure that I'd have to add the node modules park UI stuff. Not sure why I don't. All right now we need to alter our TS config. Oh that's amusing. Okay.
All right let's go bring that over here. So base URL, we don't have defined. And paths, we kind of have defined. So let's do that. Okay.
That's interesting. Kind of the same thing. Okay. And include source and styled system. All right.
Okay, include styled system. Hope that ordering is important. All right, I'm not using Vite, And we'll add a first component. So let's do this, npm park CLI. Okay, let's give it a go.
Let's hit that. Yes. We're on Tailwind. We're on React. Sure, sure.
Yes. Yes. Okay, cool. And we need input and button, so let's do that. Let's go ahead and add button and input.
I wonder if they have form. Let's add form. Don't know form. Okay, so form isn't a thing. Okay, cool.
All right, so let's get into our app. I don't think I need to do any other upgrades in the layout except for, I wanna make this dark mode. Okay, that seems good as we always do. Awesome, cool. Let's go and use a Tailwind version of blog.
That's gonna work. TSX. We know we have Tailwind, so that should work just fine. All right, one last thing we gotta do is go over to our page, and then we'll get our entries from blog. We'll bring in our blog component that we just created.
We'll get those entries and then we'll format them using basic Tailwind layout. So, so far we really haven't used any of this ParkUI stuff at all. We've just been using Straight Tailwind. So let's take a look. And that looks like straight tail end of me.
Okay, so let's go and create our form now. So to create our form, we need React Form. So let's go and add that. Let's launch the server again. And we'll create a blog form file.
And I'm just writing this stuff from the ShadCN example because I'm lazy, but we don't have a form. You need to get rid of that. So just have input at this point. So let's go down here and we'll get rid of form. I don't think we need that anyway.
And, goodbye. And then inside of here, we only really need the inputs. Okay, that actually looks really good. Looks like it seems to be happy. Let's go over here to our page and we'll bring in the blog form.
Hit save. Hit save. Interesting. Okay. Tailwind variants.
All right. So we haven't got that. Let's go and add that. Oh, okay. A little iffy on the fonts there.
Okay, so let's go fix that. I don't know why that is, but that should be okay. But I guess we could just upgrade these. Last name, text white, I name text white, I think. Okay, cool.
Oh, there you go. Nice, okay. The Selection's not so great, but yeah, perfect, awesome. So yeah, okay, some pretty nice components built on top of this Arc UI system. Okay, let's go take a look at some other components just to see.
Okay. So we scroll down here to components, we can see everything we've got. So this is, I would say your standard enterprise set. Just looking at it right now, it seems like pretty much everything is in here that you need. Some interesting stuff like file upload.
That's a cool one. All right, That's nice to see. Skeleton, that's going to be really good if you're using suspense stuff. Awesome. Splitter, ooh, check that out.
That's great. OK. Pin input's kind of a new one for me. Ooh, I like it. Yeah, really good.
And it's nice that they have a Figma template as well. That's going to be great for working with your designer.
Jack Herrington