RetroUI 2.0'ı tanıtıyoruz - daha büyük, daha cesur, daha iyi

Aylardır karanlıkta inşa ediyoruz. Bugün ışıkları yakıyoruz.

RetroUI 2.0 burada ve bu, şimdiye dek yayınladığımız en büyük güncelleme. Bu yalnızca bir sürüm numarası değişikliği değil: RetroUI'nin neler yapabildiğinin ve onunla nasıl etkileştiğinizin eksiksiz bir evrimi.

RetroUI'yi başlattığımızda amaç basitti: geliştiricilere her şeye benzemeyen bir UI kütüphanesi vermek. Cesur tasarımlar, neobrütalist estetik ve projelerinizi öne çıkaran bileşenler. Bu vizyon değişmedi. Peki bunu nasıl hayata geçirdiğimiz? İşte o çarpıcı biçimde evrildi.

Yeniliklere dalalım.

🎨 Base UI desteği - istediğin temel

İlk günden beri en çok istenen özelliklerden biri Base UI desteğiydi ve sonunda burada.

Base UI nedir?

Base UI, MUI ekibi tarafından geliştirilen, stilsiz ve erişilebilir React bileşenlerinden oluşan bir kütüphanedir. Onu Material UI'a headless ve çerçeveden bağımsız alternatif olarak düşünün: dayatılmış hiçbir görsel görüş olmadan tüm davranışı ve tüm erişilebilirlik mantığını edinirsiniz.

Bu RetroUI için neden önemli

Şimdiye dek RetroUI bileşenleri Radix UI ilkelleri üzerine kuruluydu (ki bunlar mükemmeldir, yanlış anlaşılmasın). Ama Base UI yeni olanaklar açıyor:

• Çerçeve esnekliği: Base UI, React, Next.js ve diğer modern çerçevelerde sorunsuz çalışır
• Daha iyi tree-shaking: ince ayarlı bir optimizasyon sayesinde daha hafif paketler
• Güçlendirilmiş erişilebilirlik: Base UI'ın erişilebilirlik ilkelleri iyice sınanmıştır ve kutudan çıktığı gibi WCAG uyumludur
• Geleceğe dönük mimari: React Server Components ve modern React ekosistemi için tasarlanmış

Bu sizin için ne anlama geliyor? RetroUI bileşenleri artık her zamankinden daha performanslı, daha erişilebilir ve daha esnek. Üstelik hepsi, sevdiğiniz cesur ve ayırt edici tasarım dilinden vazgeçmeden.

Kopyala// Now powered by Base UI under the hood
import { Button } from '@/components/neobrutalism'
 
<Button variant="primary">
  Still bold. Still RetroUI. Now even better.
</Button>

🌐 Tek site, tek vizyon - OS ve Pro birleşti

Bizi rahatsız eden bir şey vardı: RetroUI OS (ücretsiz) ve RetroUI Pro için ayrı siteler tutmak... parçalanmış hissettiriyordu. Topluluğumuzu bir araya getirmek yerine bölüyormuşuz gibi.

Artık değil.

Tümüyle yeniden tasarlanmış bir site

Tüm RetroUI sitesini baştan sona yeniden inşa ettik ve OS ile Pro'yu tek ve tutarlı bir deneyimde birleştirdik. İşte yenilikler:

Birleştirilmiş bir bileşen kütüphanesi

Tüm bileşenleri, ücretsiz ve pro, tek bir yerde inceleyin. Neyin mevcut olduğunu görmek için siteler arasında gidip gelmek yok. Her şey açıkça işaretli, böylece neyin ücretsiz, neyin premium olduğunu bilirsiniz.

Daha temiz bir gezinme

İhtiyacınız olanı bulmak daha hızlı ve daha sezgisel. Bileşenler, blocks, şablonlar, dokümanlar: her şeyin mantıklı bir yeri var.

Daha cilalı bir tasarım

Vaaz ettiğimizi uyguluyoruz. Yeni site daha cesur, daha hızlı ve daha rafine. Estetiğe tam olarak bağlandığınızda RetroUI'nin neler yapabileceğinin bir vitrini.

Daha iyi bir mobil deneyim

Eski site mobilde çalışıyordu. Yenisi mobilde parlıyor. Doğru yapılmış responsive tasarım, nativ hisseden dokunmatik etkileşimlerle.

En iyi yanı? Hepsi RetroUI bileşenleriyle çalışıyor. Kendi yemeğimizi kendimiz yiyoruz: sitede gördüğünüz her bileşen, projelerinizde kullanabileceğiniz bir şey.

📚 Gerçekten yardımcı olan dokümantasyon

Açık konuşalım: dokümantasyon çoğunlukla sonradan akla gelir. Bu kez değil.

RetroUI dokümanlarını, hayatınızı kolaylaştıran işlevlerle baştan aşağı yeniledik:

Markdown olarak kopyala

Kendi projenizin dokümantasyonu üzerinde mi çalışıyorsunuz? RetroUI hakkında bir yazı mı yazıyorsunuz? Artık bir bileşenin kodunu tek tıkla Markdown olarak kopyalayabilirsiniz.

