shadcn/ui ve Merid: Dürüst Bir Karşılaştırma
shadcn/ui ve Merid: repoya kopyalanan kaynak mı, sürümlü bir paket mi? Tailwind ile sade CSS token'ları ve yapay zekanın yazdığı arayüzde tutarlılık.
Merid'i biz geliştiriyoruz. Bu sayfalar her kütüphaneyi kendi kullanıcılarının anlatacağı gibi anlatmaya çalışır ve dayandığı kaynakları verir. Yanlış ya da eskimiş bir bilgi görürsen issue aç, düzeltelim. Hata bildir
Merid'i biz geliştiriyoruz; bunu akılda tutarak oku. shadcn/ui'ı kendi kullanıcılarının anlatacağı gibi anlatmaya ve Merid'in geride olduğu yerleri açıkça söylemeye çalıştık.
Kısaca: shadcn/ui sana sahiplenmen için kaynak kod verir. Merid ise sabit bir tasarım sözleşmesi olan, sürümlü bir paket verir. İkisi de sakin, modern arayüzler üretir. Fark, tasarım kararlarını kimin tuttuğunda: senin repon mu, kütüphane mi?
Bir bakışta
| shadcn/ui | Merid | |
|---|---|---|
| Ne kuruyorsun | Component kaynağını repona kopyalayan bir CLI | npm'den @meridui/react |
| Stil | Tailwind CSS utility sınıfları | Üç cascade layer'da tek bir sade CSS dosyası |
| Tailwind gerekli mi | Evet | Hayır; Tailwind v4 ile birlikte çalışır |
| Primitive'ler | Radix UI ya da Base UI | Kendi yazdığı; konumlandırma için Floating UI |
| Token'lar | Tailwind teması + CSS değişkenleri | Her değer bir --mrd-* custom property |
| Provider | Yok | Yok |
| Tema kapsamı | Kökte class ya da attribute; component bazında düzenleme | Herhangi bir alt ağaçta data-theme, data-accent, data-density, dir |
| Güncelleme | CLI'ı yeniden çalıştır, diff'leri birleştir | npm update |
| Özelleştirme | Kaynağı düzenle | Token'ları ez ya da CSS ekle; kaynak upstream'de kalır |
| Erişilebilirlik | Radix/Base UI davranışını devralır | WCAG 2.2 AA hedefi; CI'da axe; forced colors |
| AI araçları | Registry, MCP sunucusu, v0 desteği | Repoda yazılı tasarım sözleşmesi |
| Component sayısı | Geniş temel set + büyük topluluk registry'si | 46 |
| Olgunluk | Çok yaygın | 0.1, bağımsız geliştiriliyor |
| Lisans | MIT | MIT |
Kaynaklar: shadcn/ui dokümanları, Merid README.
Asıl fark: tasarımın sahibi kim?
shadcn/ui'da components/ui/button.tsx senin dosyandır. Padding'i değiştirebilir, varyant ekleyebilirsin; upstream'deki kimse onu bozamaz. Öte yandan her düzenleme bir fork'tur. Döngüde yapay zeka ajanları varsa, "bu butonu header'a uydur" denen bir model çoğu zaman doğrudan butonu değiştirir ve birkaç ay sonra ayarlar sayfasındaki buton ile dashboard'daki buton aynı buton olmaktan çıkar.
Merid'de Button node_modules içinde durur. Değerleri bir tasarım sözleşmesindeki token'lardan gelir. Görünümü token'ları değiştirerek değiştirirsin:
:root {
--mrd-accent: #0f766e;
}shadcn/ui'ın önde olduğu yerler
- Kapsam. Temel set, block'lar ve topluluk registry'si neredeyse her şeyi karşılar. Merid'de combobox, date picker ya da grafik yok.
- Ekosistem. Registry, MCP sunucusu ve v0 desteği; modeller shadcn/ui kodunu çok iyi tanır.
- Tam kontrol. Her satır senin.
Hangisini seçmeli?
shadcn/ui'ı seç: her satıra sahip olmak istiyorsan, ekibin Tailwind'e hakimse, geniş kapsama hemen ihtiyacın varsa.
Merid'i seç: npm ile güncellediğin sürümlü bir paket, specificity savaşı olmadan ezilebilen sade CSS, çok sayıda katkıcıyı (insan ya da yapay zeka) tek tasarımda tutan sıkı token'lar ve hazır kapsamlı tema istiyorsan; 0.x bir kütüphaneyi benimsemek de sorun değilse.
İkisini birlikte kullan: Merid component'leri ile layout için Tailwind utility'leri desteklenen bir kurulum.
İlgili: shadcn alternatifi · MUI ve Merid