Tasarım & UX Skill
Accessibility Compliance
Ekran okuyucu desteği, klavye navigasyonu ve mobil erişilebilirlik içeren WCAG 2.2 AA uyumlu arayüzler oluşturmak için bir uygulama araç seti.
₺369
Shadcn UI
shadcn/ui ile erişilebilir ve markaya uygun arayüz inşa edin: Radix primitive'leri, Tailwind CSS ve class-variance-authority, component'lerin node_modules'a değil doğrudan reponuza kopyalandığı copy-paste mimarisiyle bir araya gelir.
Her component sizin olduğu için upstream kırıcı değişiklikler size dokunamaz, kullanılmayan component'ler bundle'ı şişirmez. Tema token'larından RSC sınırlarına kadar, hızlıca tutarlı bir component kütüphanesi yayına almanız için disiplinli bir yol sunar.
₺369 tek seferlik
Bir kit içine ekle → Fiyatlara KDV (%20) dahildir. · Gerçek ajans işinden çıkarıldı · tek seferlik, kilit yok
- Tür Skill
- Kategori Tasarım & UX
- Teslimat E-posta · anında
- Lisans Tek seferlik
Çalışmanın içinden · kara kutu yok
Satın almadan önce işin kendisini gör.
Skill, kodun projeye kopyalandığı ve sahipliğin projede kaldığı shadcn/ui üzerinde component kütüphanesi kurarken fiilen şu döngüyü çalıştırır, kara kutu yok:
- Hiçbir şeye dokunmadan önce projeyi değerlendirir: components.json var mı, hangi stil seçili (new-york veya default), components/ui altında şu an ne yaşıyor, globals.css'te tema token'ları tanımlı mı.
- Sadece gereken bileşenleri CLI ile ekler (npx shadcn add button card dialog), --all bayrağı asla kullanılmaz; copy-paste mimaride kaynak kod projeye iner ve kullanılmayan bileşen bundle'ı şişirmez.
- Radix primitive'lerinin üstüne shadcn sarmalayıcıları ile inşa eder; ARIA rolleri, klavye navigasyonu ve focus trap elle yazılıp kaçınılmaz şekilde atlanmak yerine doğru varsayılan olarak gelir.
- Varyantları cva() ile tanımlar, sınıfları cn() yardımcısıyla (clsx artı tailwind-merge) birleştirir; çakışan Tailwind sınıfları öngörülebilir çözülür, string birleştirme kod tabanına hiç girmez.
- Müşterinin markasını globals.css'te HSL CSS değişkenlerine ve .dark override bloğuna haritalar; sabit hex renk yasaktır, böylece tam marka değişimi component yeniden yazımı değil token değişimi olur.
- Doğrulama kontrol listesiyle kapanır: RSC sınırları doğru çizilmiş mi (overlay'ler client, statik kısımlar server), asChild link-içinde-buton gibi geçersiz iç içe HTML'i önlüyor mu, koyu mod geçişi, klavye navigasyonu ve ekran okuyucu testi geçiyor mu.
Tek güç kaynağı. 6 hat dışarı.
shadcn-ui · çekirdek
çekirdek aktif · 6 hat
- ✓ next.js veya vite projes…
Next.js veya Vite projesine shadcn component'i ekleme
- ✓ css değişkenleri ve kara…
CSS değişkenleri ve karanlık mod ile tema sistemi kurma
- ✓ react-hook-form ve zod ile
react-hook-form ve zod ile form yapıları kurma
- ✓ doğru rsc ve 'use client'
Doğru RSC ve 'use client' sınırını çizme
- ✓ datatable, combobox ve d…
DataTable, Combobox ve DatePicker bileşik component'leri oluşturma
- ✓ token'ları component kod…
Token'ları component koduna dokunmadan müşteri markasına uyarlama
Aldıkların sende kalır.
Zamanı ileri sar. Ne kaldığını izle.
Sonsuza dek
Sahip olmak tam olarak bu.
Kiralık yığın
yapay zekâ yazım aracı: abonelik
süresi doldu · erişim gittianaliz paketi: abonelik
süresi doldu · erişim gittitasarım platformu: abonelik
süresi doldu · erişim gitti(geriye bir şey kalmadı)
Senin ocağın
-
Her component'in tam sahipliği: upstream kırıcı değişiklik riski yok
lisans: kalıcı -
Erişilebilirliği Radix sağlar: klavye gezinme, focus trap, ekran okuyucu rolleri
lisans: kalıcı -
Tek dosyada CSS değişkenlerini değiştirerek tüm marka görünümünü değiştirin
lisans: kalıcı -
Daha küçük bundle: yalnızca eklediğiniz component'ler yayına çıkar
lisans: kalıcı
abonelikler biter · tapular bitmez
Kutudaki her şey.
Bir parçayı eline al. Çalışırken izle.
CLI iş akışı: init, add, --all, --overwrite ve upstream ile diff
6 parça · tek çalışan sistem · e-postayla anında teslim
Bu herkes için dövülmedi.
- Araç kiralamayı sahip olmaya tercih ediyorsan, sana göre değil.
- Yığınını senin yerine başkası yönetsin istiyorsan, sana göre değil.
- Tahmin etmekten memnunsan, sana göre değil.
Next.js + React + Tailwind stack'inde, tam kontrol ettikleri erişilebilir ve temalanabilir bir component kütüphanesi isteyen frontend ekipleri için.
o zaman bu senin için dövüldü.Hangi AI ile çalışır
Tasarımı gereği evrensel: her yapay zekada çalışır. Açık Agent Skills + MCP biçiminde gelir (Claude’da yerleşik); ChatGPT, Gemini, Cursor ve Copilot aynı dosyaları kendine uyarlar.
- Claude Yerleşik biçim
- ChatGPT Açık standartla uyarlanır
- Gemini Açık standartla uyarlanır
- Cursor Açık standartla uyarlanır
- Copilot Açık standartla uyarlanır
Aklındakini yakala.
hava temizlendi. seninle ocak arasında hiçbir şey kalmadı.
bir kıvılcım yakala: ocak cevaplar
-
Vue ve düz CSS kullanıyoruz; bu paket bize uyar mı?
React ve Tailwind yığınını hedefler, Next.js veya Vite üzerinde. shadcn/ui bileşenleri Tailwind ile stillenen React kodudur ve varyantlar class-variance-authority üzerine kuruludur. Bu yığının dışında desenler taşınmaz.
-
Kendim npx shadcn add çalıştırmaktan fazlası ne?
CLI bileşeni projeye getirir; bu paket sonrasında kırılanları kapsar. 50'den fazla bileşen için RSC ve 'use client' sınır matrisi, geçersiz iç içe HTML'i önleyen asChild Slot deseni, üç katmanlı tema token hiyerarşisi ve upstream değişikliklerine karşı diff akışı sunar.
-
Kendini güncelleyen, barındırılan bir bileşen kütüphanesi mi bu?
Hayır. Kopyala-yapıştır mimarisi bilinçli olarak tam tersi: bileşenler sizin reponuzda yaşar ve asla kendiliğinden güncellenmez, upstream kırıcı değişiklikler size dokunamaz. Upstream iyileştirmelerini almak bilinçli bir diff ve merge kararıdır.
-
Nasıl teslim edilir?
Satın alımdan hemen sonra e-posta ile iletilir, kuruluma hazır, anında indirilir; bekleme yok.
-
Tek seferlik mi, abonelik mi?
Tek seferlik alımdır; abonelik veya gizli ücret yoktur. Fiyata KDV (%20) dahildir.
-
İade alabilir miyim?
Dijital ürün olduğu için indirildikten sonra iade yapılmaz. Bu yüzden ne içerdiğini ve kime uygun olduğunu burada açıkça paylaşıyoruz.