Şunlar için kusursuz:

• Kendi bileşenlerinizin dokümantasyonunu oluşturmak
• Öğreticiler ve kılavuzlar yazmak
• Markdown tabanlı araçlarda kod örnekleri paylaşmak (Notion, GitHub vb.)

Yapay zekâ destekli dokümantasyon

Yapay zekâ yardımını doğrudan dokümanlara entegre ettik. Bir bileşeni nasıl özelleştireceğinize dair bir sorunuz mu var? API'yi anlamanız mı gerekiyor? Yapay zekâ, sayfalarca dokümanı elemekten daha hızlı yanıt bulmanıza yardımcı olur.

Sorabileceklerinize örnekler:

• „Button bileşenine özel renkler nasıl kullandırırım?“
• „Card bileşeni hangi props'ları kabul eder?“
• „Modal'ı formlarla kullanma örnekleri göster“

Sanki yanınızda 7/24 hazır bir RetroUI uzmanı varmış gibi.

İyileştirilmiş kod örnekleri

Artık her bileşende şunlar var:

• Etkileşime girebileceğiniz canlı önizlemeler
• Farklı kullanım senaryolarını gösteren çeşitli varyantlar
• Doğru içe aktarmalarla kopyala-yapıştır için hazır kod
• Daha güvenli tipleme için TypeScript örnekleri
• Her bileşenin a11y'yi nasıl ele aldığını açıklayan erişilebilirlik notları

Artık tahmin yok. Artık kaynak kodunu eşelemek yok. Yalnızca sizi daha hızlı ilerleten net ve yararlı örnekler.

🧱 100'den fazla yeni blocks - her zamankinden daha hızlı inşa edin

Bileşenler harika. Ama bazen yalnızca düğmeler ve kartlar değil, tüm bölümler gerekir.

İşte blocks tam da burada devreye girer.

blocks nedir?

blocks, projenize bırakabileceğiniz hazır bölümlerdir: hero bölümleri, fiyat tabloları, özellik ızgaraları, referanslar, CTA'lar ve daha fazlası. Tümüyle responsive, erişilebilir ve özelleştirmeye hazırdır.

2.0'da neler yeni?

Aklınıza gelebilecek her kategoride 100'den fazla yeni blocks ekledik:

Hero bölümleri

• Minimalistten full-bleed'e 15'ten fazla yeni hero varyantı
• Animasyonlu arka planlar, bölünmüş ekran yerleşimleri ve videolu hero'lar dahil

Özellikler ve avantajlar

• Simge tabanlı özellik ızgaraları
• Ekran görüntüsü vitrinleri
• Adım adım kılavuzlar
• Karşılaştırma tabloları

Fiyat tabloları

• Basit 2 sütunlu yerleşimlerden karmaşık 4 kademeli fiyatlandırmaya
• Faturalandırma anahtarı (aylık/yıllık)
• Özellik karşılaştırma matrisleri

Referanslar

• Izgara yerleşimleri, karuseller ve mozaik tasarımlar
• Video referanslar
• Sosyal kanıt için logo duvarları

CTA'lar ve dönüşümler

• Bülten kayıtları
• Bekleme listesi formları
• Uygulama indirme bölümleri
• Karakterli iletişim formları

Üst bilgiler ve gezinme

• Mega menüler
• Mobil öncelikli gezinme kalıpları
• Kaydırma efektli yapışkan üst bilgiler

Alt bilgiler

• Çok sütunlu alt bilgiler
• Minimal tek satırlık alt bilgiler
• Bülten entegre alt bilgiler

Her block, aynı cesur RetroUI estetiğiyle inşa edilmiştir: kalın kenarlıklar, sert gölgeler, canlı renkler ve asimetrik yerleşimler. Kaynaşmak için değil, öne çıkmak için tasarlanmışlardır.

Kopyala// Drop in a complete hero section in seconds
import { HeroBold } from '@/components/blocks'
 
<HeroBold
  title="Your Product Name"
  subtitle="Ship faster with bold design"
  cta="Get Started"
/>

🌙 Yeni şablon: Karanlık Mod Dev Aracı Panosu

Şablonlar, her şeyin bir araya geldiği yerdir: bileşenler, blocks ve tasarım felsefesi eksiksiz bir uygulamada birleşir.

En yeni şablonumuzu tanıtıyoruz: Dark Mode Dev Tool Dashboard.

Bu nedir?

Geliştirici araçları, SaaS platformları ve yönetim panelleri için inşa edilmiş, karanlık modu önceleyen, tam donanımlı bir pano. RetroUI'nin cesur estetiğiyle üretime hazır bir uygulama kurmak için ihtiyacınız olan her şey.

Neler içeriyor?

Eksiksiz bir pano yerleşimi

• Daraltılabilir menülü kenar gezintisi
• Arama ve kullanıcı profili içeren üst bilgi
• Mobilde, tablette ve masaüstünde çalışan responsive tasarım

Hazır sayfalar

