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

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

[tegasteve]

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

[harshitshakya]

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

[ujjwalbhandarii]

Thanks a lot for this video! really helpful

[vinayakhegde]

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.

[dcqsvsz]

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

[trentcox]

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.

[anshulsoni]

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

[kelvinmusselli]

How to implements this lib in another project?

[cristiannerylozada]

I follow all the steps and when I tried to install my library (after publishing to npm package) in a nextapp with tailwind, the styles are now shown :CCC, can someone help me?

[godfreyowino]

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

[davebenjamin]

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.

[rahulthakur]

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

[xxXAsuraXxx]

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

[ignaciofigueroa]

Love it! I have a question.

Is this library compatible with Next.js?

[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?

[minas]

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?

[syimiridris]

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

[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 path to tailwind config. Is there another way?

[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?