Build a UI Library with React, Typescript, TailwindCSS and Storybook

🌱 Source Code: www.codewithgionatha.com/repo...
💬 Discord: / discord
In this video, we are going to build a basic React UI Library by using React, TailwindCSS, Typescript, and Storybook.
Timestamps
00:00 Intro
01:07 Project setup
06:17 Tailwind setup
08:18 Storybook setup
11:34 Creating our first story
15:39 Explaining how styling works
18:23 The cn function
19:37 Adding Button styling
28:03 Adding the `ref` prop
29:55 Implement Text component
33:10 Adding the `as` prop
40:57 Implement Input component
45:00 Implement Box and Stack components
51:10 Building a Login form screen
56:34 Library final build
01:02:35 Outro
#react #typescript #tailwindcss #storybook #tutorial #programming #ui

[@kettenbach]

Awesome video. I love all of those libraries. I like seeing all the different generics and props type examples. Very cool. Thanks

[@tegasteve8195]

This looks like a really nice project to have in a portfolio

[@mr.daniish]

This content is a breath of fresh air

[@christoherright6430]

This helps me a lot. Thanks.

[@harshitshakya2513]

You save my couple of days, Thanks for sharing this information. Love from INDIA❤

[@michaelariesmalaca8557]

Thanks for sharing this stuff.

[@vinayakhegde4216]

This video is excellent. Making some challenging projects with any well-known tech stack would help you grow your channel and educate and enlighten a greater number of people, in my opinion.

[@user-yt9dy4br5g]

woaaaaa, thx gio⚡️

[@trentcox9239]

should have a look into tailwind-variants. takes the best of tw-merge, cva and clsx and adds even more features like slots to break down styling within the component. perfect for separating the 'noise' of the style classes into a separate file and keeping your components business-only.

[@gionatha]

Thanks for sharing, didn’t know about that library. Looks very promising 🙌

[@user-dc4qs5vs5z]

Nice video. But can you please create a video on how we can publish it and use it in another project ?

[@ignaciofigueroa7815]

Love it! I have a question. Is this library compatible with Next.js?

[@gionatha]

Sure, you can import this library in a Nextjs Project.

[@anshulsoni653]

amazing tutorial, can you help on how I can import this library to my project, also can we deploy his storybook site

[@davebenjamin4388]

Thanks for this tutorial. Very helpful to understand some of the inner workings. I have a quick question. I'm using shadcn to build my component lib (bundled with vite). When I publish and then consume button component, i get type warning on button "variant" prop. This seems to be solved by installing class-variance-authority in the consuming app. is this correct? if so should I install cva as a peer dep in my lib (i'm using a nx monorepo. so initially it was intalled in the root package of my packages monorepo.

[@davebenjamin4388]

I would have thought that because is not listed as a rollup external, that cva would have been bundled into the package?

[@gionatha]

@@davebenjamin4388 Hey dave. Yes, I think you need to install those dependencies since I think they are not shipped with the library. This is something that could be improved about this project indeed 😄

[@xxXAsuraXxx]

is it being treeshaked properly? Last time I remember vite library mode doesnt support treeshake on the output

[@gionatha]

Hey Kevin, I did some research and it seems it is still an Open Issue ( github.com/vitejs/vite/issues/5174 ). Anyway, it depends on the bundler I guess, seems that when using Webpack you might need to do additional work. I should do some double check on the final output to know if it has been tree-shaken properly.

[@xxXAsuraXxx]

@@gionatha yep, I encounter this problem when building a library. I switched to a tool called Modern Module, its so good and treeshaked!

[@Aman_yadav1419]

Hey I got an error in storybook with node ..I don't why this is happening please help me

[@rahulthakur4017]

Hey, nice but is there a way to not include react related license file(s) inside our build files?? All I need is just our own logic inside the build files

[@gionatha]

You have two ways of doing that: 1. Inside the vite.config.ts, in the "rollupOptions" specify the deps to externalize, we actually did it in the tutorial (58:44) More info on how to externalize deps can be found here: rollupjs.org/configuration-options/#external 2. Install a vite plugin to externalize external dependencies like: github.com/davidmyersdev/vite-plugin-externalize-deps