• Metrikler ve grafiklerle pano genel bakışı
• Kullanıcı yönetimi (liste, ayrıntı, düzenleme)
• Form örnekleri içeren ayarlar sayfası
• API dokümantasyon sayfası
• Faturalandırma ve abonelik yönetimi

Doğru yapılmış karanlık mod

• Yalnızca ters çevrilmiş renkler değil: bilerek karanlık arka planlar için tasarlanmış
• Okunabilirlik için yüksek kontrast
• Karanlık arka planlarda göze çarpan canlı vurgu renkleri

Üretime hazır işlevler

• Kimlik doğrulama ekranları (giriş, kayıt, şifremi unuttum)
• Hata durumları ve boş durumlar
• Yükleme iskeletleri
• Toast bildirimleri
• Modal iletişim kutuları ve onaylar

Geliştirici dostu

• TypeScript ile inşa edilmiş
• Belgelenmiş bileşen yapısı
• Özelleştirmesi ve genişletmesi kolay
• Next.js App Router kurallarını izler

Bu bir oyuncak şablon değil. Gerçek ürünler üzerine inşa edebileceğiniz bir temel. İster yeni bir SaaS başlatın, ister dahili bir araç kurun, ister bir geliştirici platformu oluşturun; bu şablon size baştan bir avantaj verir.

Ve evet, ortalıktaki diğer pano şablonlarının hiçbirine benzemiyor. Amaç da tam olarak bu.

Bu neden önemli

RetroUI 2.0 yalnızca özellik eklemekle ilgili değil. RetroUI'yi gerçek dünya projeleri için daha güçlü, daha esnek ve daha yararlı kılmakla ilgili.

Base UI desteği daha iyi performans ve erişilebilirlik demektir.

Birleştirilmiş site daha kolay keşif ve herkes için daha iyi bir deneyim demektir.

İyileştirilmiş dokümanlar aramaya daha az, inşa etmeye daha çok zaman demektir.

100'den fazla yeni blocks eksiksiz sayfaları günlerle değil, dakikalarla yayınlayabileceğiniz anlamına gelir.

Karanlık mod şablonu bir sonraki projeniz için sağlam bir temeliniz olduğu anlamına gelir.

Bir arada bu yenilikler, RetroUI 2.0'ı sıkıcı arayüzler kurmayı reddeden geliştiriciler için en eksiksiz, üretime hazır UI kütüphanesi yapıyor.

Sırada ne var?

Bu büyük bir sürüm, ama burada durmuyoruz. Yol haritasında olanlar:

• Daha fazla şablon (aydınlık mod varyantları, açılış sayfaları, e-ticaret)
• Daha hızlı bir tasarımdan geliştirmeye akışı için Figma'dan koda entegrasyonu
• Kütüphaneyi genişlettikçe yeni Base UI bileşenleri
• RetroUI ile kurulmuş projeleri öne çıkaran bir topluluk vitrini
• Yaygın kalıpları ve kullanım senaryolarını gezen video öğreticiler

Ayrıca dinliyoruz. İhtiyaç duyduğunuz bir bileşen, istediğiniz bir özellik ya da sizi engelleyen bir sorun varsa, bize bildirin. RetroUI geliştiriciler için, geliştiriciler tarafından kuruldu. Geri bildirimleriniz, sırada ne inşa edeceğimizi biçimlendirir.

RetroUI 2.0'ı bugün deneyin

Dalmaya hazır mısınız? İşte nasıl başlayacağınız:

Yeni kullanıcılar için

Kopyala# Install RetroUI
npx retroui-cli init
 
# Or install via npm
npm install @retroui/react

Bileşenleri inceleyin, blocks'ı keşfedin ve yeni şablonu alın. Her şey Next.js, React ya da Vite projenizde kullanıma hazır.

Mevcut kullanıcılar için

RetroUI'yi zaten kullanıyorsanız, 2.0'a yükseltmek çok basit:

pnpmnpmyarnbun
pnpm add @retroui/react@latest
npm install @retroui/react@latest
yarn add @retroui/react@latest
bun add @retroui/react@latest
Kopyala

Uyumluluğu bozan değişiklikler için changelog'a bakın (çok azdır ve hepsi için geçici çözümler belgeledik).

Teşekkürler

RetroUI, sizin gibi geliştiriciler jenerik tasarımlardan yorulduğu için var. Öne çıkan, kişiliği olan, farklı hisseden şeyler kurmak istiyorsunuz.

Biz de bunu kolaylaştırmak için buradayız.

Sürüm 2.0, aylarca süren çalışmanın, yüzlerce commit'in, sayısız tasarım yinelemesinin ve muhteşem bir topluluğun geri bildirimlerinin ürünü. Bu yolculuğun parçası olduğunuz için teşekkürler.

Şimdi gidin ve cesur bir şey inşa edin. 🚀

RetroUI 2.0'ı keşfedin:

• Bileşenleri inceleyin
• Blocks'a göz atın
• Şablonu alın
• Dokümanları okuyun
• Topluluğa katılın

Sorularınız mı var? Geri bildiriminiz mi? Bir hata mı buldunuz? GitHub'da bir issue açın ya da Twitter/X üzerinden bize ulaşın.