Perfect UI library using Chat GPT

Easy to create and customise and build fast and performant UI interfaces

Under the Hood

The story begins when I read the tweet about the new UI library using Tailwind CSS or new components using Tailwind CSS.

I applied synthesis thinking over here, how can we synthesise one product using another product?

How can we use Chat GPT to create our own UI library using Tailwind CSS?

Well the question is good and what matters will be

• Why do we need to create our own custom library?
• Why only Tailwind CSS?
• How Chat GPT will help? All the questions will be answered and the reason How I am able to think like this is because of system thinking that gives one teaching of synthesis thinking that is applied over here.

Why UI library?

UI library basically helps to develop interfaces fast.

Easy to integrate and easy to use and has an easy learning curve.

Developing complex UI interfaces becomes a cakewalk if we already have an existing UI library with all the required components.

Why a new custom UI library?

But today’s UI library comes with one bottleneck heavy dependency and huge package size affecting the performance also sometimes.

If we can create our own library with only the required custom components we can develop our application fast and performant.

How?

Well, it’s simple, we will start with creating only basic components like Navar, Footer, Modal, Search and Button component.

Remember that these UI components should resemble your needs meaning they should match somehow your website designs making things easy for production.

Steps to create your own UI library in your frontend code repository

• I prefer creating a dedicated folder called the UI library
• Inside these will add all the required reusable UI components such as Navbar, Modal, Input and Buttons.
• Now create a dedicated file for each of these components
• And lastly, just add the corresponding code in the same

modules
 - UI
  - Navbar
  - Button
  - SearchInput
  - Modal

Above is the directory structure but you can modify it according to your need.

How Chat GPT can help here?

Well, it’s simple, instead of creating your own Button component we will simply ask chat GPT to give us React code for Button.

We can also prefer the styling library to provide CSS directly and chat GPT will help with that.

For example, if we want to use Tailwind CSS as the styling library for our components, I’ll give Chat GPT the below prompt to get the Button component using Tailwind CSS.

Give me React Button code and style it using Tailwind CSS with the primary colour blue 

Of course, you can improve the prompt according to your need and your React Button component is ready.

Simply copy and paste the code into your modules/UI/Button file and export it making it accessible to an entire code repository.

Follow the same pattern with other UI components such as Modal and Navbar.

Provide better prompts according to your need, for example, your UI component should be responsive and handle different themes, so provide the prompt accordingly.

Once the components are ready you can also pass the props and children according to your UI designs.

For example, Buttons can have left or right icons so pass the props accordingly.

Why Custom UI Library?

This can be argued but we need to understand that we only need certain components of the entire third-party UI library and for that, we ended up adding an entire module making the size bigger than required.

Too much dependency will make things slow and decrease the development time.

Own custom library gives complete control, earlier developing our own custom library takes time but now we have chat GPT to write code for us.

Testing UI components

This is a very good approach to testing your own UI library before putting it in production.

I prefer using Storybook, of course, we need to integrate storybook and write code for each component to get rendered on storybook UI locally but that is a one-time investment of time.

Storybook also provides documentation tools to write docs in markdown extension. We can write docs for each UI component for the entire development team on how to use these components and what all props are available.

Below is the youtube video for the introduction to Storybook, feel free to subscribe to my youtube channel for more such videos.
Introduction to Storybook

Documentation is important and won’t take much time, so try adding documentation if you are working in a team.

Or you can also prefer typescript to ensure all types checks are handled and required props are provided before pushing code in production.

Writing test cases

This can be optional, but try to add these if you are working in a team.

Use react-testing-library to write basic test cases and you are good to go.

I am not going into much in detail because you can easily ask for test cases from chat GPT.

Open Source the Library

This is freelancers or a single developer.

If you are developing a lot of products and need a custom UI library in multiple projects simply open-source your library on npm.

Now you can use your own custom library in multiple projects. You can also copy-paste the entire UI directory into multiple projects also if you don’t have experience in open-sourcing the module.

Conclusion

• Try to use Chat GPT as much as possible, it will save a lot of time.
• Create all the required components using Chat GPT and add them directly to your codebase.
• Open source if possible to use the UI components in multiple projects
• Storybook can be used to provide docs and showcase the UI components locally
• Write test cases and use chat GPT for writing test cases with any of the preferred libraries, the choice is yours.
• Chat GPT will make this entire time-consuming process a cakewalk. That’s it for today, for more such stories do subscribe.

Until next time, have a good day, people

Shrey

iHateReading