DEV Community: Arif Hossain

Most Unique UI Libraries Built On ShadCN!

Arif Hossain — Sat, 17 Jan 2026 15:34:23 +0000

If you’re tired of seeing the same generic websites, same layouts, same components, and AI slop, then check out the following UI libraries that can make your projects stand out.
The best part? They all work great with ShadCN, so you can easily use them in your existing projects.

1. 8bitcn/ui

As the name suggests, 8bitcn is a retro, pixel-art–inspired UI library built by the legendary web warrior Orc Dev.

Notable highlights

Pixel-style buttons, cards, and UI primitives.
Strong retro gaming vibes.
Fully open source with cool blocks.

2. RetroUI

Next up is RetroUI, a neo-brutalist styled UI library that unapologetically embraces bold design.
So you will immediately notice bold typography, vibrant and high-contrast colors, and thick, dark shadows everywhere.

And I’m the creator of RetroUI, so you have more reasons to try it 😄

Notable highlights

Components that feel tactile and fun to interact with.
Theme support so you can adapt the brutalist look to your brand.
Pro support that comes with templates and figma kit.

3. Elements

While most UI libraries only handle the visuals, Elements takes a different approach. Instead of only giving you styled components, Elements provides full-stack shadcn/ui blocks, meaning you get both UI and functionality baked in.

It already has some popular integrations like Vercel AI Sdk, Polor payments, Uploadthing, and more coming soon.

What makes Elements different

Prebuilt blocks that include logic, not just visuals.
Covers common patterns like authentication, payments, AI integration.

4. Glass UI

Next on the list is Glass UI, a library focused entirely on glassmorphism. Here you will find frosted-glass cards, blurred backgrounds, and translucent panels with soft highlights and depth.

If you love Apple’s design language and want to give SwiftUI-style visuals on your website, then Glass UI is absolutely worth checking out.

5. Wiggle UI

Wiggle UI is the first ever collection of widgets for the web.” Instead of focusing on buttons, cards, or forms, it brings typical phone-style widgets to the web.

Think iOS and Android home screen widgets, but usable inside your website or web app.

What makes Wiggle UI unique

A curated collection of copy-paste widgets
Inspired by iOS phone widgets
Designed to drop directly into your project
Comes with many variants, including whether, time, sports, media, and more.

Final Thoughts

shadcn/ui gives you a solid foundation, but these libraries can give your projects a unique personality.

Happy building 🚀

I built a React admin template in the age of AI slop!

Arif Hossain — Tue, 14 Oct 2025 19:12:46 +0000

I started working on an open-source component library called RetroUI last year, with the goal of making building tools that make the web stand out!

Since then, I have released tons of components, UI blocks, and website templates. All designed to bring bold, neo-brutalist design to life.

🔥 Today, I’m excited to launch something new:

Introducing brutadmin.com → an admin dashboard that doesn’t look boring.

Right now, it includes eCommerce and SaaS dashboards, with Finance and Crypto pages coming soon.

Please do consider checking it out and share what you think.

preview link: https://demo.brutadmin.com/

I Deployed the Same App on Hetzner and DigitalOcean! | Cheap vs Expensive VPS

Arif Hossain — Fri, 06 Dec 2024 08:01:29 +0000

DigitalOcean has been my go-to for purchasing VPS for the past few years. However, recently, some cheaper cloud providers, particularly Hetzner, have been getting a lot of attention!

In their cheapest plan, you can get 2 cores, 4 GB RAM, 40 GB SSD, and 20 TB bandwidth for just $4/month!

To get something similar on DigitalOcean, you’d need to pay $24/month!

Now on paper, it sounds like a great deal! and seems like a no-brainer to switch to Hetzner. But is there a catch? Is it as good as everyone claims? How much traffic can Hetzner’s cheapest plan handle compared to something like DigitalOcean?

To find out, I deployed the same app on both platforms in the same region, compared their performance, and shared my findings in this video:

