I Finally Published My First NPM Package! 🎉

Hossein Najafi — Sat, 12 Sep 2026 16:20:34 +0000

Hello everyone 👋

I’m really happy to finally share my first NPM package: taglite 🚀

This package started from a simple need in one of my projects.

I needed a Tag Input component, so I tried several different libraries. Each one had its own limitations. Some were missing features I needed, while others weren’t flexible enough to customize the way I wanted.

So I decided to build my own.

As I kept using it, I gradually added more features and improvements. Eventually, I thought, why not turn it into an independent package and share it with others?

And that’s how taglite was born. 🚀

What is taglite?

taglite is a lightweight Tag Input component for React.

My goal was to keep the API simple while still providing the features commonly needed in real-world projects.

✨ Features

🚀 Zero runtime dependencies
🔷 Full TypeScript support
⌨️ Add tags with Enter and define custom keys such as Tab
📋 Copy & Paste support for creating multiple tags
🧹 Normalize and Validate tags
🚫 Prevent duplicate tags
🔢 Limit the number of tags
💬 Custom placeholder and hintText
🔒 Read-only and Disabled modes
🎨 Built-in themes such as Dark, Light, Dracula, and more
🧩 Support for custom icons
🔔 Callbacks for adding and removing tags
⚙️ Support for Native HTML Input Attributes

I’m also working on a new feature that allows you to customize the component’s color and appearance using a color passed through a prop. I’m planning to release it in the next few days. 🌈

This was my first experience building and publishing an NPM package, and honestly, the process itself was one of the most interesting parts for me.

From structuring the package and designing the API to testing, building, writing the documentation, and finally publishing it, there was a lot to learn.

This is currently the first version, and I’m still working on improving it. I’ll probably add more features in future versions based on new needs and feedback.

I’d really appreciate it if you gave it a try and shared your feedback. ❤️

NPM: https://www.npmjs.com/package/taglite

GitHub: https://github.com/hossein-nj/taglite

How I stopped relying on UI libraries and started building my own reusable components

Hossein Najafi — Sat, 04 Jul 2026 14:19:23 +0000

When I started working with React, I used UI libraries for almost everything — buttons, inputs, modals, you name it.

It felt fast at first ⚡ I could build interfaces quickly without thinking too much about structure or design.

But over time, I started noticing some problems:

My projects became dependent on external libraries 📦
Customizing components was often painful 😵‍💫
I had less control over performance and design consistency 🎯
I wasn’t really improving my component design skills 📉

So I decided to change my approach.

🧱 Building my own component system

Instead of installing a new library every time, I started building my own reusable components from scratch:

Button
Input (with variants like password toggle, number formatting, etc.)
Modal
Form components

At first, it took more time ⏳ But very quickly I noticed something important:

I started understanding UI architecture much deeper than before 🧠

⚡ What I learned

1. Reusability is not just about code ♻️

It’s about designing components that can adapt to different use cases without rewriting logic.

2. Props are powerful if used correctly 🎛️

A well-designed props system can replace entire libraries in small to medium projects.

3. Less dependency = more control 🧩

I don’t have to wait for library updates or fight with overrides anymore.

🚀 The result

Now my projects are:

More consistent in design 🎨
Easier to maintain 🛠️
More lightweight ⚡
Fully under my control 🔒

And most importantly, I feel like I actually understand what I’m building.

💬 Final thought

UI libraries are great — but they shouldn’t replace understanding.

Building your own components, even if simple, can completely change how you think as a frontend developer 💡