DEV Community: Ali Hussein

The New Way to Discover shadcn Blocks

Ali Hussein — Sun, 29 Mar 2026 10:53:16 +0000

Choosing the right component for a project used to be a five-minute task. Today, in the sprawling “shadcn ecosystem” of 2026, it can easily turn into an hour of tab-switching and repository hunting.

The way we discover shadcn blocks has fundamentally changed. We’ve moved away from a single source of truth toward a decentralized world of registries and with that shift, we’ve needed a better way to navigate.

The Paradox of Choice

When shadcn/ui first dropped, it was a contained library. You went to the official site, found the Accordion or Button, and ran the CLI command.

But shadcn wasn’t just a library; it was a movement. It encouraged developers to “own their code,” which led to an explosion of community-driven registries. Now, we have specialized blocks for everything: glassmorphism, AI chat interfaces, brutalist marketing sections, and complex data dashboards.

The problem? They are all in different places.

The Traditional Hunt (The Old Way)

Before recently, the “old way” of finding a specific block felt like a digital scavenger hunt.

You’d start at the official docs. If the look wasn’t quite right, you’d move to GitHub, searching through “Awesome shadcn” lists or scrolling through the shadcn-ui/ui commit history to find blocks that were deprecated or moved.

Your browser would inevitably end up with 15 tabs open: one for Magic UI, one for Aceternity, another for a random indie registry you saw on X (Twitter). You’d spend twenty minutes just trying to see if a “Pricing Section” from one library would visually clash with a “Hero” from another. You weren’t building; you were auditing.

Centralizing the Ecosystem (The New Way)

The shift in 2026 has been toward search aggregation. Instead of visiting every individual registry, developers are moving to Shoogle.dev.

Think of it as a search engine built specifically for the shadcn era. Rather than replacement, it offers a unified interface for over 130 different registries.

When you search for “AI Chat Container” or “Bento Grid,” Shoogle doesn’t just give you a link to a repo. It pulls results from across the entire ecosystem Retro UI, Blocks MVP, various specialized admin kits and presents them in a single, scannable feed.

Why the Workflow Sticks

The reason this has become the “new way” isn’t just about search; it’s about the friction it removes:

Integrated Previews: You can evaluate the UI without leaving the search page. This kills the “tab-overload” cycle instantly.
Discovery of Niche Registries: There are incredible developers building high-quality blocks who don’t have the SEO of the “big” libraries. Shoogle indexes these hidden gems, giving you access to unique designs you’d otherwise never find.
Intent-Based Browsing: Sometimes you don’t know which library you want; you just know you need a “Step Wizard.” Searching by component type across all sources is simply more logical for a fast-moving project.

The Takeaway

The “Block Economy” has reached a point where high-quality code is everywhere, but visibility is uneven. The real value of Shoogle.dev isn’t just that it solves the search problem for developers; it’s that it levels the playing field for the ecosystem. It provides a stage for high-quality shadcn libraries that despite their excellence, often suffer from minimum visibility in a crowded market.

The Cost Structure of Using Nextjs Image

Ali Hussein — Mon, 16 Sep 2024 16:36:47 +0000

Using Vercel's image optimization can lead to faster load times, improved user experience, and support for modern image formats like WebP. These benefits can be crucial for maintaining a high-performance application.

Using Nextjs image isn't completely free. This post will break down the pricing and help you manage your budget effectively.

The original post is available at indie-starter.dev

Image Optimization Cost

Vercel's image optimization automatically serves optimized images tailored to your visitors' needs. This can significantly enhance your site's performance by reducing load times and supporting modern image formats.

Here's a breakdown of how Vercel charges for image optimization based on different plans:

Hobby Plan

Cost: Free

Limit: 1,000 image optimizations per month

Overage: Exceeding this limit results in runtime errors for new images, but no additional charges.

Pro Plan

Cost: $20/month (base plan cost)

Limit: 5,000 image optimizations per month

Overage: $5 per additional 1,000 optimizations

Fast Data Transfer Cost
Requesting images from your website that are hosted on Vercel to add additional usage to your bandwidth or Fast Data Transfer (FDT).

When a user visits your site, the data transfer between Vercel's Edge Network and them gets measured as Fast Data Transfer (FDT). The data transferred gets measured based on data volume transferred, and can include assets such as your homepage, images, and other static files.

The first 1 TB of data transfer is free. Beyond that, it costs $0.15 per GB.

Caching Benefits: Optimized images are cached on Vercel's Edge Network, reducing costs for frequently accessed images.

Edge Requests Cost

When visiting your site, requests are made to an Edge Network region. Traffic is routed to the nearest region to the visitor. Static assets and functions all incur Edge Requests. Requests to Edge Network regions are not only for Functions using the edge runtime. Edge Requests are for all requests made to your site, including static assets like images and functions.

Example Scenario

Let's say you're on the Pro plan and your application optimizes 6,000 images in a month. Here's how your costs would break down:

Free plan

Image optimization: 5000

FDT -> up to 1TB