If you’re in a hurry, here’s the result 👇

Virtual Users	Digital Ocean	Hetzner
50	593.4ms	575.99
100	754.84ms	626.04
250	1.4s+	950.23
500	6s	1.8s
Cost	$6/month	$4/month

Building an UI library that does not look generic!

Arif Hossain — Mon, 28 Oct 2024 11:29:39 +0000

I'm love retro-styled UIs, it can definitely give a cool look and make your website standout.

But most of the UI libraries out there are pretty generic and I couldn't find any that has a design language that I was looking for.. So I decided to build one myself!

Introducing RetroUI, a retro-styled UI library based on React and TailwindCSS. Would really appreciate you checking it out and leave a star in the Github repo if you like it. 💜

URL: https://retroui.dev
Repo: https://github.com/logging-stuff/retroui

Create AWS EC2 Instance With Key Pairs Using Terraform

Arif Hossain — Thu, 26 Jan 2023 05:33:23 +0000

Terraform has become one of my favorite tools I tried out recently. If you are reading this article, then I’m guessing you are already familiar with it. But if not, check out this 👉 introduction to get some basics first.

Write configuration

For this tutorial, we will primarily use 3 tf config files. Let’s create a dedicated directory to store them.

mkdir aws-ec2-with-key-pairs
cd aws-ec2-with-key-pairs

Now that we are in the directory, create the config files and open them on your favorite code editor. I’m using Visual Studio Code.

touch main.tf variable.tf output.tf
code .

variable.tf

This is where we will save our config variables which will be used in main.tf,

variable "instance-region" {
  description = "Value of AWS region"
  type        = string
  default     = "eu-central-1"
}

variable "instance-name" {
  description = "Value of the Name tag for the EC2 instance"
  type        = string
  default     = "OverEngineeredVPS"
}

variable "key-pair" {
  description = "Value of AWS SSH key-pair name"
  type        = string
  default     = "oei-key-pair"
}

main.tf

Let’s use the variables we set to create an EC2 instance.

terraform {
  required_providers {
    aws = {
      source  = "hashicorp/aws"
      version = "~> 4.16"
    }
  }

  required_version = ">= 1.2.0"
}

resource "tls_private_key" "oei-key" {
  algorithm = "RSA"
  rsa_bits  = 4096
}

resource "aws_key_pair" "oei-key-pair" {
  key_name = "oei-key-pair"
  public_key = tls_private_key.oei-key.public_key_openssh
}

provider "aws" {
  region = var.instance-region
}

resource "aws_instance" "oei-server" {
  ami           = "ami-09042b2f6d07d164a" // for frankfurt + ubuntu
  instance_type = "t2.small" // $0.023/H
  key_name      = "oei-key-pair"

  tags = {
    Name = var.instance-name
  }
}

Now if we run this file, it will create an ec2 server on eu-central-1(as we specified in variable.tf) with a key-pair called oei-key-pair. But if you wish to use a different location, make sure to change your ami value according to the AWS configuration.

output.tf

We will use this file to output the results on the console.

output "instance_id" {
  description = "ID of the EC2 instance"
  value       = aws_instance.oei-server.id
}

output "instance_public_ip" {
  description = "Public IP address of the EC2 instance"
  value       = aws_instance.oei-server.public_ip
}

output "instance_public_DNS" {
  description = "Public IP address of the EC2 instance"
  value       = aws_instance.oei-server.public_dns
}

output "instance_public_key" {
  description = "Public key of oe-key-pair"
  value       = tls_private_key.oei-key.public_key_openssh
  sensitive   = true
}

output "instance_private_key" {
  description = "Private key of oe-key-pair"
  value       =  tls_private_key.oei-key.private_key_pem
  sensitive   = true
}

Notice I used the sensitive flag on instance_public_key & instance_private_key so that it does not show the plain output by default.

Apply the configuration

Now that we have written our config file, let’s run these 👇🏼 commands to let Terraform do its job.

