Yazar, bir web uygulamasındaki radyo düğmelerinin görsel tasarımını güncelleme göreviyle karşılaştığında, bunun basit bir iş olacağını düşündü. Sonuçta, radyo düğmeleri 30 yıldır var olan yerleşik bir HTML öğesidir ve <input type="radio"> ile kolayca oluşturulabilir. Ancak, projenin kod tabanını incelediğinde, radyo düğmelerinin Shadcn'den gelen <RadioGroup> ve <RadioGroupItem> adlı iki React bileşeni tarafından desteklendiğini fark etti.
Shadcn, web sitelerinde kullanılmak üzere önceden oluşturulmuş UI bileşenleri sağlayan bir framework'tür. Geleneksel framework'lerin aksine, Shadcn bileşenleri doğrudan projenin kod tabanına kopyalanır. Yazar, Shadcn'den dışa aktarılan radyo düğmesi kodunu incelediğinde şaşırdı: üç farklı import ve 45 satır kod içeriyordu. Üstelik, sadece bir daire çizmek için üçüncü taraf bir ikon kütüphanesi olan lucide-react'ı kullanıyordu. Tüm stil, 30'dan fazla Tailwind sınıfı ile yapılmıştı. Bu durum, yazarın basit bir HTML öğesinin bu kadar karmaşık bir şekilde ele alınmasına dair merakını ve rahatsızlığını artırdı.
Daha da derinlemesine incelediğinde, Shadcn bileşenlerinin aslında Radix adlı başka bir kütüphaneden bileşenleri içe aktardığını keşfetti. Radix de benzer şekilde önceden oluşturulmuş UI bileşenleri sağlayan bir framework'tü. Bu durum, yazarın "Bu kadar karmaşıklığın amacı ne?" sorusunu sormasına neden oldu ve basit bir radyo düğmesi için birden fazla katmanlı soyutlamanın ve bağımlılığın gereksiz olduğunu vurguladı.
Modern UI framework'lerinin basit HTML öğelerini bile aşırı karmaşık hale getirme eğilimi, geliştirme sürecini gereksiz yere uzatabilir ve kod tabanının şişmesine yol açabilir.