iHateReading UI: 50+ React Tailwind building components
Build any website in the world by copy-pasting the components
Under the Hood
Welcome to the new blog
Today’s blog is about building blocks and facing a problem
A software developer does a lot of repetitive work. AI can solve most of the frontend development repetitive work problem, but it’s far more to exactly solve that problem.
Problem: Recreate the same frontend interfaces, code repository, and install packages again and again
Solution: One platform or place to get the starter repository, easy to copy-paste react components and building blocks and do more if needed
And exactly, how iHateReading components emerge from the above problem statement.
As a founder of iHateReading, I face the problem of doing repetitive work more than expected, and it’s frustrating to me. One solution is to use AI to automate, but that’s too much for these small optimisation tasks.
Tasks to be automated, but simpler ones
- Create a starter repository for my choice of basic packages already installed
- Provides tonnes of React and Tailwind copy-paste components that I can directly import to rapidly develop
Reverse Engineering
Finding an alternative solution
While working on a new project or building a new app
- We have to somehow do the same process again, mostly I copy-paste the entire existing nextjs code repository and remove all the code to start using it again and clean the package.json
- Another way is to put one boilerplate on github and keep reusing it again it is an alternative, but not solving the problem
One good way I’ve found is to put all components online and one starter code repository on github.
- Anyone can easily download the github starter repository
- Refer to the online components directory
- Rapidly build interfaces.
Exactly what we want, but another good and perfect solution I’ve come up with is to use MCP (Multi Context Protocol), this is quite trending, it’s like letting LLM models run your online components directory and memorise each of the components and return the output accordingly.
AI can certainly bring more advanced features to solve this problem.
iHateReading UI
But coming back to our solution, we have put most of the UI building components such as
- CRM and Dashboard section, including tables, charts
- Content sections such as Blogs, Galleries, and List
- Headers, Navbars, Footer
- Faq, Hero, Testimonials, Pricing sections
- Payments sections
- Project management components
- Authentication sections
- Animations and Widgets
This comprises most of the websites that exist in the world because the agenda is to help as many developers as possible build interfaces.
The 50+ components to rapidly build any website.
More components to come in the next 3 months, Finance, Health, Web3 and AI
These components are made using React, Tailwind and other libraries like lucide-react and react-icons and gsap and framer-motion as the primary packages.
How to get started?
- Simple, clone the github starter nextjs repository
- Install packages, run locally
- Copy and paste components from the iHateReading UI component library
One last thing, we have already been putting 5–10 components per week, and the list might go up to 100 in one month. It’s difficult to put all components by copy-pasting as well as searching for that, I’ve put all components in one nextjs code repository, which you can get at a very basic fee.
Get PRO with all iHateReading components and premium React Tailwind components
Do check out all components: https://ihatereading.in/components
Get the PRO with all and premium components: https://shreyvijayvargiya.gumroad.com/l/glgdep
That’s it for today, see you in the next one
Shrey
