Button
Her varyant, ton ve animasyon
Animasyonlu bileşenler
Uygulama ekranlarını canlandıran 132 ücretsiz bileşen: akan sayılar, üst üste toast'lar, kayan sekmeler, titreyen girişler. Önce CSS, azaltılmış harekete saygılı, açık ve koyu. Onları neyin hareket ettirdiğine göre filtrele.
Ctrl K
132 bileşen
Core UI 30
Göz atPlaygroundÜcretsiz
Badge
Her stilde durum
Card
Vurgulu katmanlı kartlar
Input
Etiketler, ikonlar ve durumlar
Avatar
Durum, halkalar ve gruplar
Alert
Eylemli satır içi mesajlar
Tabs
Altı sekme stili, tek API
Switch
Beş görünümlü anahtar
Checkbox & Radio
Onay kutuları, radyolar ve kartlar
Separator
Etiketli ayırıcılar
Breadcrumb
Düzgünce daralan yollar
Pagination
Sayfalar, boyutlar ve atlamalar
Heading
Hareketli başlık yazısı
Text
Hazır ayarlı metin yazısı
Link
Yedi alt çizgi stili
Kbd
Basılınca tepki veren tuşlar
Stat Card
Trendli bir metrik
Select
Aranabilir, gruplu, çoklu
Dialog & Sheet
Diyaloglar ve paneller
Tooltip
Kısayollu zengin ipuçları
Popover
Yüzen paneller
Dropdown Menu
Alt menülü menüler
Combobox
Asenkron sonuçlu arama
Date Picker
Tarih, aralık ve saat
Multi-step Form
Doğrulamalı sihirbazlar
Number Input
Biçimli artırıcılar
Rating
Yarım puanlı yıldızlar
Toggle Group
Bir veya birkaç seç
Table
Sırala, yığ, satırları renklendir
Data Grid
Düzenle, sabitle, aktar
Sayılar ve veri 8
Göz atNumber flow
Rakamlar yeni değere akar
Counter up
Görünür olunca sayar
Usage meter
Doldukça uyaran kullanım
Progress
Her stilde çubuklar
Circular progress
Halkalar ve göstergeler
Sparkline draw
Kendini çizen küçük grafik
Delta badge
Artış ya da düşüş bir bakışta
Cell flash
Değer değişince yanan hücreler
Geri bildirim 7
Göz atToast stack
Üst üste dizilip açılan bildirimler
Notification badge
Beliren ve atan sayaçlar
Skeleton auto
Gerçek düzeninizden iskeletler
Spinners
Altı yükleyici, tek prop
Multi-step loader
Uzun işler, adım adım
Confetti
Kutlama patlaması
Success check
Patlamayla çizilen onay
Gezinme 6
Göz atTabs indicator
Sekmeler arasında kayan gösterge
Segmented control
iOS tarzı kayan düğme
Stepper
Dolup işaretlenen adımlar
Dock
Büyüyen macOS dock'u
Bottom navigation
Kayan haplı mobil sekme çubuğu
Command palette morph
Arama alanı komut paletine dönüşür
Katmanlar 5
Göz atMorphing dialog
Kart, diyaloğa dönüşür
Spring drawer
Sürükleyip kapatılan yaylı panel
Popover morph
Buton, panele dönüşür
Animated tooltip
Yerine yaylanan ipuçları
Stagger dropdown
Sırayla beliren menü öğeleri
Listeler ve tablolar 6
Göz atAccordion height
Akıcı yükseklik, sıçrama yok
List reorder
Yaylı sürükle-bırak sıralama
Table row presence
Girip çıkan satırlar
Animated list
Yeni öğeler üstten girer
Tree expand
Açılan klasörler
Expandable row list
Yerinde açılan satırlar
Girişler 10
Göz atTag input
Önerili etiketler
OTP input
Otomatik ilerleyen tek kullanımlık kod
Floating label input
Odakta yukarı kayan etiket
Vanish input
Dönen ve silinen yer tutucular
Input shake
Hatada titrer, başarıda onaylanır
Spring switch
Yaylı düğmeli anahtar
Drawn checkbox
Onay işareti kendini çizer
Slider with tooltip
Canlı değerli aralık çubuğu
Expanding search
Gerektiğinde açılan arama
File drop zone
Yükleme ilerlemeli bırakma alanı
Butonlar 10
Göz atShimmer button
Butonun üstünden geçen ışık
Ripple button
Tıklamadan yayılan mürekkep
Rainbow button
Akan gökkuşağı kenarlık
Border beam button
Kenarlıkta dönen ışın
Magnetic button
İmlece doğru çekilir
Stateful button
Yükleme, başarı ve hata hazır
Copy button
Dönüşen onay ile kopyala
Hold to confirm
Riskli işlemler için basılı tut
Liquid glass button
Kayan merceli buzlu cam
Theme toggle
Daire geçişiyle açıktan koyuya
Metin 9
Göz atText reveal
Kelimeler bulanıktan netleşir
Typewriter
İfadeleri yazar ve siler
Word rotate
Sürekli değişen tek kelime
Shiny text
Yazının üstünden geçen parıltı
Gradient text
Hareketli gradyan başlıklar
Scramble text
Harfler yerine oturur
Highlighter
Elle çizilmiş fosforlu kalem
Text morph
Harfler yeni kelimeye dönüşür
Scroll velocity
Kaydırdıkça hızlanan yazı
Kartlar ve efektler 6
Göz atSpotlight card
İşaretçiyi izleyen ışık
Tilt card
Derinlik katmanlı 3D eğim
Border beam
Kartın etrafında gezen ışık
Glow border
Yumuşak hareketli parıltı
Progressive blur
İçerik bulanıklığa karışır
Expandable card
Yerinde açılan kart
Arka planlar 5
Göz atDot grid
İmleç yakınında yanan noktalar
Flickering grid
Hafifçe titreşen ızgara
Aurora
Yavaş kutup ışıkları
Particles
Birbirine bağlı süzülen parçacıklar
Marquee
Bitmeyen kayan şerit
Yapay zeka ve ajanlar 16
Göz atChat message
Markdown ve eylemli mesajlar
Streaming text
Akarak gelen metin
Tool call
Durumlu araç çalıştırma
Reasoning block
Açılabilir düşünme
Model picker
Hız ve fiyata göre model seç
Chat composer
Dosya ve komutlu istem kutusu
Citations
Satır içi kaynaklar
Agent plan
Canlı ajan görev listesi
Token meter
Bağlamın dolduğunu gör
Voice orb
Sese tepki veren küre
Diff view
Değişiklikleri parça parça incele
Code block
Kopyalanabilir renkli kod
Suggestion chips
İstem başlatıcıları
Thread list
Aramalı sohbet geçmişi
Eval score
Eşiğe göre puanlar
Typing indicator
Biri yazıyor
Grafikler 14
Göz atArea chart
Kaydırılabilir dolgulu trendler
Line chart
Kendini çizen çizgiler
Bar chart
Gruplu veya yığılmış çubuklar
Donut chart
Bütünün payı
Radial progress
İç içe hedef halkaları
Heatmap
Hareket bir bakışta
Funnel chart
İnsanlar nerede ayrılıyor
Gauge
Kadranda tek sayı
Bump chart
Zaman içinde sıralamalar
Treemap
Boyutlar karo olarak
Timeline chart
Planlar için Gantt
Waterfall chart
Toplama giden artı ve eksiler
KPI trend
Sayı ve mini grafiği
Chart legend
Tıkla, seriyi gizle