terraform init

This will download and install the AWS plugins for the providers we used. After the installation is done, run terraform plan to see the changes that will take place on the infrastructure. If everything looks alright, let’s apply the changes by running 👇🏼

terraform apply

This will take some time. But once it is done, you should be able to run terraform output to see the results we specified on output.tf.

To check the sensitive output, just run terraform output -raw “key name”. Example: 👇🏼

Conclusion

Thanks for reading the article guys. Hope it helped!

I used both Code and No-Code tools to launch my product within a weekend!

Arif Hossain — Sun, 04 Dec 2022 00:58:41 +0000

Yesterday I launched a small side project called IndieHacks and the goal was to finish this within a weekend.

Now when the time is this short, It doesn't make much sense to code the whole thing but I also can't go full no-code since this is a free project most no-code site builders require a subscription.

But I think I found a sweet spot By using Airtable as the database and NextJS. Here's how it works 👇🏼

Collecting & Storing Data

I placed an "Add New Product" button on the site navbar, Clicking that opens up the TallyForm widget.

Besides offering such a nice & clean UI, Tally also has some cool integrations including AirTable. So now when a user submits the form, Tally sends the data to my Aritable database.

The great thing about Airtable is it makes it really easy to access its DB data through API. That saved a lot of API building & management time from my end! 😁

EXAMPLE REQUEST
curl "https://api.airtable.com/v0/YOUR_API_ID/products" \
  -H "Authorization: Bearer YOUR_API_KEY"
EXAMPLE RESPONSE
{
    "records": [
        {
            "createdTime": "2022-12-01T22:52:32.000Z",
            "fields": {
                "Alternative": "Google Forms, Typeform, Jotform",
                "Logo": "https://global-uploads.webflow.com/62014002185c7b256316ef63/6227d89b340c3b27961d2158_60e345d1f48cea70e9934764_Tally.png",
                "Website": "tally.so",
                "Name": "Tally",
                "Twitter Handle": "TallyForms",
            }
        },
        {
            "createdTime": "2022-12-02T12:26:34.000Z",
            "fields": {
                "Alternative": "MicroAcquire",
                "Logo": "https://storage.googleapis.com/indie-hackers.appspot.com/product-avatars/acquirebase/200x200_acquirebase.webp?1669984457278",
                "Website": "acquirebase.com",
                "Name": "AcquireBase",
                "Twitter Handle": "acquirebase",
            }
        },
    ],
}

Retrieving Data & UI

I wrote this getStaticProps function to call the Airtable API which will revalidate every 10min. Now I wanted to only show the data that is published/reviewed by me but couldn't find exactly what I was looking for, so I added an extra look that I'm not very proud of 🥲

export async function getStaticProps() {
  const res = await axios.get(
    'https://api.airtable.com/v0/YOUR_API_ID/products',
    {
      headers: {
        Authorization: 'Bearer YOUR_API_TOKEN',
      },
    }
  );
  const data = res.data.records.filter(
    (pro) => pro.fields.Status === 'Published'
  );

  return {
    props: {
      products: res.data ? data : [],
    },
    revalidate: 60 * 10,
  };
}

Then I just looped through the data in UI and with TailwindCSS, made the site look like this.

Analytics

Umami is definitely one of my favorite website analytics tools. Besides being open source they have a very flawless way to self-host.

So thanks to umami & Railway was quickly able set up the analytics. Here's a sharable link in case you wanna check it out 👉https://analytics.indiehacks.link/share/NZkL6cYS/IndieHacks

Thanks for reading, Feel free to visit IndieHacks. We will soon launch on Product Hunt. So would really appreciate your support.

I built a website like the “good old” days.

Arif Hossain — Sun, 25 Sep 2022 01:32:54 +0000

