Build Your Own Component Library, With `Shadcn-vue`

Hey, guys. I'm Xenonia, and welcome to the Lightning Talk. Today I'll be sharing with you regarding build your own component library with Shed CN view. I'm from Malaysia, and I'm the front-end lead at TroopFail Inc. I'm also the co-maintainer of RedixView and Shed CN view.

So, first of all, what is traditional component library? So essentially, I describe it as the component library that the component's API were designed, such as props, event, methods, and slots were designed by the author or the team itself. So I believe all of us has used component library before. Definitely, we will come across a few challenges. So, first of all, we are always limited to the exposed API. Be it exposed a thousand props or events, we always somehow limited. We just think at the bottom of our mind, I just wish that I could modify just something of that component.

Second challenge, we always find it hard to customize the styling, especially when we are using, let's say, Tailwind CSS or Uno CSS, we always need to force the important exclamation mark for the style, to assert the styling, because just the component library wasn't built around, wasn't designed to have inline classes styling.

Third of all, which is we always find it difficult to build a wrapper around it. So in my company, we were trying to build a design system, a component library around a component library, because we want to have different styling, different component behavior, as such, and we always find it so hard to do so. So I believe this problem has always been the case, until ShadCN arrives.

So this was, the project was initially released last year, on January, and since then, it has gained so much popularity in the React world, and it also affected the Vue, as well as Shelf world. So what is this ShadCN Vue? It is essentially a concept that for you to copy and paste accessible components into your project. And it solves all the problem that I mentioned earlier. How so? So I'm not going to talk about ShadCN UI, because that project is built for React. So let's look at ShadCN Vue, which essentially is the same idea, same concept, but it is a community viewport of ShadCN UI. And it is a collection of reusable components that you can copy and paste or use the CLI to add the components into your project. So it eliminates three of the problems just now. So we are no longer bound by the exposed API. So right now we are free to design the API however we like. So because all the components right now are in your project, you have the ownership of the component. So let's take a look at this button here. So you can add however, whatever props, events, slot props, however you want, anything you want into the button because right now you have ownership of that. Just design it as you see fit. Got it? Secondly, we always find it hard to customize styling and let's say the DOM positions of certain elements. No longer the case as well.

Because of how ShadCN is built on top of RedixView, it allows you to use the primitive and to style the element itself here. So if you can see the menu trigger, we pass in the class of however, whatever classes here and it will overwrite, not overwrite, it will merge with the default classes by using Tailwind Merge. Other than that, it also allows us to do add whatever elements we want or move however the element we want to be rendered in the DOM. So let's say I want to add a separator or I want to add a span in between the drop-down options. Yeah, we are no longer bound but we can do whatever we want right now.

And lastly, it no longer finds it difficult to build a REPL because like I mentioned earlier, it is built on top of RedixView, which is a style and accessible component library that you can build your design system around it. Also, we are using Tailwind CSS, which is super easy to customize by either using your CSS variable or the Tailwind config to fit your own project. So let's look at how could we customize it instead of just talking about the point. Let's look at the case.

So here in the repository, if you initiate, if you include dialogues into a component, you will receive all these .view files as well as this index.cx. So let's look at how we can customize it to your own project. So right now, let's say I have this dialogue overview. Let's say I don't want to have black layout. I can just modify it. I can change the styling here. I also can change the animations however I like for this overlay. And here, dialogue content, you can see that here we have a CN functions, which is essentially functions that Tailwind merges as well as CLSX together. So right now, the first parameters here is designed by us, the shadcn library, and prop.class essentially is what you want to merge with. Let's say you don't want to have left one stroke two, you want to have left 33%. In your component usage, you can just add the class equals to left-33%. And it will merge and overwrite this specific view and persist all the other file, all the other styling here. You don't need to have exclamation mark or anything. And of course, you can add whatever component icon you want. It's no longer bound by the specific icon library. You can change however you want. So these are just some of the quick preview of how to customize it. There's so much more I would love to share with you. Unfortunately, I don't have the time today. So do give us a star as well as check out the doc. There's so many things for you to customize. So if you look at the team, you can change however you want. As well as there's a lot of pre-made blocks for you to copy and paste into your project. So see you next. So that's all for me. See you next time.