Shadcn ui nedir
Geleneksel Kütüphane Değil
shadcn/ui'nin en büyük farkı, geleneksel her şey dahil bir kütüphane olmamasıdır. Tüm kütüphaneyi kurmak yerine, projelerinize tek tek bileşenleri kopyalarsınız.
Bu yaklaşım, tam özelleştirme imkanı sağlar ve ihtiyaç duymadığınız gereksiz bağımlılıkları ve öğeleri ortadan kaldırır.
Tam Kontrol
Ham kodu kopyaladığınız için, stil ve işlevsellik üzerinde tam kontrol sahibisiniz. Bileşenlerin işlevselliğini özel ihtiyaçlara göre değiştirmek veya genişletmek, geleneksel kütüphaneler kullanırken ortaya çıkan sorunlarla gelmez.
React & Next.js için Tasarlandı
shadcn/ui, React, Next.js, Astro, Remix, ve Gatsby ile kullanım için geliştirilmiştir. Sunucu tarafı işleme (SSR) ve statik site oluşturma (SSG) desteği de sunar.
Bileşen Kalitesi
Koleksiyon, geniş bir yelpazede iyi tasarlanmış bileşenler sunar. Formlar ve düğmelerden daha karmaşık modellere ve açılır menülere kadar.
Her bileşen, durum yönetimi ve erişilebilirlik özellikleri dahil olmak üzere en iyi tasarım uygulamaları göz önünde bulundurularak oluşturulmuştur.
shadcn/ui nasıl kullanılır
İşte shadcn'i Next.js ile nasıl kullanacağınıza dair bir örnek.
1. Proje oluştur
Yeni bir Next.js projesi oluşturmak veya mevcut bir projeyi ayarlamak için init komutunu çalıştırın:
npx shadcn@latest init
Varsayılanlar için -d bayrağını kullanabilirsiniz, yani css değişkenleri için new-york, zinc ve yes.
npx shadcn@latest init -d
2. components.json dosyasını yapılandır
components.json dosyasını yapılandırmak için birkaç soruya cevap vereceksiniz:
Hangi stili kullanmak istersiniz? › New YorkHangi rengi temel renk olarak kullanmak istersiniz? › ZincRenkler için CSS değişkenleri kullanmak istiyor musunuz? › hayır / evet
3. İhtiyacınız olan bileşenleri bulun
Şimdi projenize bileşen ekleyebilirsiniz. İhtiyacınız olan bileşenleri bulmak için shadcn bileşen dokümantasyonuna gidin.
Bir bileşen eklemek basittir, sadece ekle komutunu kullanın, örneğin, düğme bileşeni:
npx shadcn@latest add button
shadcn ui bileşenlerini kullanmanın başka bir yolu da Vercel'deki v0'yi kullanmaktır. Bu, shadcn bileşenlerini kullanarak web sayfaları oluşturan generatif yapay zekadır.
shadcn/ui'nin Avantajları
1. Hafif
Sadece ihtiyaç duyduğunuz bileşenleri kopyalayarak, projeniz hafif kalır ve kod tabanınız gereksiz şişkinliklerden arınır.
2. Özelleştirilebilir
shadcn/ui, her bileşende tam kontrol sağlar. Bu özgürlük, özellikle belirli marka veya tasarım gereksinimlerine sahip projeler için değerlidir.
3. Açık Kaynak ve Ücretsiz
shadcn/ui tamamen açık kaynaktır. Geliştiriciler projeye katkıda bulunabilir veya kendi özel kullanım durumları için uyarlayabilir. Herhangi bir lisans kısıtlaması olmadan ücretsizdir, bu da hem profesyonel hem de kişisel projeler için harika bir araç haline getirir.
Shadcn ui kullanım alanları
1. Yüksek Özelleştirilmiş Arayüzler
Eğer projeniz arayüzünüzün görünüm ve hissine detaylı kontrol gerektiriyorsa, shadcn/ui bileşenleri ihtiyacınıza göre ayarlamanıza olanak tanır.
2. Next.js Projeleri
Next.js uygulamaları üzerinde çalışan geliştiriciler, shadcn/ui ile mükemmel bir uyum yakalayacaktır, özellikle SSR ve Tailwind CSS uyumluluğuyla.
3. Tasarım Sistemi Prototipleme
Kendi tasarım sistemlerini oluşturan ekipler için, shadcn/ui mükemmel bir başlangıç noktası sunar. Bileşenleri özelleştirmenin esnekliği, yeniden kullanılabilir bileşenler setini prototiplemeyi ve iyileştirmeyi kolaylaştırır.
Shadcn ui Figma kiti
Pietro Schirano tarafından yapılmış mükemmel bir Figma UI Kiti var. Tüm bileşenleri özelleştirilebilir özelliklerle, tipografi vb. içerir. Buradan kopyalayın.
Sonuç
shadcn/ui, hafif ve kullanıma hazır ön uç bileşenleri arayan geliştiriciler için harika bir seçenektir. Geleneksel anlamda bir UI kütüphanesi olmasa da, tipik bir web projesi için ihtiyaç duyabileceğiniz tüm bileşenlere sahiptir.
Ortalama UI kütüphanelerini ayarlamak için kafa karıştırıcı detaylara gerek duymak yerine, ihtiyaçlarınıza göre stilize edip değiştirebileceğiniz her bileşenin tam kaynak kodunu elde edersiniz.
Daha fazla bilgi için GitHub'da shadcn/ui'i ziyaret edin.