Edge Requests: up to 1M

Total Cost: 0$

Pro plan

Base cost: 20$

Image optimization: 5001 -> +5$

FDT -> 10TB + 7GB -> +1.5$

Edge Requests: 10M requests + 1 request -> +2$

Total costs: 28.4$

Final Thoughts

Understanding the cost structure of Vercel's image optimization helps you make informed decisions and optimize your budget. By leveraging Vercel's caching and efficient data transfer, you can maximize the benefits of image optimization while keeping costs under control.

Whether you're on the Hobby, Pro, or Enterprise plan, knowing these details will help you plan effectively and ensure your Next.js application runs smoothly and efficiently.

Boilerplates are everywhere

Ali Hussein — Wed, 24 Apr 2024 17:17:02 +0000

Building boilerplate SaaS became trendy the last few months after some boilerplate providers made a huge success, which encouraged many to build their own boilerplates, and I am one of them. However, I don't want to copy someone else's success story because success stories can't be copied.

I believe every indie hacker should build his own boilerplate or get at least one. Starting from scratch every time we want to build our own project is time-consuming and counterproductive. Doing repetitive tasks is boring and inefficient.

What encouraged me to build Indie Starter?

By having a solid foundation, I can use it for my own projects and MVPs without starting from scratch and doing repetitive tasks. Beginning with what matters to the end users gets me close to the market, which is a competitive advantage.

Getting to know other fellow indie makers is not just great motivation; it's also an invaluable opportunity for collaboration and mutual growth. Building a network of like-minded individuals who share similar aspirations and challenges can open doors to exciting collaborations and partnerships.

Indie Starter is now available

While new boilerplates are popping up every now and then, it has become increasingly challenging for newcomers to stand out. But despite that, I believe there is room for improvement.

After hours of working on the demos and the landing page, I am excited to share Indie Starter with other indie hackers and developers to try out. Out of the box, you will have a lot of things already done, such as third-party integrations, global configuration, pre-built core components, and pages.

If you want to share your feedback about your experience using Indie Starter, feel free to send a DM, and I'll send you a coupon code for a discount on your next purchase!

Make 💰 with me

I set up a program on Lemon Squeezy🍋 where we can earn money together. Take a peek whenever you want Affiliate program!

Your Guide for choosing the best-fit NPM package

Ali Hussein — Sun, 17 Jan 2021 20:29:33 +0000

It is easy to choose when a thing is good and the other is bad, but what to do when both are good! Pros and cons are the answer. Choosing an external 3rd party library takes time, obviously, it is a crucial process. There are many dependencies that do the same thing however nuances make them totally different with a big or little impact on the project. This article will walk you through how to spot the best-fit library for your project, the way I personally do.

First Look

there are several sites where we can check some stats about a given library and discover alternatives either. Which is awesome.

Key points I check

Bundle size: bundlephobia is great, I normally compare the package I am checking with a list of suggested packages which give me an idea of how big/small the bundle size is.

I make sure also that it is an ESM library, which allows me to import only the code that I use. which reduces the bundle size.

Library Dependencies: zero dependencies is optimal.
Actively maintained: this is a sign of healthy dependency. ****
Security and vulnerability
Language: I prefer Typescript because it has features such as type-safety, autocompletes, and declaration files.
License: A lot of libraries are under MIT, which allows for commercial or private use and /or modify it or distribute it, they don’t provide a warranty of any kind nor liability.
who use or sponsor it. it means users and sponsors believe in its value.
number of contributors more is better
Issues on GitHub obviously less is better. However, many issues are not relevant to my case, so I just ignore them.

Resources where you can see library stats

Customizability

Stats are not enough to detect the best-fit. A demo or more with the chosen library can reveal things that are not stated in the stats. For example, customizability is probably a deal-breaker if it is a UI library. We likely want to customize it to fit into an existing design. In some cases, the customizability offered by UI libraries is not enough or the workaround is not straightforward. However, customizability becomes trivial for projects such as prototyping or MVP.

Motivation & Doc

I like to check the documentation, to see if I can walk through the APIs easily or not. I check if there are possible compatibility issues with other packages, I am not aware of.
I like to see what motivates the authors to spend time and effort coding their library. What kind of problems they want to solve, other existing libraries do not. Why it is better than the existing solutions. have a look at these examples

...avoid including implementation details so refactors of your components (changes to implementation but not functionality) don't break your tests and slow you and your team down.

testing-library.com

Glider.js was born out of a frustration for carousels, especially on mobile devices. Inspired by the well-known Slick.js, Glider.js aims to be a fast, lightweight, responsive, unopinionated, dependency-free carousel alternative...

Glider.js

Business Value

I like to consider resources such as time, developer experience, money...etc. I usually check if dependencies have an impact on business resources, this is helpful when we have two "good" candidates. e.x Enzyme versus Testing-library, from only business perspectives, Testing-library saves us a lot of time and reduces staff cost for companies because it tests the final results, and it does not test implementation details.

Thanks for reading. Let me know I missed something.