Aktif projeler12%18 artış
UI KIT PATTERN · 01
Bir proje paneli için sade başlangıç.
Bu pattern yalnızca CKCSS core sınıflarını ve semantic HTML’i kullanır. JavaScript, build adımı veya sayfaya özel component CSS’i gerekmez.
MARKETING · SAAS · FORM · AUTH · DATA · EDITORIAL · CHECKOUT
46canlı örnek
5ürün kategorisi
0zorunlu runtime
DASHBOARD / OVERVIEW
İyi iş, Ada.
Projelerinizin güncel durumu.
Bekleyen işler285 bugün
Tamamlanma84%Hedefte
PATTERN CATALOG
Bir sonraki sayfanız için başlangıçlar.
02 · Pricing
Planları sadeleştirin.
Üç seçenekli, responsive pricing sayfası.
03 · Contact
İyi bir konuşma başlatın.
Accessible field ve form düzeni.
04 · App Shell
Uygulamanızı çerçeveleyin.
Sidebar, toolbar ve dashboard içeriği.
05 · Data
Veriyi yönetin.
Arama, filtre, tablo ve durumlar.
06 · Auth
Güvenli başlangıç.
Giriş formu ve erişilebilir yardım akışı.
07 · Error & status
Kötü an, iyi karşılama.
404, 500 ve bakım sayfaları için minimal karşılama.
08 · Hero
İlk izlenimi kazanın.
Ortalanmış ve görselli bölünmüş hero varyantları.
09 · Header
Marka ve gezinmeyi birleştirin.
JS'siz mobil menü ile duyarlı üstbilgi.
10 · Footer
Sayfayı iyi bitirin.
Çok sütunlu ve minimal bülten footer'ı.
11 · CTA
Harekete geçirin.
Banner ve form içeren bölünmüş CTA.
12 · Feature
Yeteneklerinizi gösterin.
Izgara ve satır satır özellik anlatımı.
13 · Content
Uzun metni okunur tutun.
Kenar çubuklu makale düzeni.
14 · Trust signal
Başkaları zaten güveniyor.
Logo şeridi, referans ve istatistik rozetleri.
15 · Register
Yeni hesap açın.
Auth.html ile aynı iki bölmeli kayıt formu.
16 · Reset password
Şifrenizi sıfırlayın.
Talep formu ve gönderildi onay durumu.
17 · Account recovery
Erişiminizi geri kazanın.
E-posta dışı kurtarma yöntemleri.
18 · User onboarding
İlk kurulumu tamamlayın.
Adım göstergesi ve görev kontrol listesi.
19 · Product card
Ürünleri gözden geçirin.
Kategori filtreli ürün ızgarası.
20 · Product detail
Satın alma kararını kolaylaştırın.
Varyant seçimi ve teknik özellik tablosu.
21 · Checkout
Siparişi tamamlayın.
Teslimat, ödeme ve sipariş özeti.
22 · Shopping cart
Sepetinizi yönetin.
Tam sayfa sepet tablosu ve özet.
23 · App navbar
Uygulama içi üst çubuk.
Arama, bildirimler ve kullanıcı menüsü.
24 · Advanced table
Satırları seçin, toplu işlem yapın.
Seçim kutuları, toplu işlem çubuğu ve toplam satırı.
25 · CRUD modal
Kaydı modal içinde düzenleyin.
Native dialog, silme onayı ve başarı durumu.
26 · CRUD form page
Tam sayfa kayıt formu.
Çok alanlı oluşturma/düzenleme formu.
27 · CRUD read section
Kaydı salt okunur gösterin.
Yapılandırılmış detay görünümü.
28 · CRUD drawer
Kenardan açılan panel.
ck-drawer kompozisyonu: modal ve hafif varyant.
29 · Payment forms
Ödeme bilgilerini toplayın.
Kart ve fatura adresi formu.
30 · Status timeline
Süreci adım adım gösterin.
Kargo takibi ve iade durumu.
31 · Request form
Talepleri yapılandırın.
İade, garanti ve destek talep formu.
32 · Order confirmation
Siparişi onaylayın.
Başarı mesajı ve sipariş özeti.
33 · Orders overview
Sipariş geçmişini gösterin.
Durum rozetli sipariş listesi.
34 · Account overview
Hesap merkezi kurun.
Profil özeti ve hızlı istatistikler.
35 · Discount & promo
Kampanyaları öne çıkarın.
Kampanya bandı ve kupon kodu.
36 · Team
Ekibinizi tanıtın.
Fotoğraf, unvan ve sosyal bağlantılar.
37 · Banner
Duyuru bandı ekleyin.
Sayfa üstü kapatılabilir bant.
38 · Blog
Yazılarınızı sergileyin.
Yazı ızgarası ve ilgili yazılar.
39 · FAQ
Soruları yanıtlayın.
Tam sayfa SSS listesi.
40 · Newsletter
Değer önerisiyle abone toplayın.
Fayda listesi ve kayıt formu.
41 · Popup
Karşılama popup'ı gösterin.
Native dialog tabanlı promosyon.
42 · Portfolio
İşlerinizi sergileyin.
Filtrelenebilir proje ızgarası.
43 · Event schedule
Programı netleştirin.
Oturum listesi ve zamanlama.
44 · Cookie consent
Çerez onayını sadeleştirin.
Kabul/reddet seçenekli bant.
45 · Reviews
Müşteri yorumlarını gösterin.
Puan dağılımı ve yorum listesi.
46 · Comments
Tartışmayı gösterin.
İç içe yanıtlar ve yorum formu.
SOURCE
Copy, customize, ship.
Pattern’in HTML’i semantic component’lere ayrılır; kendi projenize alıp token’larla özelleştirebilirsiniz.
<main class="ck-container ck-stack ck-stack--relaxed">
<header class="ck-cluster ck-cluster--spread">
...
</header>
<div class="ck-grid ck-grid--3">
...
</div>
</main>