[@godfreyowino1525]

I have a question. How can we make our library be able to be initialized to our application or installed through npm

[@gionatha]

You can use ' npm link ' if you want to test it locally. Go inside your library and run `npm link` then go to another project where you want to use it and run `npm link ` then you should be able to start importing the components of your library. The other method is publishing the library on a package registry (such as npm) by running the command `npm publish`. Once done you can install your library wherever you want as you were installing a normal package by running `npm install `. I suggest starting with the first approach.

[@kelvinmusselli7066]

How to implements this lib in another project?

[@mfurkankaya]

First of all; thanks for the great video. I have a question. I would be so happy if you can answer. I named my library as "simple-ui-test-for-pkg" and when I want to use it in a project I have to add './node_modules/simple-ui-test-for-pkg/dist/simple-ui.js' path to tailwind config. Is there another way?

[@gionatha]

Thanks. We discussed about this on Discord. You can find the conversation in the #ui-library channel.

[@mfurkankaya]

@@gionatha thanks!

[@rykageee]

I followed your storybook setup and there is an error in both tsconfig.json and tsconfig.node.json "Cannot find type definition file for 'body-parser'. The file is in the program because: Entry point for implicit type library 'body-parser'" how to resolve this error?

[@gionatha]

stackoverflow.com/questions/71673835/cannot-find-type-definition-file-for-body-parser-in-tsconfig-json

[@syimiridris5185]

Hi can i know if the same setup can be use on react native? ignore the tailwindcss

[@gionatha]

I think it should be feasible. But tailwind is not yet supported on react-native out-of-the-box. The only solution is using nativewind: nativewind.dev

[@ShubhamVyavhare]

I didn't get it, why we are using forwardRef in every component? I search about it little, it says it helps if use want to manipulate DOM element, ref helps. Is it the only reason or there is another reason behind it?

[@gionatha]

Cause we're building a UI library. If you need to access the ref of one of the components that we built on this project, the only way to properly access it is by forwarding the reference with forwardRef.

[@ShubhamVyavhare]

@@gionatha Oh okay. Thank you so much for clearing. BTW nice tutorial. Helped me alot...!

[@tareqdevdiary]

can it be used using npm, yarn and pnpm?

[@gionatha]

Technically yes, although I used yarn, you should be able to install the dependencies and run scripts (i.e. storybook) even with npm or pnpm

[@tareqdevdiary]

did you published this as a npm package?@@gionatha

[@minas4356]

You just added the index.css file in the storybook files And there are no css files in the final output of the library how can I fix?

[@gionatha]

If you’re trying to use this custom library in a separate project, I think you would need to install tailwind in that project as well in order to work.

[@atejap]

@@gionatha but if i have some custom css into index.css, i need to import the css file for each component i have created, rigth?

[@atejap]

I included "./node_modules/**/*.{js,ts,jsx,tsx}", into "content" in tailwind.config.cjs file in the separete project and then its woked

[@MaxViews24]

How to build storybook static files for storybook deployment?

[@gionatha]

you can run the script: "yarn build-storybook"

[@MaxViews24]

Gotcha! My problem is to publish both library and storybook to two different environments.

[@adilboudida3412]

how to deply this Library?

[@user-dc4qs5vs5z]

And when I built it I am not getting styles in my other project. Can anyone help me here ?

[@gionatha]

Discord

[@scorpion32]

I heard that it's is against tailwind terms and conditions to create and profit from their components to build themes

[@ujjawalrachhoya8972]

who cares

[@egaiosowor]

😂😂​@@ujjawalrachhoya8972

[@moises-native4829]

Why did you use yarn build and not yarn build-storybook ?

[@gionatha]

yarn build is meant for shipping the library and stripping out storybook since is a development library (aka it should not be shipped with the library final bundle) yarn build-storybook instead is meant for shipping the storybook web application if you want to showcase your library to other people.

[@Guccifer808]

Hey! How are you doing? I recall we chatted on IG

[@6qat]

The file simple-ui.d.ts is empty! Any hint for me to solve this?

[@gionatha]

That's kinda weird 🤔Did you run yarn build? Did you set up the vite.config.ts correctly?