Tema özelleştirilebilir bir CMS yönetim paneli oluşturma: shadcn/ui + Tailwind v4 ile 50’den fazla bileşenden alınan dersler

Bir Laravel CMS geliştirdim; bu sistemin tüm yönetim paneli shadcn/ui kullanılarak inşa edildi. 50’den fazla bileşen, 183 sayfa, üç tema ile çalışma zamanı değiştirme yapılabiliyor, build aşamasına gerek kalmadan. İşte bu proje içinde en önemli bulgularım.

Neden shadcn? Material UI veya Ant Design’a Göre

Karar verici faktör: shadcn bileşenleri benim kodum. Bir Button varyantını değiştirmek ya da DataTable‘ı genişletmek istediğimde, sadece dosyayı düzenliyorum. npm overrides, className savaşları ya da vendor PR kuyrukları yok.

Ticaret: shadcn upstream yeni bir desen gönderdiğinde, bunu manuel olarak taşıyorum. Güncellemeler için çeyrek başına yaklaşık 1 gün ayırmayı hedefliyorum.

Ders 1: Layout Primitifleri 100 Sayfa CSS Tasarrufu Sağlıyor

Her yerde kullanılan üç bileşen — PageContainer, Card, Stack. Sadece PageContainer ~40 sayfa düzeyindeki layout kararını ortadan kaldırdı. Üç iyi seçenek, 10 esnek seçeneği geçer.

Ders 2: Tailwind v4 + CSS Değişkenleri = Build Olmadan Temalar

@theme {
  --color-primary: oklch(0.55 0.27 262);
}
[data-theme="purple"] {
  --color-primary: oklch(0.55 0.27 304);
}

Temaları değiştirmek için:

document.documentElement.dataset.theme = 'purple';

Hiçbir paket değişimi veya yeniden render söz konusu değil. CSS değişkenleri değiştirilip tüm shadcn bileşenleri güncelleniyor çünkü bunlar sabit bir renk yerine değişkeni temel alıyor. Temayı ayarlamanın zor olacağını düşünmüştüm — ama sadece bir öğle saati sürdü.

Ders 3: Tek Bir Sidebar Bileşeni, Farklı Veriler

shadcn’in Sidebar bileşeni, admin navigasyonu ile doküman navigasyonunu aynı bileşenle yönetmeye yeterince esnek. Veri sayfaya göre değişiyor; bileşen paylaşılıyor. Bu durum, 183 sayfalık bir admin panelinin tek bir uygulama gibi hissettirmesini sağlıyor.

Ders 4: DataTable En Az Değer Biçilen shadcn Bileşeni

Her liste görünümü — Gönderiler, Sayfalar, Medya, Kullanıcılar, Formlar — aynı DataTable kapsayıcısını kullanıyor. Sunucu tarafı sayfalama, sıralama, satır seçimi, toplu işlemler, arama gibi işlevler var. columns dizisi tek sayfa düzeyindeki mantık.

Ders 5: TypeScript Sıkılığı Vazgeçilmezdir

shadcn mükemmel tipler sağlıyor. Bunları gevşetmeye çalışmayın. Her sayfa düzeyindeki bileşen, ‘aşikar’ olduğunda bile props türünü açıkça beyan eder.

Neler Çalışmadı

• Tiptap zengin metin editörü olarak. Serbest metin için harika, ancak yapılandırılmış alanlar için yanlış. Tiptap’ın temelinde özel bir blok modeli ile yeniden inşa ettim — daha iyi bir değerlendirme ile 3 haftayı atlamış olurdum.
• Tüm 50 shadcn bileşenini başlangıçta kopyalamak. Sadece 30’u gerçekten kullanıldı. İhtiyaç duyulduğunda kopyalayın.
• Tailwind v3 → v4 yapı ortasında. ~4 saatlik kırılma değişiklikleri. Bugün v4 ile başlamalısınız.

Yeniden Neden shadcn Kullanırım

• Özel tasarım gerektiren her şey
• Bakım maliyetinin haklı olduğu uzun ömürlü ürünler
• Tip güvenceli tam yığın uygulamalar

Kullanmayacağım: geçici prototipler (Mantine kullanın), pazarlama siteleri (sadece Tailwind daha hızlıdır).

Kaynak: https://github.com/hpakdaman/unfoldcms
Canlı demo: https://unfoldcms.com/demo

Ben Hamed — UnfoldCMS’i, WordPress, Contentful veya Strapi/Payload’ın Laravel mağazama uymadığı için inşa ettim. Açık eleştirilerinizi bekliyorum.