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 problems, but it's far from exactly solving 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, easily copy-paste React components and building blocks, and do more if needed.
And exactly, this is how iHateReading components emerged 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 optimization tasks.
Tasks to be automated, but simpler ones:
- Create a starter repository with my choice of basic packages already installed.
- Provide tons 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:
- I usually copy-paste the entire existing Next.js* code repository, remove all the code, and start using it again by cleaning
package.json. - Another way is to put one boilerplate on GitHub and keep reusing it. While this is an alternative, it doesn’t completely solve the problem.
- A better approach I found is to put all components online and a starter code repository on GitHub:
- Anyone can easily download the GitHub starter repository.
- Refer to the online components directory.
- Rapidly build interfaces.
MCP (Multi Context Protocol)
Another solution is MCP (Multi Context Protocol), a trending approach that allows LLM models to run your online components directory, memorize each component, and return the output accordingly.
AI can certainly bring more advanced features to solve this problem.
iHateReading UI
Coming back to our solution, we have put most of the UI building components, such as:
- CRM and Dashboard sections – Tables, Charts
- Content sections – Blogs, Galleries, Lists
- Navigation – Headers, Navbars, Footers
- Marketing sections – FAQ, Hero, Testimonials, Pricing
- Payment sections
- Project management components
- Authentication sections
- Animations and Widgets
These 50+ components cover most website use cases, helping developers build interfaces rapidly.
More components to come in the next 3 months:
- Finance
- Health
- Web3
- AI
These components are made using React, Tailwind CSS, lucide-react, react-icons, GSAP, and Framer Motion.
How to Get Started?
- Clone the GitHub starter Next.js repository
- Install packages & run locally
- Copy and paste components from the iHateReading UI component library
One last thing...
We are adding 5–10 new components per week. The list could grow to 100+ components in a month!
To make it easier, I’ve put all components in **one Next.js code repository, available for a basic fee.
🚀 Get PRO with all iHateReading components and premium React Tailwind components! 👉 Check out all components
📌 iHateReading UI: The Ultimate React & Tailwind UI Blocks Library
👉 Get PRO with all premium components
That’s it for today, see you in the next one!
Shrey