shrey vijayvargiyaFind trending open-source ready components for your website as well as what to learn about the new opportunities open for developers
Under the Hood
So I was researching about these Frontend UI components libraries and the idea struck of researching about it came when I saw this new Eldora UI library.
I was writing my website iHateReading newsletter, one perk of writing newsletters is you have to read a lot, well every content creation business has one perk the individual gets to read a lot about his/her domain.
Eldora UI provides ready-to-use or copy-paste wrapper components or so-called higher components, well that’s why I would love to explain these new UI components concepts that emerge because of the Reactjs reuse concept.
Eldora UI, Shadcn, MagicUI design and Accenticity UI are the best examples of higher-order ready-to-use UI components libraries.
Well, I love the concept it is somehow closely related to the analogy of an aggregation centre a kind of library. Frontend developers still need more aggregation tools or platforms because the existing ones (well we have only one so far or let’s say 2 if including dev.to after app.daily.dev) are not good enough to get accurate reads but hopefully, they do the work.
Let’s check these websites one by one and get an overview of what they provide under the hood.
Acentricity UI
Website
Have a look at the components
These are the libraries I’ve found used by eccentricity UI components
- @tabler/icons-react
- threejs
- tailwind css
- tailwind-merge
- clsx
- framer-motion
- simplex-noise and much more small npm modules, those who knew nothing about npm components then go ahead and read here.
For example, we want to create a Hover card UI component with the following details
Hover Card that shows hover animation
Hover card with the content and static UI components
Hover card background and animation(if required)
Let’s begin the game, in order to create the above Hover card we need few more npm modules that helps us to generate the above card.
ChatGPT can also help you to create a Hover card using cool npm modules and with some animation in the card while hovering and background animation.
This prompt will provide the sample code and ask chatGPT for more such examples to alter your mind.
Moving ahead, for Hover Card component, here would be my approach
Find the top and best(trending) npm modules for animation
Find the best(trending) React UI tech stack and component and styling library
Create the Hover Card and add animation
Open-source/Share the entire code of the Hover Card
framer-motion or react-spring or gsap would be my choice to add animation in React components
Tailwind CSS and tailwind-merge is course the best and trending choice so far
Nextjs and Reactjs are trending frameworks and Vue and Svelte can be addressed later on.
Once these libraries are finalised I just need to create the code and share it or open-source it.
Well 2 years ago at iHateReading, we had a page called custom-repos that helped to provide the same reuse UI components as well as code repository or boilerplates, because GPT didn’t exist then back so writing code for each of the boilerplates was time-consuming. One way I’ve found is to automate the process of creating code samples and boilerplates and GPT will be very helpful.
I am planning to bring back that concept to iHateReading because our custom repos route is still reached and searched according to Google Analytics.
Once the code is created, the developer can read copy paste the code, install the required ui libraries and customise the requirements and good to go.
The above image shows the sample code for the Wavy Background component, it instructs the developers to install the framer-motion tailwind-merge and other required packages.
Most of the devs do the same process again and again and since I can share my work hence I can help a lot of similar kinds of developers to finally get a business model out of it.
A new opportunity has emerged now for these devs but I am not sure who are there user cohort meaning the sample size of people who are their target customers or audience.
Surprisingly, Opposite to what I’ve thought or expected is the result of my research. I found the boilerplates and these UI components kind of SAAS tools annual and monthly revenue and some of them are going crazy making even $10k/month and more than a million dollar annual revenue.
Check ShipFast, ScrapingBee and ScrapingAnt annual revenue or total income. Or simply read our newsletter to get this important information about the market demand.
Magic UI Design
This is not just a HOC components but also a CLI install library that install the entire component module library
So this is not just a higher-order component library but a UI component library that provides a CLI command to install all the UI components just like Material UI or Ant Design.
Magic UI uses the same concept under the hood to provide reusable trending higher-order components.
Use the third-party npm modules for UI components and animation
Use top trending frontend framework and share the code component
The approach will always remain the same comprised of a couple of twists in developer experience.
I am not covering the traditional UI libraries we have so many articles for it. I am talking more about developer opportunities emerging in the market and how devs are building SAAS around it.
Shadcn/UI
Here is the detailed story, https://medium.com/javascript-in-plain-english/introduction-to-shadcn-ui-library-2ad595f1b424
Shadcn also provides CLI commands and manual setup.
What exactly Magic UI and Shadcn CLI command does that it add the entire UI components inside component directory in the root.
So after the respective package is installed using CLI command, my directory will look something like this as shown in the image, also the image is only for next.js directory.
Instead of importing components from the node_module directory, we import use components from the components directory.
Now Button from material-ui/core, ant-design will replaced by Button from @/components
This gives one more power to the developer which is the ability to customise it and reuse it for his/her design system.
For example, If I want to use create 4 projects I can reuse the same boilerplate with custom UI components built on top of shadcn or magic design in each of my 4 projects.
Hence saving me a lot of time in doing the same work again and again this single boilerplate can be reused for freelancing/part-time clients as well, I did it with my clients 3 years ago.
Eldora UI
We have the last one in the house, Eldora UI
Eldora provides 10+ but limited open-source UI components for React and other frontend frameworks.
open-source animated components built with React, Typescript, Tailwind CSS, and Framer Motion. 100% open-source, and customizable.
Eldora uses the following packages
framer-motion
react-day-picker
date-fns
@remix/icons
a lot more similar npm modules
Now this can make sense in terms of what a SAAS developer tool or platform should look like.
Using small open-source npm modules, one can create a collection of UI components and then these UI components can be shared individually as well.
Another workflow to add afterwards is to create a sample landing page using those UI components or templates. The vision is to develop complex applications or page builders using these small reuse components since each webpage is a combination of small UI components or div elements in the DOM.
Webpage (DOM) = UI components(HTML element + Style) + Events (states + actions)
Ability to handle all devs
One thing these libraries are not handling is cross-compatibility
Meaning
- handle multiple frontend frameworks to use these components
- in complex apps as well as with scalable apps or large startup organization apps. I’ve worked with one million traffic website repositories in India more than millions of traffic, the codebase is so tight and complex that we won’t be sure one small change will affect which part of the component or webpage so adding components for scalable apps will be a task.
Here is the list of the top 10 tailwind CSS libraries
Frontend UI libraries and reuse UI components were a trend and still a trend it’s just that the approach has changed and the ability to do it by the developers is also emerging and getting better. Think of smart and cool ways to generate revenue from the small UI component collection and you have your own SAAS idea in the market to test or launch.
Conclusion
AI can surely help us to look ahead for better solutions and tools in the front end. Human creativity of sharing work and recreating things for others creates open-source things in the world and surely we will be creating more such in future.
Well, that’s enough for today, do subscribe to read my stories directly by email or your browser feed.
See you in the next one
Shrey
