Admin paneller inşa et
WebBlocks UI ile
Admin paneller, SaaS kontrol panelleri ve CMS arka yüzleri için framework bağımsız bir UI kiti. npm yok, derleme adımı yok, kilitlenme yok — sadece HTML ve CSS özel özellikleri.
Neden WebBlocks UI?
Tam bir JS framework'ünün yüküne girmeden sağlam, tutarlı bir admin arayüzü isteyen ekipler için tasarlandı.
Derleme adımı yok
İki dosyayı bırak — webblocks-ui.css ve webblocks-ui.js — ve işin bitti. CDN'den çalışır.
Çok eksenli tema motoru
Vurgu rengi, karanlık mod, yoğunluk, yarıçap, gölge ve yazı tipi ailesi — hepsi <html> üzerindeki data-* nitelikleriyle.
Framework bağımsız
Laravel Blade, Django şablonları, Rails ERB, Twig veya saf HTML ile çalışır. Sarmalayıcı yok, bileşen yok — HTML, HTML olarak kalır.
Vanilla JS modülleri
Modal, drawer, dropdown, toast, AJAX toggle ve daha fazlası için 13 IIFE modülü. Her biri temiz bir window.WB* API'si sunar.
Tasarım token sistemi
Tüm boyutlar, renkler, yarıçaplar, gölgeler ve boşluklar CSS özel özellikleridir. Markanıza uydurmak için herhangi bir tokeni geçersiz kıl.
152 Lucide ikonu
SVG sprite + CSS mask-image deseni. <i class="wb-icon wb-icon-settings"> veya SVG <use> ile kullan.
Hızlı kurulum
HTML'inize iki etiket ekle ve inşa etmeye başla.
<!-- <head> içine --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fklavyenet/webblocks-ui@v2.3.5/dist/webblocks-ui.css"> <!-- </body> öncesine --> <script src="https://cdn.jsdelivr.net/gh/fklavyenet/webblocks-ui@v2.3.5/dist/webblocks-ui.js"></script>
Temayı <html> üzerinde ayarla:
<html data-mode="light" data-accent="ocean">
Bir bileşen yaz:
<button class="wb-btn wb-btn-primary">Değişiklikleri kaydet</button> <div class="wb-alert wb-alert-success"> Kayıt başarıyla kaydedildi. </div>
Dokümantasyonu keşfet
Arayüzünü oluşturmak ve özelleştirmek için ihtiyacın olan her şey.
Başlarken
Kurulum, ilk sayfa, tema ayarı ve Laravel entegrasyonu.
Temel & Tokenlar
Tasarım tokenleri, karanlık mod, vurgu renkleri, ön ayarlar ve tüm tema eksenleri.
Bileşenler
Düğmeler, kartlar, modallar, tablolar, formlar, toastlar, popover'lar ve 30+ daha.
Düzenler
Dashboard kabuğu, kenar çubuğu, auth kabuğu, ayarlar kabuğu, içerik kabuğu.
JavaScript API
13 JS modülünün tümü — WBModal, WBToast, WBAjaxToggle, WBTheme ve daha fazlası.
İkonlar
152 Lucide ikonu — kopyalamaya hazır kod parçacıklarıyla aranabilir galeri.