Let's Build a Component Library Using Shadcn's UI Components

if you're someone who keeps an eye out for attack Trends in the JavaScript ecosystem you probably would have come across chat CN UI competence it's available on the website called ui.chatcn.com I hope I'm saying the name right I'm not really sure but at least for me it sounds like Shad cn.com they are a super nice collection of components which you can install and set up with your next JS apps but sadly they are not a comfortable Library as it says on the website itself and interestingly I came across this conversation between Po and chat CN on Twitter they were talking about how the chatsee and comrades are a perfect starter for a team wanting to build a comfortable library from scratch and I was thinking to myself why can't I build a corporate library on top of chatsy and UI components and talk about it and that's exactly what we're gonna do today we are going to build a combo library from scratch using the chat CN UI company before we start building a common Library let's get something's clear a company Library needs to have the following criteria the component API needs to be simple and extensible you need to design your computer Library based on an extensible pattern the base variant pattern is a great example of such pattern the Commodore Library should be tree shakeable if an app is consuming our computer Library imagine a combo library has got five components and the app that's consuming our computer Library only Imports too competent in the final build of the app only the components that they imported from a couple Library should be part of the final bundle the component is that they did not import from our library should not be part of the final bundle of the app your components type should be overrideable for example if the app is consuming a company called button and they have variant called primary on top of the button they want to change the text color of the specific primary button they should be able to do that your component Library bundle should be as small as possible this can be achieved by externalizing some of the dependencies that your host app can install on its own and also marking some of the dependencies peer dependencies and not including them in your final bundle now that you've gotten the criteria for the combo Library out of the way let's go to our library together don't be concerned if you're not able to follow the code I have attached a link to the GitHub repo in the description below you can go take a look and play around with it for this Library we are going to use the wheat tailbone template that's built on top of react and typescript so we're going to copy this npm create command and replace the react with react TS this will create a wheat based Tailwind template with react and typescript and now that's ready let's go ahead and CD into our library and do the rest of the instructions given here we're simply going to follow all the instructions given in this template and try to go through all of them one by one now we are at step four we're simply gonna copy this CSS content into our index.css file the template we just made is made for an app since we are building a library we are going to clean up all the things we don't really need for example the assets folder we don't need app.tsx files we don't need an app.jss files we don't need so we're going to remove all of them and also we're going to remove the main.tsx file along with the veetenf.d.ts file as well instead we're going to create one file called index.ts of the root and that's the file that's going to be our entry point let's go ahead and look at the installation instructions for our schatzian UI components since we are not using an xjs app we would have to install everything manually first let's go ahead and install our npm dependencies we're not going to follow the step number two as we don't really need a path alias in our project we're gonna go to step number three and copy the Tailwind configuration of the shot scene into our Tailwind config.js once that's done let's go ahead and copy the global.gss files contents into our index.css file and finally let's go ahead and copy the contents of the utils.ts and make a folder on the SRC called utils and copy all the contents of the utils.ts into our own utils.ts now let's go ahead and add our first component this component requires a comforter from the Radix UI Library so first let's go ahead and install the component from the Radix UI react slot once that's done let's copy the button component into our competence folder and give the name as button.tsx and adjust the path for the lip and let's go ahead and Export all the entities of the button.tsx into our index.ts file let's go ahead and fix the content field of our Tailwind config.js and also add dark class to the safe list this would make sure that Tailwind would include dark class as part of its final bundle even when the dark class is not used in any of the react components let's go ahead and install this tool called poses CLI what this does is this would take our index.css as an input and generate an output called style CSS around this folder and the scripts called build styles let's go ahead and run the script to see what the output looks like let's take a look at the output.style.jss you can see that we have classes called text primary and text primary foreground these are the classes that are being used in our button component as I said Tailwind CSS will only include the classes in the final bundle if they are used by your components the classes that are not being used by the companies will not be part of the final puddle now we're going to replace our tsconfig.json file into our own tsconfig.json file that we have for libraries the last three fields are pretty important for us because it tells typescript where to generate the Declaration files and if it should generate a declaration files or not now let's build the wheat configuration for our library right before we build our read configuration let's go ahead and install weight DTS plugin this will enable us to bundle all our declaration files into one file at index.d.ts so this is our wheat configuration for our library I would walk through all the fields one by one so that you can understand what all of them mean the first field is uh the plugin for react and I have passed a parameter called js6 runtime classic because this enabled me to make the bundles a bit smaller so that's the reason why I've added this and it should also work without this field so it's optional and the next one is DTS and then we have our build option inside build options we have to specify the entry that is our index.ts file and then we have to specify the formats in which we want the outputs n and then comes the file name of how your file should be named in our this folder and then we come into the role of options where you can see that there is a field called external where we would Mark all our peer dependencies and our dependencies as part of the external field what this will do is that this will make sure that our pay dependencies and dependencies are not part of final build of the library and there is just one more field that is important for tree shaking and that's called preserve modules when this field is combined with our side effects field from packet.json then it's going to make our library tree shakeable if you take a look at the packet.json we've got some few fields that we have added we've got type we've got Main and we've got module and we've got types field all these fields are self-explanatory and there's this other field called side effects false normally if our CSS files a part of our library bundle then we would Mark the CSS files as side effects here but since our CSS files are being generated by another postseason CLI tool they would anyways be part of the this folder and we don't really have to mark them as side effects here now let's go ahead and add another component called alert from chat c and confidence and then run npim run build to see if our library is bundling is expected now that our library is bundling as expected we need to test if this actually works so for that we are going to make a new folder called examples and in that folder we're going to add another wheat Tailwind based app to test our library to see if this actually works or not let's use the same template that we use for our library because the template is meant for an app we would go ahead and install all the relevant instructions that we have to and create our app we will copy the index.css file into our app and make sure that everything looks as expected now let's link our library to our app we have imported the style CSS file and also we've imported the button component let's go ahead and build our dark mode toggle we have a button to toggle between light and dark modes this toggling would simply apply the dark mode class on the parent of the shot C and UI components and this would apply all the relevant dark mode colors oh something has failed um all right I think we have a problem with the namings offer index.css5 so it should base tile.gss file and also we have to import use State Hook from react library before we start over again and let's make some minor adjustments to Center all the content to the center of the page right now it looks pretty good and the toggle dark mode is working as expected we have also overwritten the class name of the destructive variant button right now we're going to do a build of the app to see if we have the button in the build but here you can see that we have only the button component and not the alert component that means our library is pre-shakable I'm gonna go ahead and add the alert component and do a build again just to check if the alert component is part of the final bundle of the app let's go ahead and build our app again just to see now the bill contains alerts component and also the button component both and the Tailwind series build also contains only the CSS that we have used in our app and not the thesis that we haven't really used in the app let's go back to the app and see if the overriding is working as expected I'm going to change the text from Ari's degree and rebuild my app again and you can see that the overriding classes are being applied as expected so our component library is also overrideable if you're using your computer library in an existing Tailwind CSS app there may be instances of class name clashes between your app and your library in that case what you can do is you can add a prefix to your libraries Tailwind config and apply the prefix to all the class names that you use in the library for example if you use a prefix called UI Dash then that prefix will be applied to all the class names that you've used in all the components of the library Tailwind uses applies a basis by default in order to have some specific CSS classes across your apps if you want to apply your own base users then what you can do is you can go to the Tailwind config and add a specific field called core plugins and inside the core plugins you will find another field called pre-flight and make it false so this would make sure that the base uses of the Tailwind will not be applied in your app rather you can bring in your own base user styles here is the GitHub repo it's got everything that we talked about it's got the library starter kit and also it's got the example app you can go read the instructions and play around with it thanks for watching if you liked the video please leave a like And subscribe for more and I will talk to you soon foreign

Channel: Raj talks tech

Views: 2,677

Keywords: shadcn ui, frontend, react, web development, component library, how to build a component library

Id: ChjoKSNWiBo

Length: 17min 8sec (1028 seconds)

Published: Wed May 31 2023