Flexiwind’i Tanıtıyoruz (Beta): Laravel & Livewire için modüler UI sistemi

Bugün, Flexiwind adlı bir kompozit UI sisteminin beta sürümünü paylaşmaktan heyecan duyuyorum; bu sistem Laravel Blade ve Livewire için geliştirilmiştir.

Eğer shadcn/ui felsefesini seviyorsanız ve Laravel ekosisteminde yaşıyorsanız, Flexiwind size oldukça tanıdık geliyor olabilir, ancak bilinçli olarak farklı bir deneyim sunuyor.

Flexiwind Nedir?

Flexiwind, geleneksel bir bileşen kütüphanesi değildir.

Onu yükleyip vendor/ dizininden bileşenler içe aktaramazsınız.

Aksine, Flexiwind size doğrudan projenize kopyalayabileceğiniz üretime hazır UI bileşenleri ve bloklar sunar, böylece kodun tamamen sahibi olursunuz.

❌ Hiçbir kara kutu.

❌ Hiçbir belirli satıcı bağımlılığı.

❌ Hiçbir sihir.

Neden Flexiwind?

Çoğu Laravel UI kiti bu tuzaklardan birine düşer:

• Özelleştirmesi zor
• Çok fazla görüş açıse ve kısıtlayıcı
• Sürekli savaşabileceğiniz API’lerin arkasında soyutlanmış
• Livewire’ın çalışma biçiminden kopuk

Flexiwind farklı bir yol alıyor:

Kodu kopyalarsınız. Uyarlarsınız. Gönderirsiniz.

Amaç karmaşıklığı gizlemek değil; size temiz, genişletilebilir bir başlangıç noktası sunmaktır.

Nasıl Çalışır?

İş akışı bilinçli olarak basittir:

1. Gerekli bileşenleri veya blokları seçin
2. Projeye ekleyin (elle veya CLI aracılığıyla)
3. Özelleştirin onları diğer Blade veya Livewire kodları gibi

Her şey şu araçlarla inşa edildi:

• Laravel Blade
• Livewire
• Tailwind CSS

Flexiwind Arka Plandaki Temel Fikirler

🎨 Tam Mülkiyet ve Kolay Özelleştirme

Bileşenler doğrudan kod tabanınızda yer aldığından, özelleştirme doğal bir süreçtir.

!important ile savaşmak yerine veya utility sınıflarını aşmak yerine, şu gibi durumlarda:

!bg-red-400 !px-6 !rounded-xl

Flexiwind, temalar ve varyantlar için CSS değişkenlerine büyük ölçüde bağlıdır.

Bu, şu anlamına gelir:

• daha temiz işaretleme
• tahmin edilebilir özelleştirme
• daha kolay marka uyumu

🧠 Anlamlı Utility’ler (Esnekliği Kaybetmeden)

Flexiwind, Tailwind’in üstünde anlamlı utility sınıfları sunar. Uzun sınıf zincirleri yerine, şunu yazabilirsiniz:

 class="btn btn-md btn-solid btn-solid-primary">

Bu yaklaşım:

• yapıyı varyantlardan ayırır
• şablonları okunabilir tutar
• gerektiğinde Tailwind seviyesinde kontrol sağlar

⚡ Etkileşimli Ama Agresif Değil

Etkileşim için, Flexiwind kendi küçük ekosistemine güvenir:

• Flexilla (Vanilla JS)
• Alpine Flexilla (Alpine.js)

Bunlar, modüler ve geliştirilebilir olan başsız UI ilkelerdir (açılır menüler, modal pencereler, yer imleri, PIN girişleri vb.) ve şunları sunar:

• yalnızca kullandığınız şeyleri kurun
• güçlü API’ler, katı davranış yok
• açık kaynak — kodu inceleyin, çatal oluşturarak geliştirin veya sahibi olun

Gereksiz JavaScript çerçeveleri yok.
Gizli bağlantılar yok.

💻 CLI ile Başlangıç Deneyimi

Flexiwind, benimsenmeyi kolaylaştırmak için bir CLI ile birlikte gelir.

Dosyaları elle kopyalamak yerine, bileşenleri ve blokları doğrudan kayıt defterinden ekleyebilirsiniz:

flexi add button
flexi add auth/login

CLI, kodu projenize kopyalar, böylece özgürce değiştirebilirsiniz.

Beta Sürecinde Neler Var?

Mevcut beta şunları içerir:

• Temel UI bileşenleri (düğmeler, modal pencereler, açılır menüler, bildirimler vb.)
• Bir kayıtlı sistem
• CLI araçları

• Temel uygulama blokları:

  • Giriş (birden fazla varyant)
  • Kayıt
  • Sayaç

• Belgeler

Bu, temel değil, nihai şeklin başlangıcıdır.

Sonraki Adımlar Neler?

Flexiwind daha yeni başlıyor.

Sonraki adımlar, gerçek dünya Laravel ihtiyaçlarına odaklanacak:

Uzun vadeli hedef basit:

Laravel ve Livewire geliştiricilerinin gerçek ürünler inşa etmesine yardımcı olun — sadece UIs değil.

Beta Dönemi, Geri Bildirim Önemlidir

Flexiwind beta aşamasındadır ve geri bildirimleriniz, gelecekteki gelişmeleri doğrudan şekillendirecektir.

Eğer:

• Laravel ve Livewire ile çalışıyorsanız
• UI kodunuzu sahiplenmekten hoşlanıyorsanız
• uzun vadeli sürdürülebilirliğe önem veriyorsanız

Denemenizi, hatalar yapmanızı ve düşüncelerinizi paylaşmanızı isterim.

Daha fazla güncelleme yakında geliyor.

Github : Flexiwind
Canlı : Web Sitesi