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 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.

Apr 4, 2025 - 15:06

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 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.