I started learning we Dev back in 2018 and till now all projects I have worked on were API based.
So I never had the experience/felt the need of building projects in the "good old" days. Like when that was used to render everything on the server, the era of MVC, LAMP stack, jQuery, Ajax, etc. So whenever I heard senior developers explaining the pros & cons of serving clients from the server, I kinda got the theories, but never truly resonated with them.
Until recently, thanks to my DBMS course project, I built indiehacks.link with Laravel and Blade template engine following MVC pattern.

BTW I'm happy to announce that now I finally understand why people say NextJS routing is inspired by PHP. 😬
Ok, Let's discuss some of my positive and negative experiences.

Positives:

👉 It just felt "chill".

I just wrote codes for each page and it just worked. I didn't have to stress about building multiple APIs and how the front end will pass the required parameters or consume the response.
Also, there was no headache of frontend state management either! So overall it's much easier, at least on the frontend side.

👉 I loved Laravel!

It has a built-in solution for all basic needs. Tired of building auth solutions over and over? Building CRUD routes? Integrating payments solution? Just run a few Laravel commands and it's Done!!
Normally I don't like heavy frameworks but IDK why but Laravel felt "organized" and easy to adopt.

Negatives:

👉 Everything felt "slow".

I'm sure this is primarily because of my lack of knowledge on how to improve server-rendered sites!
Like here in this case I need to search for projects by my name. I had no idea how I can pass this data to the server! So guess what I did? I pushed the search query to the URL params, which resulted in a full page load!!

IDK if this could be improved my AJAX or something or if I'm just doing it wrong. But this does feel I need to use different solutions to improve the performance, which we get out of the box in modern tech stacks.

👉 Felt less reusable.

As someone who prefers JSX over plain HTML, I'm used to thinking of UI as different components. Though this can be done with Laravel Blade to some extent, But I found it very hard to make this reusable compared to the modern frontend frameworks.

I'm moving my SAAS to a monorepo and how Turborepo is helping me to do so!!

Arif Hossain — Sat, 26 Mar 2022 00:21:34 +0000

NOTE: this is not a tutorial! I'm just sharing my use case, experience, and knowledge so far. Which TBH isn't a lot but I felt like writing a blog, so... 🤷

Back Story

If you read my last blog, You may know I recently launched my SAAS studymerge to make collaboration with classmates easy and productive.

The tech stack I used to build the beta is Typescript, NextJS & Supabase, and used a regular single repository on GitHub to manage git. Which seemed fine as I only had a single codebase to manage.
But after launching the beta the first thing I needed to launch is a landing page and set up Supabase locally for local development.

Why Monorepo??

Now I had 2 options, Either I could create multiple repositories for each project or create a single monorepo and have less headache and better code sharing between projects. I don't know if you can guess, but the 2nd option seemed much more compelling to me!

But!! the only problem is I don't have much experience in monorepo. I mean I've been working on a monorepo codebase for the past couple of months but never used any tool to manage such projects and the only 2 tools I heard of were NX & Turborepo, thanks to fireship's youtube video.

