Tutarlı, temalanabilir ve büyümeye hazır bir UI katmanı.
Sayfalar ham sınıf yığınları yerine x-admin.* bileşenlerini kullanır.
Renk, köşe, yüzey, boşluk ve etkileşim kararları tek merkezden yönetilir.
00 · Superpanel
Panele özel Blade bileşenleri
daisyUI'nin üzerine kurulan, sayfaların doğrudan kullandığı sarmalayıcılar.
Accordion
Tek veya çoklu açılabilen içerik grupları.
Avatar Group
Ekip üyelerini sınırlı sayıda gösterir, kalanı sayar.
Stats
Yan yana özet metrik grubu.
Rating
Livewire property'sine bağlanabilen puanlama.
Skeleton
İçerik yüklenirken yer tutucu.
Divider
Yatay ve dikey ayraçlar.
Radio
Etiket ve açıklamalı tek seçim.
Loading Overlay
Panel ve tablo üstüne binen yükleniyor katmanı.
İçerik burada kalır, üzerine yarı saydam katman biner.
Segmented
Dönem, mod ve yoğunluk seçicileri.
Number / Currency
Adım düğmeli sayı ve para birimi alanları.
Date / Range
Tarih, saat ve tarih aralığı girişleri.
Combobox
İstemci tarafında filtreleyen aranabilir seçim.
- Sonuç bulunamadı
Radio / Checkbox Group
Kart ve satır düzeninde çoklu seçim grupları.
Range / Color
Kaydırıcı ve renk seçici.
OTP / Tags
Doğrulama kodu ve etiket girişi.
Form Section / Actions
Uzun formlar için başlıklı bölüm ve aksiyon çubuğu.
Fatura bilgileri
Faturalarda görünecek resmi bilgiler.
Değişiklikler otomatik kaydedilmez.
Card (kompozisyon)
card + card-media / card-header / card-body / card-footer.
Haftalık sipariş raporu
12–18 Ağustos
Card varyantları
default, bordered, elevated, ghost, outline, tinted, inverted.
default
Varsayılan yüzey
bordered
Belirgin kenarlık
ghost
Zeminle bütünleşik
outline
Kesikli çerçeve
tinted
Tonlu vurgu
inverted
Ters kontrast
Action Card
Navigasyon ızgaraları için ikon + metin + ok.
Pricing Card
Plan, fiyat, özellik listesi ve aksiyon.
Starter
Küçük ekipler
790 ₺ / ay
- 5 kullanıcı
- Temel raporlar
Business
Büyüyen ekipler
2.400 ₺ / ay
- 25 kullanıcı
- Entegrasyonlar
- Öncelikli destek
Kurumsal
Çok lokasyon
4.900 ₺ / ay
- Sınırsız kullanıcı
- 7/24 destek
Profile Card / Skeleton
Kimlik kartı ve yükleniyor karşılığı.
Donut Chart
Bütün-parça dağılımı; bar-chart max'a normalize ettiği için payı gösteremez.
240
sipariş
- Tamamlandı %53
- Kargoda %27
- Hazırlanıyor %13
- İptal %7
Progress Ring
Tonu merkezden alan hedef göstergesi; belirsiz durumu da var.
Ciro
Memnuniyet
Hesaplanıyor
Bulk Action Bar
Seçim bandı; filtre çipleriyle aynı geometride.
Export Menu
Yalnızca CSV: projede tablo/PDF yazıcı bağımlılığı yok.
Popover
Menü olmayan serbest içerik için yüzen panel.
Kargo süresi
Sipariş 16:00'dan önce verilirse aynı gün kargoya verilir.
Image Upload
Yüklemeden önce yerel önizleme; sürükle-bırak onarıldı.
Kare, en az 200×200 piksel.
Error Page
404 / 403 / 500 için temalı hata yüzeyi.
Table
Genişletilebilir satır, sıralama ve satır aksiyonları.
| Kullanıcı | Durum | İşlem |
|---|
01 · Aksiyonlar
Eylem ve geri bildirim kontrolleri
Dropdown
Bağlamsal aksiyon ve seçim menüsü.
FAB
Öncelikli eylemler için açılır hızlı aksiyon.
Filter
Tek seçimli kompakt filtre grubu.
Swap
Aynı alanda iki görünüm arasında geçiş.
Tooltip
Kısa bağlamsal açıklamalar.
02 · Veri girişi
Formlar ve seçim kontrolleri
Calendar
Takvim sağlayıcıları için daisyUI yüzeyi.
Checkbox
Çoklu seçim ve onay kontrolleri.
Fieldset
Etiket, kontrol, yardım ve hata metni.
Ekip içinde görünen ad.
File Input
Dosya yükleme kontrolü.
PNG, SVG veya WebP · en fazla 2 MB
Input
Merkezi x-admin.input sarmalayıcısı.
Canlı değer: Superpanel
Label
Kontrol açıklaması ve yardımcı metin.
OTP
Tek kullanımlık doğrulama kodu.
Radio
Bir seçenek kümesinden tek seçim.
Range
Sayısal aralık seçimi.
Rating
Puanlama ve tercih ölçümü.
Select
Merkezi x-admin.select sarmalayıcısı.
Textarea
Uzun metin girişi.
Toggle
Açık ve kapalı ayar durumu.
Validator
Tarayıcı doğrulamasıyla görsel durum.
03 · Veri gösterimi
İçerik, durum ve metrik bileşenleri
Alert
Merkezi bildirim ve aksiyon mesajı.
Yayın hazır
Aura
Önemli yüzeyler için animasyonlu vurgu.
Avatar
Kullanıcı, grup ve çevrimiçi durumu.
Badge
Durum, kategori ve sayaç rozetleri.
Card
İçerik gruplama ve hiyerarşi yüzeyi.
Haftalık rapor
Performans özetini ekibinizle paylaşın.
Carousel
Yatay kaydırılabilir içerik koleksiyonu.
Chat
Mesajlaşma ve destek konuşmaları.
Countdown
Süre ve geri sayım göstergesi.
Diff
İki görünümü sürükleyerek karşılaştırma.
Hover 3D
İşaretçi konumuna tepki veren derinlik efekti.
Pro Plan
Sınırsız otomasyon
Hover Gallery
İşaretçiyle görsel varyant önizlemesi.
Indicator
Bileşen köşesine bilgi veya durum ekleme.
Kbd
Klavye kısayolu gösterimi.
Link
Metin içi ve bağımsız yönlendirmeler.
List
Yoğun veri için satır tabanlı liste.
-
AY
Ayşe Yılmaz
Ürün
-
MK
Mert Kaya
Operasyon
Loading
Asenkron işlemler için yükleme göstergeleri.
Mask
Görsel ve renk yüzeylerine şekil maskesi.
Progress
Tamamlanma oranı ve kapasite.
Radial Progress
Dairesel hedef göstergesi.
Skeleton
İçerik yüklenirken yer tutucu yüzey.
Stack
Üst üste yığılmış içerik önizlemesi.
Stat
Metrik, açıklama ve değişim özeti.
Status
Canlı, bekleyen ve hata durumu.
Table
Yoğun, okunabilir ve temalanabilir veri tablosu.
| Ürün | Durum | Stok | Tutar |
|---|---|---|---|
| Ergonomik Sandalye | Aktif | 24 | 8.450 ₺ |
| Ayarlanabilir Masa | Azalıyor | 6 | 15.200 ₺ |
| Monitör Kolu | Tükendi | 0 | 2.100 ₺ |
Text Rotate
Dönüşümlü kelime ve mesaj animasyonu.
Ekibiniz için tasarlageliştirölçekle
Timeline
Olayların kronolojik akışı.
-
09:10Sipariş
-
09:12Ödeme
-
14:30Kargo
-
YarınTeslim
05 · Yerleşim
Kabuk, katman ve içerik düzeni
Collapse
Açılır bilgi ve SSS içeriği.
Divider
İçeriği yatay veya dikey olarak ayırır.
Drawer
Mobil veya ikincil yan panel.
Hero
Güçlü başlık ve birincil aksiyon alanı.
SUPERPANEL CLOUD
Operasyonun tek merkezde.
Ekibinizi, siparişleri ve metrikleri aynı çalışma alanında yönetin.
Mockup
Tarayıcı, kod, pencere ve cihaz sunumu.
npm run buildbuilding...done in 1.2sModal
Kritik karar ve odaklanmış görev katmanı.
Toast
Kısa süreli işlem sonucu bildirimi.