UI Kutuphanesi
UI Bilesen Kutuphanesi
180+ UI bileseni. Renkler, tokenlar, tipografi, hareket, grid. Hepsi tek yerde.
180+ Eleman
21 Kategori
Karanlik Mod Yerel
Uretime Hazir
Birincil Buton
Ikincil Buton
Seffaf Buton
Ikon Buton
Kayan Aksiyon Butonu (FAB)
Buton Grubu
Bolunmus Buton
Yukleniyor Butonu
Acma/Kapama Butonu
Form Elemanlari
8Dogrulama durumlari, yardimci metinler ve interaktif ozellikler iceren giris bilesenleri.
Metin Girisi
Tam yasal adinizi girin
✓ Kullanici adi uygun
✕ Lutfen gecerli bir e-posta adresi girin
Dogrulamali E-posta Girisi
Sifre Girisi
Guclu sifre
Sayacli Metin Alani
Kisa tutun
0/200
Secim / Acilir Menu
Onay Kutusu & Radyo
Bildirimler
Fatura Dongu
Acma/Kapama Dugmesi
Aralik Kaydirici
60%
0%100%
Kartlar
7Tum sayfa turleri icin icerik gosteriminde kullanilan cok yonlu kart bilesenleri.
Urun Karti
📦INDIRIM
Kablosuz Kulaklik
$129$159
📦
Akilli Saat Pro
$299
📦INDIRIM
Deri Sirt Cantasi
$89$119
Blog Yazi Karti
Tasarim
Tasarim Sistemlerinin Gelecegi
AI
AI Neden Tasarimcilarin Yerini Almayacak
Ozellik Karti
Yildirim Hizinda
Gunler degil, saniyeler icinde yayinlayin.
Varsayilan Guvenlik
Kurumsal duzeyde guvenlik yerlesik.
Olceklenebilir
Startup'tan kurumsal yapiya.
Referans Karti
"
Ekibimizin calisma seklini tamamen degistirdi.
"
Sonunda tasarim ve gelistirme arasinda kopru kuran bir arac.
Fiyat Karti
Ucretsiz
$0
aylik
- ✓5 proje
- ✓Temel analitik
- ✓E-posta destek
Populer
Pro
$19
aylik
- ✓Sinirsiz proje
- ✓Gelismis analitik
- ✓Oncelikli destek
- ✓API erisimi
Kurumsal
$49
aylik
- ✓Pro'daki her sey
- ✓SSO & SAML
- ✓Ozel destek
- ✓Ozel SLA
Takim Uyesi Karti
SC
Sarah Chen
CEO
MR
Marcus Rivera
CTO
AT
Aiko Tanaka
Tasarim Lideri
JP
James Park
Muhendislik
Istatistik / KPI Karti
Gelir
$48,295
↑ +12.5% gecen aya gore
Kullanicilar
12,847
↑ +8.2% gecen aya gore
Donusum
3.2%
↓ -2.4% gecen aya gore
Geri Bildirim & Bildirimler
6Toast mesajlari, uyarilar, modaller, ipuclari, ilerleme gostergeleri ve yukleme durumlari.
Toast Bildirimleri
Degisiklikler basariyla kaydedildi
Dosya yuklenemedi
Planiniz 3 gun icinde sona eriyor
Yeni ozellik: Karanlik mod burada
Uyari Bantlari
Sistem Guncellemesi
Pazar gunu 02:00-04:00 UTC arasi planli bakim yapilacak.
Odeme Basarisiz
Devam etmek icin fatura bilgilerinizi guncelleyin.
Modal / Diyalog
Ipucu & Rozet
Bu bir ipucu
YeniAktifBeklemedeKapali399+
Ilerleme Cubugu & Dondurucu
Yukleme Ilerlemesi73%
Depolama Kullanimi89%
Veri yukleniyor...
Iskelet Yukleyici
Standart Navbar
Acme Inc
Arama + Avatar + Bildirimli Navbar
Kontrol Paneli
JD
Duyuru Banti
🎉 Yeni: Karanlik mod burada! Daha fazla bilgi →
Mobil Hamburger Menu
App
Karanlik/Aydinlik Gecisi + Dil Secici
Icerik Yolu
Sayfalama
Sayfa 2 / 12
Sekme Navigasyonu
Mega Menu Onizleme
Yapisan Baslik + Avatar Acilir Menusu
⟡ Pulse
JK
Julia▾Hero Bolumleri
8Farkli sayfa turleri icin ekranin ust kismindaki hero duzenlemeleri.
CTA'li Hero
47.832+ kullaniciya katil
Tum Is Akisinizi Donusturun
Takimlarin 10 kat daha hizli gondermesine yardimci olan hepsi bir arada platform.
Bolunmus Ekran Hero
Insanlarin sevecegi urunler tasarliyorum
8+ yil deneyime sahip urun tasarimcisi.
◎
Urun Ekran Goruntusu ile Hero
Is Akisinizi Otomatiklestirin
5 araci degistiren platform.
Kontrol Paneli Arayuz Onizleme
Bekleme Listesi Formlu Hero
🚀 2026 Ilkbahar Lansmani
E-posta Bozuk. Biz Duzeltiyoruz.
Sizin icin calisan yapay zeka destekli gelen kutusu.
🔥 2.847 kisi zaten bekleme listesinde
Istatistikli Hero
Teknolojinin Gelecegini Insa Ediyoruz
$12.4B
Gelir
45.000
Calisan
80
Ulke
1985
Kurulus
Logo Seritli Hero
10.000+ Takim Tarafindan Tercih Ediliyor
Modern takimlarin sectigi platform.
VercelLinearStripeNotionFigma
Minimal Hero (Blog)
Tasarim
2026'da Tasarim Sistemlerinin Gelecegi
Yemek Fotografli Hero (Restoran)
2008'den beri
Bir Mutfak Yolculugu
Sayfa Bolumleri
12Yeniden kullanilabilir icerik bloklari: ozellikler, referanslar, fiyatlandirma, SSS, CTA ve dahasi.
Logo / Guven Seridi
Sektore liderlik eden firmalar tarafindan tercih ediliyor
GoogleNikeSpotifyAirbnbSlackNetflix
Ozellik Izgarasi
Hizli
Saniyeler icinde yayinla
Guvenli
Kurumsal duzey
Olceklenebilir
Sizinle buyur
Guzel
Piksel-mukemmel UI
Nasil Calisir (3 Adim)
1
Sec
Stilinizi ve sayfa tipinizi secin
2
Onizle
Canli piksel-mukemmel onizleme gorun
3
Olustur
Kodu kopyalayin ve yayinlayin
Referans Izgarasi
"Ekibimizin calisma seklini degistirdi."
"Tasarim ve gelistirme arasinda kopru kuruyor."
SSS Akordeonu
Ucretsiz mi?
Nasil calisiyor?
Ozellestirilebilir mi?
CTA Bolumu
Baslamaya hazir misiniz?
Daha hizli gonderen binlerce takima katilin.
Bulten Kaydi
Istatistik / Sayilar Bolumu
$2.4B
Uretilen Gelir
200+
Musteriler
15
Oduller
98%
Elde Tutma
Iletisim Bolumu
Iletisime Gecin
Sizden haber almak isteriz.
Galeri Izgarasi
🍝
🥘
🍷
🫒
🍰
🍽️
Takim Bolumu
SC
Sarah
CEO
MR
Marcus
CTO
AT
Aiko
Tasarim
JP
James
Muh.
Karsilastirma Tablosu
| Ozellik | Ucretsiz | Pro | Kurumsal |
|---|---|---|---|
| Projeler | 5 | Sinirsiz | Sinirsiz |
| API Erisimi | — | ✓ | ✓ |
| SSO | — | — | ✓ |
| Destek | E-posta | Oncelikli | Ozel |
Kontrol Paneli Elemanlari
10Yonetim paneli bilesenleri: KPI'lar, grafikler, tablolar, kenar cubugu, aktivite akislari.
Kenar Cubugu Navigasyonu
Sparkline'li KPI Kartlari
Gelir
$48,295
↑ +12.5%
Kullanicilar
12,847
↑ +8.2%
Siparisler
1,284
↑ +23.1%
Hemen Cikis
42.1%
↓ -2.4%
Cubuk Grafik
Veri Tablosu
| Musteri | Durum | Tutar | Tarih |
|---|---|---|---|
| Emma Wilson | Tamamlandi | $2,340 | Mar 28 |
| James Park | Isleniyor | $1,890 | Mar 27 |
| Sofia Garcia | Beklemede | $890 | Mar 26 |
Aktivite Akisi
Yeni kullanici kayit oldu
2 dk once
Siparis #1284 tamamlandi
15 dk once
$2,340 odeme alindi
1 saat once
Yeni degerlendirme ★★★★★
3 saat once
Halka Grafik
$48K
Toplam
Urunler45%
Hizmetler25%
Abonelikler15%
Diger15%
Tarih Araligi Secici
Mar 1 — Mar 31, 2026▾
Disa Aktarma Kontrolleri
Kanban Panosu
Yapilacak
Ana sayfa tasarimi
Giris hatasini duzelt
Devam Eden
API entegrasyonu
Tamamlanan
CI/CD kurulumu
Testleri yaz
Kullanici Yonetim Tablo Satiri
JD
AdminActive
E-ticaret Elemanlari
12Alisveris bilesenleri: urun gosterimi, sepet, odeme, yorumlar ve odeme yontemleri.
Urun Gorsel Galerisi
📦
🎧
📱
🖼️
📦
Beden / Renk Secici
Renk
Beden
Miktar Secici + Sepete Ekle + Istek Listesi
1
Fiyat Gosterimi + Stok Gostergesi
$129.99$159.99-19%
Stokta— 1-2 gun icinde kargoya verilir
Sadece 3 adet kaldi
Stokta Yok
Degerlendirme Bileseni
4.8/5
★★★★★ (248 degerlendirme)
Sepet Ogesi / Siparis Ozeti
📦
Kablosuz Kulaklik
Adet: 1
📦
Akilli Saat
Adet: 1
Toplam$429.98
Odeme Adimlari
✓
Sepet✓
Kargo3
Odeme4
OnayOdeme Yontemi Secici
Visa
Mastercard
Amex
PayPal
Apple Pay
Google Pay
Kupon / Promosyon Girisi
Guven Rozetleri
Ucretsiz Kargo
Kolay Iade
Guvenli Odeme
7/24 Destek
Son Gorulen Urunler
📦
Kulaklik
📦
Saat
📦
Hoparlor
📦
Sirt Cantasi
📦
Lamba
Blog Elemanlari
8Icerik bilesenleri: makale duzenlemeleri, okuma ilerlemesi, yazar kartlari, kod bloklari.
Okuma Ilerleme Cubugu
Yazar Karti
Kod Blogu
JavaScript
const config = {
style: 'minimal-clean',
pageType: 'landing',
palette: 'ocean',
}
generateDesign(config)Alinti
"Design is not just what it looks like and feels like. Design is how it works."
— Steve Jobs
Etiket Bulutu
Paylasim Butonlari
Icerik Tablosu
Onceki / Sonraki Makale Navigasyonu
Yardimci Elemanlar
10Duzenleme yardimcilari, boluculer, cerez bantlari, bos durumlar, hata sayfalari.
Boluculer
VEYA
Bos Durum
Henuz proje yok
Baslamak icin ilk tasariminizi olusturun.
404 Hata Sayfasi
404
Sayfa bulunamadi
Aradiginiz sayfa mevcut degil.
Cerez Banneri
Sohbet Aracı
Yukari Don Butonu
Yukleme Ekrani
Yukleniyor...
Kaydirma Gostergesi
Asagi kaydir
Kaplama / Arka Plan
Grid Sistemi Onizleme
1
2
3
4
5
6
7
8
9
10
11
12
4 col
4 col
4 col
Baglanti Sutunlu Alt Bilgi
Sosyal Medya Ikonlari
Alt Bilgi Bulteni
Odeme Yontemi Ikonlari
Guven Rozetleri / Sertifikalar
Alt Cubuk (Yasal Baglantilar)
Renk Paleti
1010 notr + 9 canli renk, her biri 11 ton.
Notr Renkler
950
#0E121B
900
#181B25
800
#222530
700
#2B303B
600
#525866
500
#717784
400
#99A0AE
300
#CACFD8
200
#E1E4EA
100
#F2F5F8
50
#F5F7FA
0
#FFFFFF
Blue Paleti
950
#122368
800
#1F3BAD
500
#335CFF
200
#C0D5FF
50
#EBF1FF
Green Paleti
950
#0B4627
800
#1A7544
500
#1FC16B
200
#C2F5DA
50
#E0FAEC
Red Paleti
950
#681219
800
#AD1F2B
500
#FB3748
200
#FFC0C5
50
#FFEBEC
Orange Paleti
950
#683412
800
#AD581F
500
#FF9147
200
#FFD9C0
50
#FFF3EB
Yellow Paleti
950
#624C18
800
#A78025
500
#F6B51E
200
#FFECC0
50
#FFF4D6
Purple Paleti
950
#351A75
800
#4C25A7
500
#7D52F4
200
#CAC0FF
50
#EFEBFF
Pink Paleti
950
#68123D
800
#AD1F66
500
#FB4BA3
200
#FFC0DF
50
#FFEBF4
Teal Paleti
950
#0B463E
800
#1A7569
500
#22D3BB
200
#C2F5EE
50
#E4FBF8
Sky Paleti
950
#124B68
800
#1F7EAD
500
#47C2FF
200
#C0EAFF
50
#EBF8FF
Token Sistemi
8Arka planlar, metin, cizgiler, ikonlar ve durumlar icin semantik renk tokenlari.
Arka Plan Tokenlari
bg-strong-950#0E121Bbg-surface-800#222530bg-sub-300#CACFD8bg-soft-200#E1E4EAbg-weak-50#F5F7FAbg-white-0#FFFFFFMetin Tokenlari
text-strong-950#0E121Btext-sub-600#525866text-soft-400#99A0AEtext-disabled-300#CACFD8text-white-0#FFFFFFCizgi Tokenlari
stroke-strong-950#0E121Bstroke-sub-300#CACFD8stroke-soft-200#E1E4EAstroke-white-0#FFFFFFIkon Tokenlari
icon-strong-950#0E121Bicon-sub-600#525866icon-soft-400#99A0AEicon-disabled-300#CACFD8icon-white-0#FFFFFFDurum Tokenlari
Success
darkbaselight
Error
darkbaselight
Warning
darkbaselight
Information
darkbaselight
Away
darkbaselight
Feature
darkbaselight
Verified
darkbaselight
Highlighted
darkbaselight
Tipografi
6Inter & Inter Display font sistemi — basliklar, etiketler, paragraflar, alt basliklar.
Baslik Olcegi (Inter Display)
H1The quick brown fox
H2The quick brown fox
H3The quick brown fox
H4The quick brown fox
H5The quick brown fox
H6The quick brown fox
Etiket Olcegi (Inter Medium)
X-LargeThe quick brown fox jumps over the lazy dog
LargeThe quick brown fox jumps over the lazy dog
MediumThe quick brown fox jumps over the lazy dog
SmallThe quick brown fox jumps over the lazy dog
X-SmallThe quick brown fox jumps over the lazy dog
Paragraf Olcegi (Inter Regular)
X-LargeThe quick brown fox jumps over the lazy dog
LargeThe quick brown fox jumps over the lazy dog
MediumThe quick brown fox jumps over the lazy dog
SmallThe quick brown fox jumps over the lazy dog
X-SmallThe quick brown fox jumps over the lazy dog
Alt Baslik Olcegi (Inter Medium, Buyuk Harf)
MediumSubheading text
SmallSubheading text
X-SmallSubheading text
2X-SmallSubheading text
Font Kalinlik Referansi
AaRegular (400)
AaMedium (500)
AaSemi Bold (600)
AaBold (700)
Hareket & Animasyon
5Ease-out gecisin 5 hiz secenegi.
Hiz Secenekleri
100ms
Cok Hizli
Hover durumlari, acma/kapamalar
200ms
Hizli
Buton tiklama, acilir menuler
300ms
Normal
Modal acilisi, sayfa gecisleri
400ms
Yavas
Karmasik acilimlar, grafikler
500ms
Cok Yavas
Tam sayfa animasyonlari
Gecis Fonksiyonlari
Ease Out
cubic-bezier(0, 0, 0.2, 1)Cogu icin varsayilan
Ease In-Out
cubic-bezier(0.4, 0, 0.2, 1)Sayfa gecisleri
Ease In
cubic-bezier(0.4, 0, 1, 1)Cikis animasyonlari
Linear
linearIlerleme cubugu, donduruculer
Animasyon Turleri
Erime / SolmaYukari KaymaAsagi KaymaOlceklemeAkilli Animasyon
Kose Yuvarlama
9Keskin'den tam yuvarlaga 9 yaricap degeri.
Yaricap Olcegi
none
0px
2xs
2px
xs
4px
sm
6px
md
8px
DEFAULT
10px
lg
12px
xl
16px
2xl
20px
full
9999px
Baglam Icinde Yaricap
Buton
10px
Kart
16px
Modal
20px
Rozet
9999px
Giris
8px
Avatar
9999px
Grid Sistemi
424px aralikli 12 sutunlu grid, 1440px temel genislik, 4 duzenleme varyanti.
12 Sutunlu Grid
1
2
3
4
5
6
7
8
9
10
11
12
6 columns
6 columns
4 col
4 col
4 col
3
3
3
3
Panel Duzenlemeleri
Kenar Cubugu Acik
Kenar Cubugu Kapali
Ust Navigasyon
Tam Genislik
Bosluk & Aralik
4px
Temel birim
8px
Kucuk aralik
12px
Kompakt
16px
Varsayilan
24px
Grid araligi
32px
Bolum
48px
Buyuk
64px
XL
Marka Logolari
20Remix Icon ile 20+ buyuk marka logosu — hafif, tutarli.
Tum Marka Logolari
Google
Arama & Bulut
Apple
Teknoloji
Microsoft
Yazilim
Amazon
E-ticaret
Netflix
Yayin
Spotify
Muzik
Stripe
Odeme
Slack
Iletisim
Figma
Tasarim
GitHub
Gelistirme
Discord
Topluluk
Vercel
Hosting
Notion
Verimlilik
Linear
Proje Yonetimi
Twitter/X
Sosyal
Instagram
Sosyal
LinkedIn
Profesyonel
YouTube
Video
PayPal
Odeme
Airbnb
Seyahat
Logo Seridi Onizleme (Guvenilen)
Sektor liderlerinin guveni
GoogleAppleStripeFigmaSlackNotionLinear
Marka Kartlari (Buyuk Markalar Stili)
Google
Search & Cloud
OrijinalSiyahBeyaz
Apple
Technology
OrijinalSiyahBeyaz
Stripe
Payments
OrijinalSiyahBeyaz
GitHub
Development
OrijinalSiyahBeyaz
Ulke Bayraklari
5050 ulke bayragi — dairesel, girisler ve acilir menulere entegre.
Tum Bayraklar (Dairesel)
🇺🇸
🇬🇧
🇩🇪
🇫🇷
🇹🇷
🇯🇵
🇰🇷
🇨🇳
🇮🇳
🇧🇷
🇦🇺
🇨🇦
🇮🇹
🇪🇸
🇳🇱
🇸🇪
🇳🇴
🇩🇰
🇫🇮
🇵🇱
🇵🇹
🇷🇺
🇸🇦
🇦🇪
🇸🇬
🇲🇽
🇦🇷
🇿🇦
🇳🇬
🇪🇬
🇮🇱
🇹🇭
🇻🇳
🇮🇩
🇲🇾
🇵🇭
🇳🇿
🇮🇪
🇨🇭
🇦🇹
🇧🇪
🇬🇷
🇨🇿
🇷🇴
🇭🇺
🇺🇦
🇨🇱
🇨🇴
🇵🇪
🇵🇰
Bayrak + Ulke Adi + Telefon Kodu
🇺🇸US+1
🇬🇧GB+44
🇩🇪DE+49
🇫🇷FR+33
🇹🇷TR+90
🇯🇵JP+81
🇰🇷KR+82
🇨🇳CN+86
🇮🇳IN+91
🇧🇷BR+55
🇦🇺AU+61
🇨🇦CA+1
Bayrakli Telefon Girisi
🇹🇷+90▾
Bayrakli Dil Secici
Emojiler
30Emojipedia ile senkronize 600+ emoji — yuksek cozunurluk, tutarli stil.
Gulumsemeler & Insanlar
😀
😃
😄
😁
😆
😅
🤣
😂
🙂
🙃
😉
😊
😇
🥰
😍
🤩
😘
😗
😚
😙
🥲
😋
😛
😜
🤪
😝
🤑
🤗
🤭
🤫
El Hareketleri
👋
🤚
🖐️
✋
🖖
👌
🤌
🤏
✌️
🤞
🤟
🤘
🤙
👈
👉
👆
👇
☝️
👍
👎
✊
👊
🤛
🤜
👏
🙌
👐
🤲
🤝
🙏
Nesneler
💻
📱
⌨️
🖥️
🖨️
📷
📹
🎥
📞
📺
📻
⏰
🔋
💡
🔦
📦
📫
📬
✏️
📝
📊
📈
📉
🗂️
📁
📂
🔒
🔑
🛠️
⚙️
Doga
🌸
🌺
🌻
🌹
🌷
🌱
🌿
☘️
🍀
🌳
🌲
🌴
🌵
🍁
🍂
🍃
🌍
🌎
🌏
⭐
🌙
☀️
⛅
🌈
🔥
💧
❄️
💨
🌊
⚡
Yiyecek & Icecek
🍎
🍐
🍊
🍋
🍌
🍉
🍇
🍓
🫐
🍑
🥝
🍅
🥑
🌽
🥕
🧅
🍕
🍔
🍟
🌭
🥪
🌮
🍜
🍣
🍰
🍩
☕
🍵
🥤
🍷
Seyahat
🚗
🚕
🚌
🚎
🏎️
🚓
🚑
🚒
✈️
🚀
🛸
🚁
⛵
🚢
🏠
🏢
🏥
🏨
🏪
🏫
⛪
🕌
🗼
🗽
🌉
🎢
🎡
⛲
🏖️
🏔️