%[https://www.youtube.com/watch?v=9iU_IE6vnJ8]

Why Turborepo??

So after doing some more research, I decided to go with Turborepo as it seemed easier to get into and the docs have a dark theme by default. 😶

Heard a lot of great stuff about NX as well but it seemed to have a higher learning curve and I didn't wanna make my small project more complicated than it needs to be.

Features (That I experienced)

TBH I still haven't explored most of the features of Turborepo yet but I will try to give a brief of things that I have learned and how it's implemented on my project. If you wanna learn things in detail do checkout the docs.

Here are a few things I explored so far:

File Structure

Once you create a new project by running

npx create-turbo@latest

, your project should have 2 root level folders apps & packages. There's also a turbo.json file, which I believe can be used to config Turborepo.

All your different projects will live in apps and things like components, configs will live in the packages folder.
In my case, I have my docs, landing, and web app inside apps and my Supbabase local setup, shared components, and config inside packages.

This just felt "right". I don't have to think about creating a proper file system, Turbo just did this for me, and with this structure, I can easily share my brand components with all projects.

Caching

Production build takes time and sometimes when you are build a large project, it can take a lot of time! Thanks to turbo my project seemed to build very fast after the first initial build.
I haven't found any drawbacks yet, but so far this caching feels really helpful.

Pipelining

There's a cool diagram on Turborepo's docs on how you can specify your tasks relationships to make your tasks executions fasters. 🏃

Now I haven't used Lerna before, so I can't really differentiate. But based on this diagram and theory my tasks executions are faster right? Idk I will let you know more when I know more. 😶

There are also some other features like Scoped Tasks, Remote Caching which I haven't tried yet. Will definitely update this blog when I do. You can check out a detailed Demo and Walkthrough video by Jared Palme if are interested to learn more.

%[https://www.youtube.com/watch?v=YX5yoApjI3M]

Self Promotion

Ok. Self Promotion time, Join my newsletter I guess.😶

My first "official" SAAS is now live!!🙌 Introducing studymerge.com. Well.. beta.studymerge.com

Arif Hossain — Sat, 19 Mar 2022 00:47:28 +0000

Last week I promised myself and Twitter that I will launch the beta version of my product StudyMerge on 1st merch. Now I'm glad to say I kept my promise. Also, I managed to get 32 people to join the waitlist. 💃💃

Thanks to everyone who joined and willing to try out this early version of the software. 🙏🏻

Anyways, I much I wanted to, I couldn't manage the time to build a proper landing page yet. So I'm writing this blog to kind of explain the product and its features.

Elevator Pitch

At its core, StudyMerge is a software targeting students to study, work and collaborate with classmates efficiently.

How does it work?

Well, that's a good question. In fact, that is why I'm writing this blog. 😬

Session and Participant. These 2 core features work together to make collaboration between you and your classmates.

Session

The product is built around sessions and for each session, you can have multiple topics. You can think of it as tasks and sub-tasks.

Here I'm using one of my classes as a session and things that I need to study for the class as topics. Once you have some sessions that you created or participated in, Your homepage should kind of look like this.

Perticipant

Now once you have a session, You can invite your classmates into the session. From the top right corner, you should have a menu button to add participants. (Before adding someone to a session, make sure you have them on your friend list)

Great, now that you invited your friends to your session, they should get an invitation which they can accept or reject.

If they accept, they will get a copy of your session blueprint and now you can both track each other's session progress from the participants page.

That's it. that's all the features that are live right now. Hopefully, I explained it well and made you somewhat existed to try out the product.

Tech Stack

I tried my best not to overengineer this project as it would have taken me 2years to launch the beta. 😶
So I choose Supabase for my primary backend and hand's down it was a great decision. On the Frontend, I primarily used Typescript, NextJS, and ChakraUI.

What next?

I have a couple of new features that I'm working on right now which will be live soon.

Discussion: In every session there will be a Discussion panel where session participants will be able to discuss or have a group chat related to the session.
File Upload: I guess it's self-explanatory, Basically you will be able to share notes/attachments /questions or any type of files with your session participants.
Google Calendar: I love Google Calendar, I think it's one of the best tools available to manage your time. So I'm looking forward to integrating Google Calendar with StudyMerge. So students can schedule sessions, classes, or group study time.

How does the pricing work?

Well TBH I'm sure about the pricing yet, The product will be free in the beta phase. Later I might add pricing for "File Uploads" and some additional features? IDK... Will see.

Need your feedback

So what do you think? Definitely the next 🦄?

Jokes aside (if you can call it a joke 😶), I would really love to get your feedback, especially if you are a student. Visit stduymerge.com to try it out. For any kind of feature request, bug report or feedback email me at arif@studymerge.com.

Also, I'm thinking of making this series where I may post 1/2 blogs each month updating you guys about both the business and tech sides of the project. "Build in public" you may say.
Do subscribe to my newsletter. ✌️